詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法_jquery

　　jQuery中操縱元素屬性的方法:
　　attr(): 讀取或寫入符合元素的屬性值.
　　removeAttr(): 從符合的元素中移除指定的屬性.

attr()方法 讀取操作

　　attr()讀取操作. 讀取的是符合元素中第一個元素的指定屬性值.
　　格式: .attr(attributeName),傳回值類型:String.讀取不存在的屬性會回傳undefined.
 
　　注意選擇器的選擇結果可能是一個集合,這裡僅僅獲取的是集合中第一個元素的該屬性值.
　　看例子:

複製程式碼 程式碼如下:

   
   

paragraph 1

paragraph 2

get title

　　運行結果:彈框顯示: title1.
 
　　想要分別取得每一個元素的屬性,需要使用jQuery的循環結構,例如.each()或.map()方法.
　　上面的例子可以改成:

複製程式碼 程式碼如下:

　　即可分別取得每個元素的屬性.

attr()方法 寫入操作

　　attr()寫入操作. 為符合元素的一個或多個屬性賦值.
　　一般格式: .attr(attributeName, value), 即為屬性設定value.
　　回傳值類型:jQuery.也即支援鍊式方法呼叫.
 
　　執行寫入操作的時候,如果指定的屬性名稱不存在,將會增加一個該名字的屬性,即增加自訂屬性,其名為屬性名稱,其值為value值.
 
　　寫屬性是為匹配集合中的每一個元素都進行操作的,見例子:

複製程式碼 程式碼如下:

   
   

This is a paragraph.

This is a div.

This is another paragraph.

This is another div.

 
　　點選按鈕之後所有的p都加上了title="Hello World」的屬性.

　　寫入操作還有以下兩種格式:
　　.attr(attributes)和.attr(attributeName, function).
　　以下分別介紹.

.attr(attributes):

　　這裡attributes型別是PlainObject,可以用來一次設定多個屬性.
　　什麼是PlainObject呢,簡單理解就是大括號包圍的鍵值對序列.可以參考問後連結說明.
　　鍵和值之間用冒號(:)分隔,每個鍵值對之間用逗號(,)分隔.
 
　　注意: 設定多個屬性值時,屬性名的引號是可選的(可以有,也可以沒有).但是class屬性是個例外,必須加上引號.
 
　　例子:

複製程式碼 程式碼如下:

   
   

This is a paragraph.

This is a div.

This is another paragraph.

This is another div.

　　點選兩個按鈕之後,元素變成:

　　其中

的hello是一個新增的自訂屬性,其value為World.
 
.attr(attributeName, function(index, oldValue)):
　　使用一個function來設定屬性值.function的第一個參數是index,第二個參數是該屬性之前的值.
　　看例子:

複製程式碼 程式碼如下:

div {
顏色：藍色；
}
跨度{
顏色：紅色；
}
b {
字體粗細：加粗；
}
風格>


$(文檔).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
返回“div-id”索引oldAttr;
} 其他 {
返回“div-id”索引；
}
})
.each(函數 () {
$("span", this).html("(id = '" this.id "')");
});
});
腳本>
頭>

零

第一個

第二個

身體>

上面的例子，對應的頁面結果如下：

 
　　當使用一個方法來設定屬性值的時候，如果這個設定的函數沒有回傳值，或是回傳了undefined，目前的值是不會被改變的。
　　即操作會被忽略。
　　還是上面的例子，attr()其中的函數回傳未定義：
　　如下：

複製程式碼程式碼如下：

    $(文檔).ready(function () {
        $("div").attr("id", function (index, oldAttr) {
            返回未定義；
        }).each(函數 () {
            $("span", this).html("(id = '" this.id "')");
        });
    });
腳本>

 
　　回傳的頁面效果如下：

即不進行任何修改操作，還是保留原來的屬性值。
 
　　注意：jQuery不能修改和的type屬性，修改的話會在瀏覽器報錯。
　　這是因為IE瀏覽器中無法輸入屬性。

removeAttr() 方法

：刪除符合元素集合中每個元素的指定屬性。
　　removeAttr() 方法但是調用的是 JavaScript 的removeAttribute() 方法，它可以用 jQuery 物件直接調用，並且它考慮到並處理各個瀏覽器上的屬性名稱可能不統一的問題。
　　範例：

複製程式碼程式碼如下：

   
   
        $(文檔).ready(function () {
            $("input[type=button]").click(function () {
                $("div").removeAttr("標題");
            });
        });
    腳本>
頭>

輸入>

零

身體>

 
　　點選按鈕後,

的title屬性會被刪除.
 
　　注意: 用removeAttr()移除onclick在IE6-8上都不會起作用,為了避免這個問題,應該使用.prop()方法.
　　例如:

複製程式碼 程式碼如下:

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