jQuery(三)、属性、CSS

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

jQuery设置了很多为标签进行属性的操作，比如添加、删除。

一 、属性

1 attr(name | properties | [key, value | fn])

　　设置或返回被选择的属性值。

　　参数：

　　(1) name ：属性名，返回该属性值。

　　(2) properties：该参数为'名 : 值' 对的JSON格式对象，给标签进行设值，如： $("img").attr({'width':'100','height':'100','src':'1.png'})

　　(3) key, value：为属性key设置值value。

　　(4) key, function(index,attr)：设置属性，函数function返回属性值，入参index为当前元素的索引值，attr为原先属性值。

2 removeAttr(name)

　　从每一个匹配的元素中删除一个属性。

3 prop(name | properties | [key, value | fn])

　　获取在匹配的元素集中的属性值(雷同 attr )

4 removeProp(name)

　　用来删除由prop方法设置的属性值。

5 addClass(class | fn)

　　为每个匹配的元素添加指定的类名。

　　参数：

　　(1) class：一个或多个要添加到元素中的CSS类名，多个class用空格分开。

　　(2) function(index, class)：此函数必须返回一个或多个class。index为元素索引，class为元素以前的class。

6 removeClass([class | fn])

　　为匹配的元素删除全部或指定的类。

　　参数：

　　(1) class：一个或多个要删除的CSS类名，多个class用空额分开。

　　(2) removeClass()：删除全部class

　　(3) function(index, class)：此函数必须返回一个或多个class。index为元素索引，class为元素以前的class。

7 toggleClass(class | fn  [, switch])

　　如果存在(不存在)就删除(添加)一个class。

　　参数：

　　(1) class：CSS类名。

　　(2) class, switch：要切换的class， 一个用来判断样式类添加还是移除的 boolean 值。

　　(3) switch： 一个用来判断样式类添加还是移除的 boolean 值。

　　(4) function(index, class[, switch])：1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。 2: 一个用来判断样式类添加还是移除的 boolean 值。

8 html([val | fn])

　　设置或返回第一个元素的html内容。

　　参数：

　　(1) html()：返回第一个元素的html内容。

　　(2) val：要设置的HTML内容值。

　　(3) function(index, html)：返回一个HTML字符串。index为元素在集合中的索引位置，html为原先的html。

9 text([val | fn])

　　设置或返回所有匹配元素的内容。

　　text() 返回由所有匹配元素包含的文本内容组合起来的文本。

　　参数：

　　(1) val：要设置的值

　　(2) function(index, value)：此函数要返回一个设置的值。index为元素在集合中的索引位置，text为原先的text值。

10 val([val | fn | arr])

　　设置或返回匹配元素的当前值。

　　在jQuery1.2后，可以返回任意元素的值，包括select，如果多选，将返回一个数组，包含其选择的值。

　　参数：

　　(1) val()：获取文本框中的值，如 $('input').val();

　　(2) val：要设置的值，如 $('input').val('HELLO WORLD!');

　　(3) function(index, value)：此函数返回一个要设置的值。index为元素在集合中的索引位置，value为原先的值。

　　(4) array：用于checkbox/select/radio 的值,如 $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);

二、CSS

1 css(name | pro | [, val | fn])

　　访问匹配元素的样式属性。

　　参数：

　　(1) name：要访问的属性名称，如 $('p').css('color');

　　(2) properties：要设置样式的  '名 : 值' JSON对象，如： $("p").css({ color: "#ff0011", background: "blue" });

　　(3) name, value：为属性name设置值为value。

　　(4) name, function(index, value)：为属性name设置值，函数返回要设置的值。如：

 $('#div1').css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });

2 offset([coordinates])

　　返回匹配元素在当前视口的相对偏移。

　　返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

　　参数：

　　(1) coordinates：一个对象(如：{ top: 10, left: 30 } ) ，必须包含top和left属性，作为元素的新坐标。这个参数也可以是一个返回一对坐标的函数，函数的第一个参数是元素的索引，第二个参数是当前的坐标。

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

$("p:last").offset({ top: , left:  });
$("p:last").offset(function(index,coord){
    var top = coord.top;
    var left = coord.left + ;
    return {"top":top,"left":left};
});

3 position()

　　获取匹配元素相对于父元素的偏移

　　 返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

4 height([val | fn])

　　获取匹配元素当前计算的高度值(px)。

　　参数：

　　(1) val：设定CSS中height值，可以是字符串或者数字。

　　(2) function(index, height)：返回一个用于设置高度的函数。

5 width([val | fn])

　　获取第一个匹配元素当前计算的宽度值(px)。

6 innerHeight()

　　获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

　　此方法对可见和隐藏元素均有效。

7 innerWidth

　　获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

　　此方法对可见和隐藏元素均有效。

8 outerHeight([options])

　　获取第一个匹配元素外部高度(默认包括补白和边框)。
　　此方法对可见和隐藏元素均有效。

　　参数：

　　(1) options：设置为true时，计算边距在内。

9 outerWidth([options])

　　获取第一个匹配元素外部宽度(默认包括补白和边框)。
　　此方法对可见和隐藏元素均有效。

　　参数：

　　(1) options：设置为true时，计算边距在内。