.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...