jQuery屬性篇-attr

.attr( attributeName )

獲取第一個匹配的元素的屬性的值。

.attr(attributeName)

類型是字符串。

用於獲取的屬性的名字。

這個.attr()方法是獲取第一個匹配元素的屬性值。爲了單獨的獲取每個元素的值，使用循環結構如jQuery的.each()或.map()方法。

jQuery1.6，沒有被設置的屬性的元素使用.attr()方法返回的是undefined，另外，.attr()不應該被使用在普通對象,arrays,window或者document上。爲了獲取和改變DOM元素的properties，使用.prop()方法(見下一篇詳細講解attribute和property的區別)

使用jQuery的.attr()方法來獲取元素屬性的值有兩個主要的優點：

1、便利：它能夠直接的在一個jQuery對象上調用並且使用鏈式結構傳遞給其他jQuery方法。

2、跨瀏覽器一致性：一些屬性的值被報告在瀏覽器間不一致，甚至是同一個瀏覽器的不同版本。.attr()方法減少了這些不一致。

NOTE：屬性值一般都是字符串，除了少數一些屬性如value和tabindex.

.attr( attributeName, value )

爲匹配元素設置一個或多個屬性

.attr(attributeName,value)

.attr(attributes)

.attr(attributeName,function(index,attr))

attributeName

類型字符串

用於設置的屬性的名字。

value

類型是字符串或者數字。

爲屬性設置的值。

attributes

類型是普通對象。

一個用於設置的屬性和值對的對象。

function(index,attr)

類型是函數。

一個函數返回用來設置的值。this是當前的元素。接收集合中元素的index位置和原來的屬性值做爲參數。

.attr()方法是一個方便的方式來設置屬性的值，特別是設置多了屬性值或者使用函數返回的值。如下的image：

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

設置簡單的屬性

改變alt的屬性，只要傳遞屬性的名稱和它的新的值到.attr()方法中：

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

同樣的方式添加一個title屬性：

$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');

一次設置不同的屬性

同時改變alt的屬性值並添加title屬性，使用簡單javascript對象傳遞名字和值的集合到方法中。在對象中的每個key-value對來添加或者修改屬性

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

當設置不同的屬性時，在屬性名周圍的引號是可選的。

警告：當設置class屬性時，必須使用引號！

NOTE：jQuery禁止在<input>或者<button>上改變屬性type，不然會在所有瀏覽器中會拋出錯誤。這是因爲屬性type不能夠在IE中被改變。

計算屬性值

通過使用函數設置屬性，你能夠使用這個元素上的其他屬性來計算屬性值。比如，通過存在的屬性值來連接成新的值

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

當一次性改變多了元素的屬性時，這個方法很有用。

NOTE：如果函數（如function(index, attr){}）沒有值，或者undefined被返回，當前的值不會改變。當某些條件被滿足的時候，可以有選擇的設置。

.removeAttr( attributeName )

移除每一個集合中匹配的元素的屬性

.removeAttr(attributeName)

attributeName

類型是字符串。

用來移除的屬性。在jQuery1.7中，它可以是有空格隔開的屬性列表。

.removeAttr(）方法使用了javascript的removeAttribute()函數，但是它的優勢是能直接在一個jQuery對象上調用，並且它考慮了瀏覽器中的不同屬性的命名。

NOTE：移除一個內聯的onclick事件句柄，在IE6，7，8中使用.removeAttr()不會得到期望的結果，爲了避免潛在的問題，使用.prop()替換：

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);

<script>
//設置頁面中所有的<img>的屬性
$("img").attr({ 
  src: "/images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>

<script>
//根據在頁面中的位置設置div的id
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>

<script>
//從image的title屬性設置其src屬性
$("img").attr("src", function() { 
    return "/images/" + this.title; 
});
</script>

<script>
//點擊button使在它下一個的input元素可以輸入
(function() {
  var inputTitle = $("input").attr("title");
  $("button").click(function () {
    var input = $(this).next();
    if ( input.attr("title") == inputTitle ) {
      input.removeAttr("title")
    } else {
      input.attr("title", inputTitle);
    }
    $("#log").html( "input title is now " + input.attr("title") );
  });
})();
</script>