一. .attr(attributeName)返回String
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属性。
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>em { color:blue; font-weight;bold; } 5 div { color:red; }</style> 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 7 </head> 8 <body> 9 <p> 10 Once there was a <em title="huge, gigantic">large</em> dinosaur... 11 </p> 12 13 The title of the emphasis is:<div></div> 14 <script>var title = $("em").attr("title"); 15 $("div").text(title); 16 </script> 17 </body> 18 </html>
二. .attr( attributeName, value ) 返回 jquery
attributeName 要设置值的属性名 ;value 我这个属性设置的值
.attr( attributeName, function(index, attr) )
attributeName要设置值的属性名
function(index, attr)这个函数返回用来设置的值，this 是当前的元素。接收元素的索引位置和元素旧的样属性值为参数
设置一个简单的属性
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
一次设置多个属性
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
警告： 当设置样式名（“class”）属性时，必须使用引号！
注意: Internet Explorer不会允许你改变<input>或者<button>元素的type属性。
例子: 为页面中全部的 <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>
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>
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>
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>