jQuery基础学习(三)

一.jQuery-获取并设置CSS类

jQuery拥有若干进行CSS操作的方法。

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery addClass()方法示例：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

在addClass()方法中规定多个类：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

jQuery removeClass()方法：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass()方法：该方法对被选元素进行添加/删除类的切换操作。

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

二.jQuery css()方法

css()方法设置或返回被选元素的一个或多个样式属性。

返回CSS属性：如需返回特定的CSS属性的值，请使用如下语法：

css("propertyname");

如返回首个匹配元素的background-color值：

扫描二维码关注公众号，回复： 5774891 查看本文章

$("p").css("background-color");

设置CSS属性

设置指定CSS属性的语法如下：css("propertyname", "value");

示例：

$("p").css("background-color","yellow");

设置多个CSS属性

语法：css({"propertyname":"value", "propertyname":"value", ...})；

示例：

$("p").css({"background-color":"yellow","font-size":"200%"});

三.jQuery尺寸

jQuery width()和height()方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

示例：

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth()和innerHeight()方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

示例：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth()和outerHeight()方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

jQuery基础学习(三)

猜你喜欢