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