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值：

$("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);
});