各自性能作用
- attr()驹溃，此方法從jq1.0開(kāi)始一直存在，作用是讀/寫(xiě)DOM的attribute值延曙；
- .prop()豌鹤，此方法jq1.6引入，作用是讀/寫(xiě)DOM的property值枝缔；
- .data()布疙，此方法jq2.3引入蚊惯，作用是把任意的值讀取/存儲(chǔ)到DOM元素對(duì)應(yīng)的對(duì)象上。
一灵临、attr()和prop()
在jQuery中截型，attribute和prop，分別是attribute和property的簡(jiǎn)寫(xiě)儒溉，都是屬性的意思宦焦。attr()函數(shù)和prop()函數(shù)都用于設(shè)置或獲取指定的屬性，它們的參數(shù)和用法也幾乎完全相同顿涣，但這兩個(gè)函數(shù)的用處卻有著不同波闹。
1、操作對(duì)象不同
在jQuery中涛碑，attribute和property是兩個(gè)不同的概念精堕。attribute表示HTML文檔節(jié)點(diǎn)屬性，property表示JS對(duì)象的屬性锌唾。如下：
//這里的id锄码、class、style晌涕、data-id均是該元素文檔節(jié)點(diǎn)的attribute
<div id="message" class="test" style="height:66px;" data-id="123"></div>
// 這里的name滋捶、age、sex均是obj的property
var obj = { name: "coder", age: 18, sex:"男" };
- attr()的設(shè)計(jì)目標(biāo)是用于設(shè)置或獲取指定DOM元素所對(duì)應(yīng)的文檔節(jié)點(diǎn)上的屬性(attribute)余黎；
- prop()的設(shè)計(jì)目標(biāo)用于設(shè)置或獲取指定DOM元素(指的是JS對(duì)象重窟，Element類(lèi)型)上的屬性(property)。
//attr()函數(shù)針對(duì)的是該文檔節(jié)點(diǎn)的attribute
<div id="message" class="test" data-id="123"></div>
<script type="text/javascript">
// prop()函數(shù)針對(duì)的是該DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
//$msg.prop("abc")與msg.abc中的abc基本是相同的惧财，比如$msg.prop("tagName")和msg.tagName
</script
在jQuery的底層實(shí)現(xiàn)中巡扇，attr()和prop的功能都是通過(guò)js原生的Element對(duì)象(如上述代碼中的msg)實(shí)現(xiàn)的。
attr()主要依賴(lài)的是Element對(duì)象的getAttribute()和setAttribute()兩個(gè)方法垮衷。prop()主要依賴(lài)的則是js中原生的對(duì)象屬性獲取和設(shè)置方式厅翔。
<div id="message" class="test" data-id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
//attr()依賴(lài)的是Element對(duì)象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value )
// 相當(dāng)于 msg.setAttribute("data-id", 145);
$msg.attr("data-id", 145);
// 相當(dāng)于 msg.getAttribute("data_id");
var dataId = $msg.attr("data-id"); // 145
//prop()依賴(lài)的是JS原生的 element[property] 和 element[property] = value;
// 相當(dāng)于 msg["pid"] = "pid值" 或 msg.pid = "pid值"
$msg.prop("pid", "pid值");
// 相當(dāng)于 msg["pid"] 或 msg.pid
var testProp = $msg.prop("pid"); // pid值
</script>
雖然prop()針對(duì)的是DOM元素的property，而不是元素節(jié)點(diǎn)的attribute搀突。不過(guò)DOM元素某些屬性的更改也會(huì)影響到元素節(jié)點(diǎn)上對(duì)應(yīng)的屬性刀闷。例如，property的id對(duì)應(yīng)attribute的id仰迁，property的className對(duì)應(yīng)attribute的class甸昏。如：
$msg.prop("className","newTest")與$msg.attr("class","newTest")相同
2.應(yīng)用版本不同
如最開(kāi)始所說(shuō)，attr()是jQuery1.0版本就有的函數(shù)徐许，prop()是jQuery1.6版本新增的函數(shù)施蜜。
即，在1.6之前只能使用attr()雌隅，在1.6及其以后版本翻默，可以根據(jù)實(shí)際需要選擇對(duì)應(yīng)的函數(shù)缸沃。
3.用于設(shè)置的屬性值類(lèi)型不同
- 用于attr()操作的是文檔節(jié)點(diǎn)的屬性，因此設(shè)置的屬性值只能是字符串類(lèi)型冰蘑，如果不是字符串類(lèi)型和泌，也會(huì)調(diào)用其toString()方法將其轉(zhuǎn)換為字符串類(lèi)型村缸。
- prop()操作的是js對(duì)象的屬性祠肥，設(shè)置的屬性值可以為包括數(shù)組和對(duì)象在內(nèi)的任意類(lèi)型。
4.4.其他問(wèn)題
在jQuery1.6之前梯皿，只有attr()可用仇箱，該函數(shù)同時(shí)承擔(dān)了attribute的設(shè)置/獲取工作和property的設(shè)置和獲取工作。例如：在jQuery 1.6之前东羹，attr()也可以設(shè)置或獲取tagName剂桥、className、nodeName属提、nodeType等DOM元素的property权逗。
直到j(luò)Query 1.6新增prop()函數(shù)，并用來(lái)承擔(dān)property的設(shè)置或獲取工作之后冤议，attr()才只用來(lái)負(fù)責(zé)attribute的設(shè)置和獲取工作斟薇。此外，對(duì)用表單元素的"checked"恕酸、"selected"堪滨、"disabled"等屬性，在jq1.6之前蕊温，attr()獲取這些屬性返回的值為Boolean類(lèi)型袱箱，如果被選中(或禁用)就返回true，否則返回false义矛。
但從1.6開(kāi)始发笔，使用attr()獲取這些屬性的返回值為String類(lèi)型，如果被選中(或禁用)就返回"checked"凉翻、"selected"了讨、"disabeld",否則(即元素節(jié)點(diǎn)沒(méi)有該屬性)返回undefined。并且在某些版本中噪矛，這些屬性值表示文檔加載時(shí)的初始狀態(tài)值量蕊，即使之后更改了這些元素的選中(或禁用)狀態(tài)，對(duì)應(yīng)的屬性值也不會(huì)發(fā)生改變艇挨。因?yàn)閖Query認(rèn)為：attribute的"checked"残炮、"selected"、"disabled"就是表示該屬性初始狀態(tài)的值缩滨，property的checked势就、selected泉瞻、disabeld才表示該屬性實(shí)時(shí)狀態(tài)的值(值為true或false)。
因此苞冯，從1.6以后袖牙，請(qǐng)使用prop()來(lái)設(shè)置或獲取checked、selected舅锄、disabled等屬性鞭达。對(duì)于其它能夠prop()實(shí)現(xiàn)的操作，也盡量使用prop()皇忿。比如：selectedIndex, tagName, nodeName, nodeType, ownerDocument應(yīng)該使用.prop()方法獲取/設(shè)置值畴蹭。
值得注意的是對(duì)于a標(biāo)簽的href屬性，prop()與attr()取得的值不同鳍烁，prop是絕對(duì)地址叨襟，attr()取的就是href中的值，如：
<a href="#" id="adom" data-name="doma"></a>
<script>
console.log($("#adom").prop("href")); //file:///C:/Users/Administrator/Desktop/testapp/1.html#
console.log($("#adom").attr("href")); //#
</script>
注:在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()方法傀履。
二、data()
在html5中DOM標(biāo)簽可以添加一些data-xxx的屬性莉炉，可以把data()看作是存取data-xxx這樣的DOM附加信息的方法钓账。data()存取的內(nèi)容可以是字符串、數(shù)組和對(duì)象絮宁。從jQuery1.4.3起梆暮，html5的data-xxx屬性會(huì)自動(dòng)被添加到j(luò)q的data對(duì)象里，比如：
<div data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"noahlu"}‘></div>
下面的等式都成立：
$("div").data("role") === "page";$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu"
雖然data()用來(lái)存數(shù)據(jù)挺方便的绍昂，它也是有過(guò)不堪回首的過(guò)去啦粹，如：
<button id="foo" data-key="1.4000">Click me</button><script>typeof $(‘#foo‘).data(‘key‘);</script>
jQuery 1.8之前的版本輸出’number’，1.8版本之后輸出為’string’窘游。1.8版之前唠椭，data會(huì)把值轉(zhuǎn)換成基本類(lèi)型，其實(shí)我們這里想要的是’1.4000′并不是1.4忍饰。
data()設(shè)置值后贪嫂，attr()不能獲取設(shè)置后的值,比如：
<a href="javascript:;" id="adom" data-name="doma"></a>
<script>
var adom = $("#adom");
adom.data("name","name1");
console.log("attr:"+adom.attr("dataname"));//doma
console.log("data:"+adom.data("name"));//name1
</script>
