.attr()
.attr( attributeName )
描述：取得匹配的元素集合中第一个元素的某个元素属性的值。
.attr()方法只获得匹配的集合中第一个元素的该元素属性值。要想逐个获得第个元素的值，请使用循环结构，比如说jQuery的.each()方法或者.map()方法。
使用jQuery的.attr()方法获得一个元素元素属性值，有两个优点：
- 方便性它可以直接在jQuery对象上调用，并连缀到别的jQuery方法。
- 跨浏览器一致性：一些元素属性的值被报告会为跨浏览器不一致，甚至在同一个浏览器的不同的版本也不一致。该
.attr()方法消除了这些不一致。
注意：元素属性值是一个字符串，除了个别元素属性是例外，比如说tabindex和value的值。
自从jQuery 1.6版，对于还没有设置的元素属性，.attr()方法返回undefined。要检索并改变DOM属性，比如说表单元素的checked、selected或者disabled的状态，请使用.prop()方法。
Attributes对比Properties
attributes和properties两个概念的区别，在某些特定场景中很重要。自从jQuery 1.6版，.attr()方法有时候在企图取得一些attributes的时候，会读取property的值，它导致了一些不一致的行为。自从jQuery 1.6版，.prop()方法提供了一个明确检索property值的方法，与此同时.attr()只读取attributes。
举个例子，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected必须通过.prop()方法来检索或设置。在jQuery 1.6以前的版本中，这些属性曾经用.attr()方法获取，但是这并不在attr的范围内。这些没有对象的attributes，只有properties。
对于布尔元素属性，考虑一个用HTML元素标签<input type="checkbox" checked="checked" />定义DOM元素，假定它在JavaScript变量elem中：
elem.checked | true (Boolean) 将改变勾选框的状态 |
|---|---|
$( elem ).prop( "checked" ) | true (Boolean) 将改变勾选框的状态 |
elem.getAttribute( "checked" ) | "checked" (String) 勾选框的初始状态，不改变 |
$( elem ).attr( "checked" ) (1.6) | "checked" (String) 勾选框的初始状态，不改变 |
$( elem ).attr( "checked" ) (1.6.1+) | "checked" (String) 将改变勾选框的状态 |
$( elem ).attr( "checked" ) (pre-1.6) | true (Boolean) 与勾选框的状态一起改变 |
根据W3C表单规范文档，checked属性是一个布尔元素属性，这意味着如果相应的元素属性存在的话，它对应的属性值是True也就是说，如果该元素属性没有值或者被设置为空字符串，该属性值就是false。对所有的布尔元素属性都是这样的。
然而，关于元素属性checked最需要记住的概念是它并不对应于checked属性。该元素属性实际上对应于defaultChecked属性，而且只能用来设置勾选框的初始值。元素属性checked的值并不会改变勾选框的状态，与此同时，checked属性能够改变勾选框的状态。因此，要确定勾选框是否被勾选中的跨浏览器兼容的方法是使用属性：
if ( elem.checked )if ( $( elem ).prop( "checked" ) )if ( $( elem ).is( ":checked" ) )
对于动态的元素属性也一样，比如说selected和value的属性。
其它说明
- 在Internet Explorer 9以前的版本中，使用
.prop()把一个DOM元素的属性设置成除了简单的原始值（数字、字符串或者布尔值）之外的值，如果在DOM元素从document删除之前，该属性还没有被删除（用.removeProp()方法），可能导致内存泄漏。要想安装地在一个DOM对象上设置值，而不导致内存泄漏，请使用.data()方法。
示例
在勾选框的勾选状态改变的时候，显示元素属性checked和属性checked。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();
</script>
</body>
</html>
演示结果
找到网页中第一个<em>的元素title属性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
</body>
</html>
演示结果
.attr( attributeName, value )
描述：针对每个匹配的元素设置一个或多个元素属性
- attributes类型：PlainObject要设置的元素属性名值对对象
.attr()方法是一个用来设置元素属性值的便利的方法——特别是在设置多个元素属性或者使用由函数返回的值的时候。设想下面的图像：
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller">
设置一个属性
要想改变元素属性alt，只要向.attr()方法传递元素属性名以及它的新值：
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
可以用同样的方式添加一个元素属性：
$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );
一次性设置多个属性
要想改变元素属性alt并同时添加元素属性title，只要利用一个纯JavaScript对象一次性向该方法传递两个名值集合。在对象中的每个键值对添加或者修改了一个元素属性：
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
在设置多个元素属性的时候，元素属性名周围的引号是可有可无的。
警告：在设置元素属性“class”时，你必须总是使用引号。
注意：试图改变一个通过document.createElement()方法创建的input或者button元素上面的元素属性type，在Internet Explorer 8以及更早的版本中，将抛出一个异常。
计算元素属性值
通过使用一个用来设置元素属性的函数，你可以基于元素别的属性来计算这个值。举个例子：要想把一个将值和一个已有的值联接起来：
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});
当要一次性修改很多元素的元素属性时，这个计算元素属性的值的功能可能特别有用。
注意：如果在设置器函数（亦即，function(index, attr){}）中没有返回什么值，或者返回了undefined，当前的值不会改变。当只需要对部分满足条件的元素有选择地设置值时，这个功能特别有用。
示例
为网页中所有的<img>设置元素属性值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
img {
padding: 10px;
}
div {
color: red;
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img>
<img>
<img>
<div><b>Attribute of Ajax</b></div>
<script>
$( "img" ).attr({
src: "sources/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
</body>
</html>
演示结果
根据div在网页中的位置，为div设置id值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
b {
font-weight: bolder;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
<script>
$( "div" )
.attr( "id", function( arr ) {
return "div-id" + arr;
})
.each(function() {
$( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
</body>
</html>
演示结果
根据图像的title元素属性设置src元素属性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img title="hat.gif">
<script>
$( "img" ).attr( "src", function() {
return "sources/" + this.title;
});
</script>
</body>
</html>
演示结果