jQuery中attr()與prop()的區別有哪些

這篇文章給大家分享的是有關jQuery中attr()與prop()的區別有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

jQuery attr() 方法 和 prop() 方法

• attr() 方法設置或返回被選元素的屬性值。

• prop() 方法設置或返回被選元素的屬性和值。

注：單純從定義看的話，兩個方法的作用都是一樣的。而且用法也都差不多，如下所示。

作用一：返回被選元素的屬性值。語法如下：

$(selector).attr(attribute)
$(selector).prop(property)

作用二：設置被選元素的屬性和值。語法如下：

$(selector).attr(attribute,value)
$(selector).prop(property,value)

作用三：設置多個屬性和值。語法如下：

$(selector).attr( {attribute:value, attribute:value ...} ) //對象的寫法，鍵值對
$(selector).prop( {property:value, property:value,...} ) //對象的寫法，鍵值對

作用四：使用函數設置屬性和值。語法如下：（平時很少用到）

//第二個參數：規定返回要設置的屬性值的函數。
/*該函數包括兩個參數：
*   index - 檢索集合中元素的 index 位置。
*   oldvalue / currentvalue - 檢索被選元素的當前屬性值。
*/
$(selector).attr(attribute,function(index,oldvalue))
$(selector).prop(property,function(index,currentvalue))

我們會發現：

• 兩個方法的用法都如出一轍，只是方法名稱存在差異。一個是 attr，一個是 prop。

• attr 的 全拼是 attribute。 prop 的全拼是 property。它們是兩個不同的單詞，雖說都有 屬性 的意思，但其中的寓意必然不一樣。

property 和 attribute 的 區別

• property n. 屬性，性質，性能；財產；所有權

• attribute n. 屬性；特質

由此可見，兩者非常容易混淆，因為在中文上的翻譯都特別接近。但實際上，它們兩個是不同的東西，屬于不同的范疇。

• 深究它們的中文含義，我們可以將 attribute 理解為 “特性” ，而將 property 理解為 “屬性”。

• 顯而易見，一個是 屬性，一個是特性。肯定不一樣了。

• 如果你百度 “屬性” 關鍵字的話，你會發現，屬性 對應的英文直接就是 property。而且百度含義對 “屬性” 的　詳細釋義　是：指事物本身固有的不可缺少的性質。。

現在，我們知道了：

• property　屬性。它是與生俱來的，并不是后天賦予的。比如說，某些對象在定義時就具有某一些屬性。

• attribute　特性。本身沒有的，后天賦予的。比如說，某些對象在創建后，自定義賦予的一些屬性。

對應到 js 中就是：

• property 是 DOM 中的屬性，是 JavaScript 里的對象；

• attribute 是 HTML 標簽上的特性（屬性），它的值只能夠是字符串；

對應到 jQuery 中就是：

• 對于 HTML 元素本身就帶有的固有屬性，或者說 W3C 標準里就包含有這些屬性，更直觀的說法就是，編輯器里面可以智能提示出來的一些屬性，如：src、href、value、class、name、id等。在處理時，使用 prop() 方法。

• 對于 HTML 元素我們自定義的 DOM 屬性，即元素本身是沒有這個屬性的，如：data-*。在處理時，使用 attr() 方法。

attr() 方法 和 prop() 方法 的返回值

• $(eleStr).attr()

<img src="/smile.jpg"/>
<button>獲取圖像的 class 屬性值</button>
12
$("button").click(function(){
    console.log( $("img").attr("class") );//如果屬性存在，則返回屬性值；如果屬性不存在，則返回 undefined
    console.log( $("img").prop("class") );//如果屬性存在，則返回屬性值；如果屬性不存在，則返回 空（""）
});

• $(eleStr).prop()

<input type="checkbox">
<button>獲取復選框的選中狀態</button>
12
$("button").click(function(){
    console.log( $("input").prop("checked") ); //如果屬性值存在，則返回 true；如果屬性值不存在，則返回 false。
    console.log( $("input").attr("checked") );//如果屬性值存在，則返回 checked；如果屬性值不存在，則返回 undefined。
  });

感謝各位的閱讀！關于“jQuery中attr()與prop()的區別有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！