.data() .attr() .prop()方法區別

property、attribute區別

簡單總結下；

• property是指DOM對象中默認的基本屬性，它們會在初始化的時候在DOM對象上建立，好比id；標籤自定義的屬性不會出如今property中。
• attribute是HTML標籤上的特性，是指標籤訂義的屬性，包括自定義的屬性（data-*）；它的值只可以是字符串；

.attr()

• 本質調用的是getAttribute和setAttribute方法，操做DOM對象上的attributes
• 對傳入的attrName大小寫不敏感，attr(‘name’)和attr(‘NAME’)返回值是同樣的。
• 若是傳入的值是null、undefined，會調用toString，那麼返回的是"null"、"undefined"。若是value是一個對象，返回值是"[object, object]";

var $e = $('#a');
a.attr('attr1', {name: 'name1'});
a.attr('attr1'); // "[object object]"

.prop()

• 本質是直接對DOM對象上的property進行操做
• 不能操做自定義屬性(data-*)
• 性能上 .prop()>.data()>.attr()，不一樣版本的.data()和.attr()的性能關係有差別，不過.prop()老是最優的

.data()

• 本質實際上是將一個 「cache」 附加到了對象上，並使用了一個特殊的屬性名稱。
• 第一次調用data()時會把HTML裏靜態綁定的數據（data-*），複製到jQuery.cache變量裏
• data()的值修改並不會影響到DOM元素上data-*屬性的改變，data()的
• 經過data()來獲取數據時，key必須全小寫，好比綁定data-AGE=」23」，只能經過data(‘age’)而不是data(‘AGE’)。另外注意data-last-value=」100」，只能經過data(‘lastValue’)或者data(‘last-value’)。

參考地址：
https://www.cnblogs.com/elcar...
https://blog.csdn.net/zhangxi...
https://www.cnblogs.com/yaome...
https://segmentfault.com/a/11...