jQuery1.6中新添加了一個(gè)prop方法，看起來(lái)和用起來(lái)都和attr方法一樣，這兩個(gè)方法有什么區(qū)別呢？這要從HTMl 的attribute與property區(qū)別說(shuō)起，attr與prop正是這兩個(gè)東西的縮寫(xiě)。
attribute與property
attribute和property都可以翻譯為屬性，為了以示區(qū)別，通常把這兩個(gè)單詞翻譯為屬性與特性。
<
div
id
="test"
>
Click Here
</
div
>
上面這段HTML語(yǔ)句中有三個(gè)節(jié)點(diǎn)，分別是Element “div”、attribute “id”、Text “click here”，我們最常見(jiàn)的attribute正式指的attribute類(lèi)型節(jié)點(diǎn)，在JavaScript有專門(mén)處理attribute的函數(shù)? .getAttribute(name) / setAttribute(name,value) 。當(dāng)然attribute不只是我們能夠在HTML文檔上看到的這幾個(gè)，我們可以自定義attributed加到DOM節(jié)點(diǎn)中
<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
>
通過(guò)方法 setAttribute設(shè)置的attribute最終都會(huì)反映到元素的attribute類(lèi)型的節(jié)點(diǎn)中
property是DOM對(duì)象的字段，跟我們平常使用的一些對(duì)象一樣，包含很多字段，這些字段就是property，取值或者設(shè)置值和普通字段一樣通過(guò)”對(duì)象.字段“的方式。
看起來(lái)attribute和property應(yīng)該沒(méi)有什么關(guān)系才對(duì)，怎么會(huì)。。。attribute和property容易混倄是因?yàn)楹芏郺ttribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性，比如上面div的”id“ attribute 同樣可以用t.id取到（實(shí)際上絕大部分人都是這樣獲取的），通過(guò)property更改id后，用getAttibute獲取的id是更新后的id。
t.id='test1'
;
console.log(t.getAttribute(
'id'));
//
test1
同樣我們也可以自定義property
t.customizedProp='customized prop';
區(qū)別
1. 于build-in屬性，attribute和property共享數(shù)據(jù)，attribute更改了會(huì)對(duì)property造成影響，反之亦然，但是兩者的自定義屬性是獨(dú)立的數(shù)據(jù)，即使name一樣，也互不影響，看起來(lái)是下面這張圖，但是IE6、7沒(méi)有作區(qū)分，依然共享自定義屬性數(shù)據(jù)
2. 并不是所有的attribute與對(duì)應(yīng)的property名字都一致，比如剛才使用的attribute 的class屬性，使用property操作的時(shí)候應(yīng)該是這樣className
t.className='active2';
3. 對(duì)于值是true/false的property，類(lèi)似于input的checked attribute等，attribute取得值是HTML文檔字面量值，property是取得計(jì)算結(jié)果，property改變并不影響attribute字面量，但attribute改變會(huì)一向property計(jì)算
<
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. 對(duì)于一些和路徑相關(guān)的屬性，兩者取得值也不盡相同，但是同樣attribute取得是字面量，property取得是計(jì)算后的完整路徑
<
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#
關(guān)于瀏覽器（IE）造成的兼容性問(wèn)題可以看看 IE 混淆了 DOM 對(duì)象屬性（property）及 HTML 標(biāo)簽屬性（attribute），造成了對(duì) setAttribute、getAttribute 的不正確實(shí)現(xiàn)
attr和prop
相信看完上面內(nèi)容，大家就明白為什么jQuery要添加prop方法了，在jQuery API中也有專門(mén)解釋
Attributes VS. Properties
在一些特殊的情況下，attributes和properties的區(qū)別非常大。在jQuery1.6之前，.attr()方法在獲取一些attributes的時(shí)候使用了property值，這樣會(huì)導(dǎo)致一些不一致的行為。在jQuery1.6中，.prop()方法提供了一中明確的獲取property值得方式，這樣.attr()方法僅返回attributes。
比如，
selectedIndex
,?
tagName
,?
nodeName
,?
nodeType
,?
ownerDocument
,?
defaultChecked
, 和
defaultSelected應(yīng)該使用.prop()方法獲取/設(shè)置值。
?在jQuery1.6之前這些不屬于attribute的property需要用.attr()方法獲取。這幾個(gè)并沒(méi)有相應(yīng)的attibute，只有property。
關(guān)于布爾類(lèi)型 attributes，比如一個(gè)這樣的HTML標(biāo)簽，它在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
|
根據(jù) W3C forms specification ，checked屬性是一個(gè)布爾值，這就意味著只要checked屬性在HTML中表現(xiàn)出來(lái)了，那么相應(yīng)的property就應(yīng)該是true，即使checked沒(méi)有值，這點(diǎn)兒對(duì)其它布爾類(lèi)型的屬性一樣適用。
然而關(guān)于checked 屬性需要記住的最重要的一點(diǎn)是：它和checked property并不是一致的。實(shí)際上這個(gè)attribute和
defaultChecked
?property一致，而且只應(yīng)該用來(lái)設(shè)置checkbox的初始值。checked attribute并不隨著checkedbox的狀態(tài)而改變，但是checked property卻跟著變。因此瀏覽器兼容的判斷checkebox是否被選中應(yīng)該使用property
if
( elem.checked )
if
( $( elem ).prop( "checked"
) )
if
( $( elem ).is( ":checked" ) )
這對(duì)其它一些類(lèi)似于selected、value這樣的動(dòng)態(tài)attribute也適用。
在IE9之前版本中，如果property沒(méi)有在DOM元素被移除之前刪除，使用.prop()方法設(shè)置DOM元素property（簡(jiǎn)單類(lèi)型除外：number、string、boolean）的值會(huì)導(dǎo)致內(nèi)存泄露。為了安全的設(shè)置DOM對(duì)象的值，避免內(nèi)存泄露，可以使用.data()方法。
使用場(chǎng)景
其實(shí)明白了上面講的內(nèi)容，什么時(shí)候該使用.attr()什么時(shí)候該使用 .prop()就很清楚了，不過(guò)還是傳一張坊間很流行的圖
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
