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>
 $("button").click(function(){ console.log( $("img").attr("class") );//若是屬性存在，則返回屬性值；若是屬性不存在，則返回 undefined
    console.log( $("img").prop("class") );//若是屬性存在，則返回屬性值；若是屬性不存在，則返回 空（""）
});

• $(eleStr).prop()

 

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

結束語

若是要從根源上弄清楚兩者的區別，能夠參考下面這篇博文，分析的特別到位。

JS中attribute和property的區別