jQuery Attributes(屬性)的使用(一、屬性篇)

本篇講解：attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
您可以到jQuery官網來學習更多的有關jQuery知識。
下面的代碼，運行後，需要重新整理下。 xmlns="http://www.w3.org/1999/xhtml" >

jQuery-Attributes(屬性)的使用(一、屬性篇)

本系列文章主要講述jQuery架構的屬性(Attributes)使用方法，我將以執行個體方式進行講述，以簡單，全面為基礎，不會涉及很深，文章分為：屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。

本篇講解：attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法。

您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com

您可以到jQuery官網來學習更多的有關jQuery知識。
著作權：code-cat 部落格:http://www.cnblogs.com/bynet 轉載請保留原作者、出處和著作權資訊！在IE6/7/8、Firefox下測試過了，效果都行實現。1. attr(name)用法

定義：取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中擷取一個屬性的值。如果元素沒有相應屬性，則返回 undefined 。

傳回值：Object

參數：name (String) : 屬性名稱

執行個體：將ID為"div_a1"的DIV中第一張圖片的路徑、ID、Name、寬度、Alt、Value屬性的值輸出到ID為'div_a1_1'的DIV中。代碼：

$("#div_a1_1").append('<span style="color:Red;"><strong>圖片數量：$("#div_a1 img")擷取到'+$("#div_a1 img").size()+'張圖片</strong></span><br />');

$("#div_a1_1").append('第一張圖片路徑：'+$("#div_a1 img").attr("src")+'<br />');

$("#div_a1_1").append('第一張圖片ID：'+$("#div_a1 img").attr("id")+'<br />');

$("#div_a1_1").append('第一張圖片Name：'+$("#div_a1 img").attr("name")+'<br />');

$("#div_a1_1").append('第一張圖片框寬度：'+$("#div_a1 img").attr("width")+'<br />');

$("#div_a1_1").append('第一張圖片框alt：'+$("#div_a1 img").attr("alt")+'<br />');

$("#div_a1_1").append('<span style="color:Red;"><strong>第一個圖片框Value值：'+$("#div_a1 img").attr("Value")+'</strong></span><br />');
//點擊按鈕一看效果

DIV ID="div_a1"
id="div_a1_1"

你可以試著將上面那個文字框的屬性值輸出

注意：選取器$("#div_a1 img")擷取到了2張圖片，而att(name)只得到第一張圖片的屬性值。img元素沒有value屬性，所以最後輸出'undefined'。2. attr(properties)用法

定義：將一個"名/值"形式的對象設定為所有匹配元素的屬性。

這是一種在所有匹配元素中大量設定很多屬性的最佳方式。 注意，如果你要設定對象的class屬性，你必須使用'className' 作為屬性名稱。
或者你可以直接使用.addClass( class ) 和 .removeClass( class ).


傳回值：jQuery

參數：properties (Map) : 作為屬性的"名/值對"對象

執行個體：將ID為"div_b1"的DIV中為所有映像設定src和alt屬性。代碼：

$("#div_b1 img:eq(0)").attr({ src: "/upload/2009-12/20091214233425668.gif", alt: "Google" });

$("#div_b1 img:eq(1)").attr({ src: "/upload/2009-12/20091214233425172.gif", alt: "雅虎" }); //點擊按鈕二看效果

DIV ID="div_b1"

3. attr(key,value)用法

定義：為所有匹配的元素設定一個屬性值。

傳回值：jQuery

參數：key (String) : 屬性名稱 value (Object) : 屬性值

執行個體：將ID為"div_c1"的DIV中為所有映像設定src屬性。代碼：

$("#div_c1 img:eq(0)").attr("src","/upload/2009-12/20091214233425668.gif");

$("#div_c1 img:eq(1)").attr("src","/upload/2009-12/20091214233425172.gif"); //點擊按鈕三看效果

DIV ID="div_c1"

4. attr(key,fn)用法

定義：為所有匹配的元素設定一個計算的屬性值。不提供值，而是提供一個函數，由這個Function Compute的值作為屬性值。

傳回值：jQuery

參數：key (String) : 屬性名稱 fn (Function) : 傳回值的函數 範圍:當前元素, 參數: 當前元素的索引值

執行個體：將ID為"div_d1"的DIV中為所有映像把title屬性的值設定為src屬性的值。
代碼：$("#div_d1 img").attr("src", function() { return this.title;}); //點擊按鈕四看效果

DIV ID="div_d1"


5. removeAttr(name)用法

定義：從每一個匹配的元素中刪除一個屬性。

傳回值：jQuery

參數：name (String) : 要刪除的屬性名稱

執行個體：將ID為"div_e1"的DIV中為把所有映像src屬性刪除 。
代碼：$("#div_e1 img").removeAttr("src"); //點擊按鈕五看效果

DIV ID="div_e1"