jQuery属性

1、jQuery属性之属性

1.1、attr(name)

获得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined。返回值：Object
参数：
name：属性名称。--String
示例：返回文档中第一个图像的src属性值。
HTML代码：

<img src="test.jsp"/>

jQuery代码：

$("img").attr("src");

结果：

test.jsp

1.2、attr(properties)

将一个"名/值"形式的对象设置为所有匹配元素的属性。返回值：jQuery。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className'作为属性名。或者你可以直接使用.addClass(class)和.removeClass(class)。
参数：
properties：作为属性的"名/值对"对象。--Map
示例：为所有图像设置src和alt属性。
HTML代码：

<img/>

jQuery代码：

$("img").attr({src: "test.jsp", alt: "Test Image"});

结果：

[ <img src= "test.jpg"  alt:="Test Image" /> ]

1.3、attr(key, value)

为所有匹配的元素设置一个属性值。返回值：jQuery
参数：
key：属性名称。--String
value：属性值。--Object
示例：为所有图像设置src属性。
HTML代码：

<img/>
<img/>

jQuery代码：

$("img").attr("src", "test.jpg");

结果：

[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

1.4、attr(key, function(index, attr))

为所有匹配的元素设置一个计算的属性值。返回值：jQuery
不提供值，而是提供一个函数 ，由这个函数计算的值作为属性值。
参数：
key：属性名称。--String
function(index, attr)：返回属性的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。
示例：把src属性的值设置为title属性的值。
HTML代码：

<img src="test.jpg"/>

jQuery代码：

$("img").attr("title", function(){
return this.src;
});

结果：

<img src="test.jpg" title="test.jpg"/>

1.5、removeAttr(name)

从每一个匹配的元素中删除一个属性。返回值：jQuery
参数：
name：要删除的属性名。--String
示例：将文档中图像的src属性删除。

HTML代码：

<img src="test.jpg"/>

jQuery代码：

$("img").removeAttr("src");

结果：

[ <img /> ]

2、jQuery属性之CSS类

2.1、addClass(class)

为每个匹配的元素添加指定的类名。返回值：jQuery
参数：
class：一个或多个要添加到元素中的CSS类名，请用空格分开。--String

示例：为匹配的元素加上'selected'类。
HTML代码：

<p>Hello</p>

jQuery代码：

$("p").addClass("selected");

结果：

[ <p class="selected">Hello</p> ]

2.2、addClass(function(index, class))

为每个匹配的元素添加指定的类名。返回值：jQuery
参数：
function(index, class)：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原来的class属性值。
示例：给li加上不同的class。
HTML代码：

<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>

jQuery代码：

$("ul li:last").addClass(function(){
return 'item-' + $(this).index();
});

2.3、removeClass([class])

从所有匹配的元素中删除全部或者指定的类。返回值：jQuery
参数：
class：(可选)一个或多个要删除的CSS类名，请用空格分开。
示例：从匹配的元素中删除'selected'类。
HTML代码：

<p class='selected first'>Hello</p>

jQuery代码：

$("p").removeClass("selected");

结果：

[ <p class="first">Hello</p> ]

2.4、removeClass(function(index, class))

从所有匹配的元素中删除全部或者指定的类。返回值：jQuery
参数：
function(index, class)：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原来的class属性值。
示例：删除最后一个元素上与前面重复的class
jQuery代码：

$('li:last').removeClass(function(){
return $(this).prev().attr('this');
});

2.5、toggleClass(class)

如果存在(不存在)就删除(添加)一个类。返回值：jQuery
参数：
class：CSS类名。--String
示例：为匹配的元素切换''selected类。
HTML代码：

<p>Hello</p><p class="selected">Hello Again</p>

jQuery代码：

$("p").togggleClass("selected");

结果：

[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

2.6、toggleClass(class, switch)

如果开关switch参数为true则加上对应的class，否则就删除。返回值：jQuery
参数：
class：要切换的CSS类名。--String
switch：用于决定元素是否包含class的布尔值。--Boolean
示例：每点击三下加上一个'highlight'类。
HTML代码：

<strong>jQuery 代码：</strong>

jQuery代码：

var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});

2.7、toggleClass(function(index, class), [switch])

如果开关switch参数为true则加上对应的class，否则就删除。返回值：jQuery
参数：
function(index, value)：返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值。--Function
switch：(可选)用于决定元素是否包含class的布尔值。--Boolean

示例：根据父元素来设置class属性。
jQuery代码：

$('div.foo').toggleClass(function(){
if($(this).parent().is('.bar')){
return 'happy';
}else{
return 'sad';
}
});

2.8、html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个HTML文档中，我们可以使用.html()方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只能第一个匹配元素的HTML内容会被获取。

参数：
val：用于设定HTML内容的值。
function(index, html)：此函数返回一个HTML字符串。接着两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
示例1：返回P元素的内容。
jQuery代码：

$("p").html();

示例2：设置所有P元素的内容。

jQuery代码：

$("p").html("hello <b>world</b>");

2.9、text([val|fn])

获取所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数：
val：用于设置元素内容的文本。--String
function(index,text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原来的text值。
示例：返回p元素的文本内容。
jQuery代码：

$('p').text();

3.0、val([val|fn|arr])

获取匹配元素的当前值。
在jQuery1.2中，可以返回任意元素的值了。如果多选，将返回一个数组，其包含所选的值(有value属性的标签，如果选择器匹配多个则返回第一个元素的值)。

参数：
val：要设置的值。--String
function(index,value)：此函数返回一个要设置的值，接受两个参数，index为元素在集合中的索引位置，text为原先的text值。--Function
array：用于check/select的值。--Array<String>
示例1：获取文本框中的值。
jQuery代码：

$("input").val();

示例2：设定文本框的值。
jQuery代码：

$("input:text.items").val(function(){
return this.value + '  ' + this.className;
});