attr(),prop(),data()三者之間的差別

1.attr()，prop()會直接操作dom節點的屬性，通過審查元素可以直觀的看到，data()則將屬性保存在內存中，審查元素不能看到。

2.參數的書寫格式。attr(),prop()需要寫完整的屬性名，不能修改；data()必須是屬性名去掉data再以駝峯方式命名。

3.返回值。

     attr(),返回String，prop()返回jQuery；

     data(),不傳參數，會返回一個對象，這個對象包含了元素本身的屬性以及data()操作過的屬性，通過attr(),prop()操作的屬性應爲規範問題可能不會返回。

舉個栗子：

html：

<div id="bar" data-aa-bb="'cc" ee-ff="gg" data-test="test">test</div>

jq：

$('#bar').attr('data-test','0');
$('#bar').attr('ee-ff','b');

console.log($('#bar').data());

此時可以通過審查元素看到當前的元素狀態爲

<div id="bar" data-aa-bb="'cc" ee-ff="b" data-test="0">test</div>

返回值爲：

1. {test: 0, aaBb: "'cc"}
   1. aaBb: "'cc"
   2. test: 0

細心的你會發現，ee-ff不會被data()篩選出來,但是在dom元素上該屬性已經被重新賦值，這就是書寫規範的問題，所以特別注意不要3種方式同時使用，特別容易產生混淆。

4.若要檢索和更改DOM屬性,比如元素的checked, selected, 或 disabled狀態，請使用.prop()方法(就是當你發現attr()修改無效的時候，可以嘗試prop()....)

如果設置的屬性值比較複雜，尤其是包含引號雙引號的數據，不建議使用attr(),prop(),應爲它容易破壞dom元素的結構，使代碼不能正常解析，另外性能方面個人覺得data()的性能會好一點。所以推薦大家使用data()；