jQuery學習筆記（四）：attr()與prop()的區別

這一節針對attr()與prop()之間的區別進行學習。

先看看官方文檔是如何解釋二者之間功能差別的：

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之間的區別。

attribute與propery都有屬性的意思，爲了以示區分，咱們約定命名attribute爲屬性，命名property爲特性

先說attribute

在javascript中有getAttribute()，專門用來獲取節點的屬性值。

節點的屬性值，咱們指的是<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(),設置節點的屬性值。

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

能夠看到，節點的屬性值發生了改變。經過setAttribute設置的屬性值改變的就是節點的屬性值。

attr()的功能即是結合javascript中的getAttribute()與setAttribut()，操做的對象是節點的屬性值。

再說property

property是DOM元素的特性，和日常使用對象的方法相同，能夠經過對象.特性獲取對象的特性值，也能夠經過對象.特性=特性值的方法來設置對象的特性值。

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

能夠看到獲取了DOM元素的特性值。雖然與節點的屬性值內容所指相同，可是形式上仍是有區別的。

再看看設置DOM元素特性值：

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

 

發現改變了DOM元素的特性值，節點元素的屬性值隨着發生了改變。再經過getAttribute()方法，看是否能獲取剛剛設定的特性值。

<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的特性值，元素的屬性值也一樣發生了改變。

 

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

其實不盡然，真實狀況是attribute與property引用了相同的數據來源。

1. 於build-in屬性，attribute和property共享數據，attribute更改了會對property形成影響，反之亦然，可是二者的自定義屬性是獨立的數據，即便name同樣，也互不影響，看起來是下面這張圖，可是IE六、7沒有做區分，依然共享自定義屬性數據。

2. 並非全部的attribute與對應的property名字都一致。好比attribute中的class，在property中對應的名稱爲className。

3. 對於值是true/false的property，相似於input的checked等，attribute取得值是HTML文檔裏面的值（checked），property是取得計算結果（true/false），property改變並不影響attribute字面量，但attribute改變會影響property計算。

4. 對於一些和路徑相關的屬性，二者取得值也不盡相同，可是一樣attribute取得是字面量，property取得是計算後的完整路徑，就像上面例子中src的返回值。

 

如何選擇

整體來講，對於內建屬性使用prop(),自定義屬性時使用attr()，另外的參數能夠參照下面這張表。