jQuery的attr與prop使用介紹_jquery

attribute與property

attribute和property都可以翻譯為屬性，為了以示區別，通常把這兩個字翻譯為屬性與特性。

Click Here

上面這段HTML語句中有三個節點，分別是Element “div”、attribute “id”、Text “click here”，我們最常見的attribute正式指的attribute類型節點，在JavaScript有專門處理attribute的函數.getAttribute(name) / setAttribute(name,value)。當然attribute不只是我們能夠在HTML文件上看到的這幾個，我們可以自訂attributed加到DOM節點中

複製程式碼 程式碼如下:

123

   

這樣可以div被修改為

複製程式碼 程式碼如下:

123

透過方法 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='cus>;

區別

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

2. 並不是所有的attribute與對應的property名字都一致，例如剛才使用的attribute 的class屬性，使用property操作的時候應該是這樣className

複製程式碼 代碼如下:t.className='active2';

t.className='active2';

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

程式碼如下:

複製程式碼

程式碼如下:

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取得是计算后的完整路径

复制代码 代码如下:

Click

复制代码 代码如下:

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

复制代码 代码如下:

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()就很清楚了，不過還是傳一張坊間很流行的圖