.attr()
.attr( attributeName ) 返回: String
描述: 取得第一个匹配元素的属性值。
-
version added: 1.0.attr( attributeName )
attributeName要获取的值的属性名.
值得注意的是这个.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法做一个循环。
在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。另外，.attr()不应该用在普通的对象，数组，窗口（window）或文件（document）上。若要检索和更改DOM属性请使用.prop()方法。
the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.
使用 jQuery的 .attr() 放到得到了一个元素的属性值主要有两个好处：
- 方便：它可以被称直接jQuery对象访问和链式调用其他jQuery方法。
-
浏览器兼容：一些属性在浏览器和浏览器之间有不一致的命名。 此外，一些属性的值在不同的浏览器中报道也是不一致的（英文原文： the values of some attributes are reported inconsistently across browsers）， 甚至在同一个浏览器的不同版本中。
.attr()方法减少了兼容性问题。
举例:
在页面的第一个<em>中找到title属性。
<!DOCTYPE html>
<html>
<head>
<style>em { color:blue; font-weight;bold; }
div { color:red; }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
.attr( attributeName, value ) 返回: jQuery
描述: 为指定元素设置一个或多个属性。
-
version added: 1.0.attr( attributeName, value )
attributeName要设置值的属性名
value我这个属性设置的值
-
version added: 1.0.attr( map )
map一个配对的属性值map
-
version added: 1.1.attr( attributeName, function(index, attr) )
attributeName要设置值的属性名.
function(index, attr)这个函数返回用来设置的值，
this是当前的元素。接收元素的索引位置和元素旧的样属性值为参数。
这个 .attr() 方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片：
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
设置一个简单的属性
我们可以通过.attr()方法非常简单的改变 alt 属性并附上新值：
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
我们可以用同样的方法 添加 一个属性：
$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');
一次设置多个属性
同时改变alt 属性 和 添加 title属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性：
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
当设置多个属性,包含属性名的引号是可选的。.
警告： 当设置样式名（“class”）属性时，必须使用引号！
注意: Internet Explorer不会允许你改变<input>或者<button>元素的type属性。
推算属性值
通过使用一个函数来设置属性， 我们可以根基元素的其他属性来计算值。举个例子，我们可以把新的值与现有的值联系在一起：
$('#greatphoto').attr('title', function() {
return this.alt + ' - photo by Kelly Clark'
});
本文运用一个函数来计算属性的值，当我们修改了多个元素的属性，特别有用。
注意 如果setter函数没有返回任何数据（即function(index, attr){})，属性的当前值返回值是undefined时，作为一个getter行为。实际上，如果不进行任何更改的setter函数不返回的东西。
举例:
例子: 为页面中全部的 <img>设置一些属性。
<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
<script>$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));</script>
</body>
</html>Demo:
Example:使第二个后面的按钮disabled
<!DOCTYPE html>
<html>
<head>
<style>button { margin:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
<script>$("button:gt(1)").attr("disabled","disabled");</script>
</body>
</html>Demo:
Example:为页面中的div设置基于位置的id属性。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
Example: 通过图片的title属性设置SRC属性。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<img title="hat.gif"/>
<script>$("img").attr("src", function() {
return "/images/" + this.title;
});
</script>
</body>
</html>