?先看看官方文檔是如何解釋兩者之間功能差異的：

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. 獲取匹配的元素集合中第一個元素的attribute，或者為每個選定的元素添加一個至多個attribute

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. 獲取匹配的元素集合中第一個元素的property，或者為每個選定的元素添加一個至多個property
可以觀察到，兩者之間的功能是十分相近的，只是兩者操作的對象不同。
這樣，我們將問題縮小為attribute與property之間的區(qū)別。

attribute與propery都有屬性的意思，為了以示區(qū)分，我們約定命名attribute為屬性，命名property為特性

先說attribute

在javascript中有g(shù)etAttribute()，專門用來獲取節(jié)點的屬性值。
節(jié)點的屬性值，我們指的是<img id='test' src='test.jpg'>中的src的值

<img id='test' src='test.jpg'><script type='text/javascript'>var image = document.getElementById('test');console.log(image.getAttribute('src'));</script>

?

以及setAttribute(),設(shè)置節(jié)點的屬性值。

<img id='test' src='test.jpg'><script type='text/javascript'>var image = document.getElementById('test');image.setAttribute('src', 'another.jpg');</script>

可以看到，節(jié)點的屬性值發(fā)生了改變。通過setAttribute設(shè)置的屬性值改變的就是節(jié)點的屬性值。
attr()的功能便是結(jié)合javascript中的getAttribute()與setAttribut()，操作的對象是節(jié)點的屬性值。

再說property

property是DOM元素的特性，和平常使用對象的方法相同，可以通過對象.特性獲取對象的特性值，也可以通過對象.特性=特性值的方法來設(shè)置對象的特性值。

<img id='test' src='test.jpg'><script type='text/javascript'>var image = document.getElementById('test');console.log(image.src);</script>

可以看到獲取了DOM元素的特性值。雖然與節(jié)點的屬性值內(nèi)容所指相同，但是形式上還是有區(qū)別的。
再看看設(shè)置DOM元素特性值：

<img id='test' src='test.jpg'><script type='text/javascript'>var image = document.getElementById('test');image.src='another.jpg';</script>

?

發(fā)現(xiàn)改變了DOM元素的特性值，節(jié)點元素的屬性值隨著發(fā)生了改變。再通過getAttribute()方法，看是否能獲取剛剛設(shè)定的特性值。

<img id='test' src='test.jpg'><script type='text/javascript'>var image = document.getElementById('test');image.src='another.jpg';console.log(img.getAttribute('src'));</script>

證實改變DOM的特性值，元素的屬性值也同樣發(fā)生了改變。

?

難道說attribute與property是一樣的嗎？

其實不盡然，真實情況是attribute與property引用了相同的數(shù)據(jù)來源。

1. 于build-in屬性，attribute和property共享數(shù)據(jù)，attribute更改了會對property造成影響，反之亦然，但是兩者的自定義屬性是獨立的數(shù)據(jù)，即使name一樣，也互不影響，看起來是下面這張圖，但是IE6、7沒有作區(qū)分，依然共享自定義屬性數(shù)據(jù)。

2. 并不是所有的attribute與對應(yīng)的property名字都一致。比如attribute中的class，在property中對應(yīng)的名稱為className。

3. 對于值是true/false的property，類似于input的checked等，attribute取得值是HTML文檔里面的值（checked），property是取得計算結(jié)果（true/false），property改變并不影響attribute字面量，但attribute改變會影響property計算。

4. 對于一些和路徑相關(guān)的屬性，兩者取得值也不盡相同，但是同樣attribute取得是字面量，property取得是計算后的完整路徑，就像上面例子中src的返回值。

?

如何選擇

總體來說，對于內(nèi)建屬性使用prop(),自定義屬性時使用attr()，另外的參數(shù)可以參照下面這張表。

?

轉(zhuǎn)載于:https://www.cnblogs.com/chun6/p/6120266.html

總結(jié)

以上是生活随笔為你收集整理的jQuery学习笔记：attr()与prop()的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。