jQuery的attr與prop,attribute和property區別

jQuery1.6中新添加了一個prop方法，看起來和用起來都和attr方法同樣，這兩個方法有什麼區別呢？這要從HTMl 的attribute與property區別提及，attr與prop正是這兩個東西的縮寫。

attribute與property

attribute和property均可以翻譯爲屬性，爲了以示區別，一般把這兩個單詞翻譯爲屬性與特性。

<div id="test">Click Here</div>

上面這段HTML語句中有三個節點，分別是Element 「div」、attribute 「id」、Text 「click here」，咱們最多見的attribute正式指的attribute類型節點，在JavaScript有專門處理attribute的函數 .getAttribute(name) / setAttribute(name,value)。固然attribute不僅是咱們可以在HTML文檔上看到的這幾個，咱們能夠自定義attributed加到DOM節點中

<div id="test">123</div>
    
    <script type="text/javascript">
        var t=document.getElementById('test');
        t.setAttribute('class','active');
        t.setAttribute('customizedAttr','customized');
    </script>

這樣能夠div被修改成

<div id="test" class="active" customizedattr="customized">123</div>

經過方法 setAttribute設置的attribute最終都會反映到元素的attribute類型的節點中

property是DOM對象的字段，跟咱們日常使用的一些對象同樣，包含不少字段，這些字段就是property，取值或者設置值和普通字段同樣經過」對象.字段「的方式。

看起來attribute和property應該沒有什麼關係纔對，怎麼會。。。attribute和property容易混倄是由於不少attribute節點還有一個相對應的property屬性，好比上面div的」id「 attribute 一樣能夠用t.id取到（實際上絕大部分人都是這樣獲取的），經過property更改id後，用getAttibute獲取的id是更新後的id。

t.id='test1';
console.log(t.getAttribute('id'));//test1

一樣咱們也能夠自定義property

t.customizedProp='customized prop';

區別

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

2. 並非全部的attribute與對應的property名字都一致，好比剛纔使用的attribute 的class屬性，使用property操做的時候應該是這樣className

t.className='active2';

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

<input id="test3" type="checkbox"/>

var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;
        
        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true
        
        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. 對於一些和路徑相關的屬性，二者取得值也不盡相同，可是一樣attribute取得是字面量，property取得是計算後的完整路徑

<a id="test4" href="#">Click</a>

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

關於瀏覽器（IE）形成的兼容性問題能夠看看IE 混淆了 DOM 對象屬性（property）及 HTML 標籤屬性（attribute），形成了對 setAttribute、getAttribute 的不正確實現

attr和prop

相信看完上面內容，你們就明白爲何jQuery要添加prop方法了，在jQuery API中也有專門解釋

Attributes VS. Properties

在一些特殊的狀況下，attributes和properties的區別很是大。在jQuery1.6以前，.attr()方法在獲取一些attributes的時候使用了property值，這樣會致使一些不一致的行爲。在jQuery1.6中，.prop()方法提供了一中明確的獲取property值得方式，這樣.attr()方法僅返回attributes。

好比，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected應該使用.prop()方法獲取/設置值。 在jQuery1.6以前這些不屬於attribute的property須要用.attr()方法獲取。這幾個並無相應的attibute，只有property。

關於布爾類型 attributes，好比一個這樣的HTML標籤，它在JavaScript中變量名爲elem

<input type="checkbox" checked="checked" />

elem.checked
true (Boolean) Will change with checkbox state

$( elem ).prop( "checked" )
true (Boolean) Will change with checkbox state

elem.getAttribute( "checked" )
"checked" (String) Initial state of the checkbox; does not change

$( elem ).attr( "checked" ) (1.6)
"checked" (String) Initial state of the checkbox; does not change

$( elem ).attr( "checked" ) (1.6.1+)
"checked" (String) Will change with checkbox state

$( elem ).attr( "checked" ) (pre-1.6)
true (Boolean) Changed with checkbox state

根據W3C forms specification，checked屬性是一個布爾值，這就意味着只要checked屬性在HTML中表現出來了，那麼相應的property就應該是true，即便checked沒有值，這點兒對其它布爾類型的屬性同樣適用。

然而關於checked 屬性須要記住的最重要的一點是：它和checked property並非一致的。實際上這個attribute和defaultChecked property一致，並且只應該用來設置checkbox的初始值。checked attribute並不隨着checkedbox的狀態而改變，可是checked property卻跟着變。所以瀏覽器兼容的判斷checkebox是否被選中應該使用property

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

這對其它一些相似於selected、value這樣的動態attribute也適用。

在IE9以前版本中，若是property沒有在DOM元素被移除以前刪除，使用.prop()方法設置DOM元素property（簡單類型除外：number、string、boolean）的值會致使內存泄露。爲了安全的設置DOM對象的值，避免內存泄露，可使用.data()方法。

使用場景

其實明白了上面講的內容，何時該使用.attr()何時該使用 .prop()就很清楚了，不過仍是傳一張坊間很流行的圖

分類: