.attr()
.attr( attributeName ) 返回: String
描述: 取得第一個(gè)匹配元素的屬性值。
-
version added: 1.0.attr( attributeName )
attributeName要獲取的值的屬性名.
值得注意的是這個(gè).attr()方法只獲取第一個(gè)匹配元素的屬性值。要獲取每個(gè)單獨(dú)的元素的屬性值， 我們需要依靠jQuery的 .each()或者.map()方法做一個(gè)循環(huán)。
在jQuery 1.6中,當(dāng)屬性沒有被設(shè)置時(shí)候，.attr()方法將返回undefined。另外，.attr()不應(yīng)該用在普通的對(duì)象，數(shù)組，窗口（window）或文件（document）上。若要檢索和更改DOM屬性請(qǐng)使用.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() 放到得到了一個(gè)元素的屬性值主要有兩個(gè)好處：
- 方便：它可以被稱直接jQuery對(duì)象訪問和鏈?zhǔn)秸{(diào)用其他jQuery方法。
-
瀏覽器兼容：一些屬性在瀏覽器和瀏覽器之間有不一致的命名。 此外，一些屬性的值在不同的瀏覽器中報(bào)道也是不一致的（英文原文： the values of some attributes are reported inconsistently across browsers）， 甚至在同一個(gè)瀏覽器的不同版本中。
.attr()方法減少了兼容性問題。
舉例:
在頁面的第一個(gè)<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
描述: 為指定元素設(shè)置一個(gè)或多個(gè)屬性。
-
version added: 1.0.attr( attributeName, value )
attributeName要設(shè)置值的屬性名
value我這個(gè)屬性設(shè)置的值
-
version added: 1.0.attr( map )
map一個(gè)配對(duì)的屬性值map
-
version added: 1.1.attr( attributeName, function(index, attr) )
attributeName要設(shè)置值的屬性名.
function(index, attr)這個(gè)函數(shù)返回用來設(shè)置的值，
this是當(dāng)前的元素。接收元素的索引位置和元素舊的樣屬性值為參數(shù)。
這個(gè) .attr() 方法 是一個(gè)設(shè)置屬性值的方便而且強(qiáng)大的途徑—特別是當(dāng)設(shè)置多個(gè)屬性或使用值來自函數(shù)。 讓我們考慮下面的圖片：
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
設(shè)置一個(gè)簡(jiǎn)單的屬性
我們可以通過.attr()方法非常簡(jiǎn)單的改變 alt 屬性并附上新值：
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
我們可以用同樣的方法 添加 一個(gè)屬性：
$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');
一次設(shè)置多個(gè)屬性
同時(shí)改變alt 屬性 和 添加 title屬性, 我們可以使用一個(gè)“名/值”形式的對(duì)象 (JavaScript object literal)傳遞給這個(gè)方法。 每個(gè) key-value 對(duì)象將增加或者修改一個(gè)屬性：
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
當(dāng)設(shè)置多個(gè)屬性,包含屬性名的引號(hào)是可選的。.
警告： 當(dāng)設(shè)置樣式名（“class”）屬性時(shí)，必須使用引號(hào)！
注意: Internet Explorer不會(huì)允許你改變<input>或者<button>元素的type屬性。
推算屬性值
通過使用一個(gè)函數(shù)來設(shè)置屬性， 我們可以根基元素的其他屬性來計(jì)算值。舉個(gè)例子，我們可以把新的值與現(xiàn)有的值聯(lián)系在一起：
$('#greatphoto').attr('title', function() {
return this.alt + ' - photo by Kelly Clark'
});
本文運(yùn)用一個(gè)函數(shù)來計(jì)算屬性的值，當(dāng)我們修改了多個(gè)元素的屬性，特別有用。
注意 如果setter函數(shù)沒有返回任何數(shù)據(jù)（即function(index, attr){})，屬性的當(dāng)前值返回值是undefined時(shí)，作為一個(gè)getter行為。實(shí)際上，如果不進(jìn)行任何更改的setter函數(shù)不返回的東西。
舉例:
例子: 為頁面中全部的 <img>設(shè)置一些屬性。
<!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:使第二個(gè)后面的按鈕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設(shè)置基于位置的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屬性設(shè)置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>