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()；