参考文档：https://segmentfault.com/a/1190000000626031
从语义上看，这两个API之间毫不相干，作用也是各有不同。单纯方法名称看，attr()用来修改和增加DOM元素的属性，以及获得属性值。data()用来将数据绑定在DOM元素上。在实际项目中我发现，这两个API都被用来将存储服务器端数据和传递到JavaScript，可以说是JavaScript使用服务器段数据的一个桥梁。如果不考虑attr()修改DOM元素属性可能引起UI变化这一方面，只考虑其作为传递数据的桥梁，那么attr()和data()有什么共同点和差异？如果用其中任何一个都能达到目的，是不是其中一个更为适合？
attr()的用法
attr()获得属性值
通过attr()获得属性时，可以这样$(selector).attr(attrName)。注意，其返回值始终是string型！看下面的例子。通过attr()得到的属性age的值是"31"，属性isstd的值是"false"。另外需要注意的是，attr()对传入的attrName大小写不敏感，就是说attr('name')和attr('NAME')都能得到期望的返回值。
[html] view
plain copy
- <div class="box" id="jquery-api-attr" name="chen" AGE="31" isStd="false"></div>
[javascript] view
plain copy
- $('#jquery-api-attr').attr('age'); // "31"
- $('#jquery-api-attr').attr('isstd'); // "false"
attr()添加和修改属性
attr修改属性支持三种方式，即可以向API传递三种形参：attr(attrName, value)，attr(attrName, function)，attr(obj)。如果第二个参数是function，那么该function会被执行，并将执行结果作为attr()的返回值。attr(obj)等同于多次调用attr(attrName, value)，比如attr({attr1: value1, attr2: value2})等同于attr(attr1, value1).attr(attr1, value2);
在JavaScript代码，可以通过attr()动态修改属性值和添加新属性，如果传入value是对象，我们最终会获得什么呢？看下面几个例子。
[javascript] view
plain copy
- var $el = $('#jquery-api-attr');
- $el.attr('newAttr1', {name: 'chen'});
- $el.attr('newAttr1'); // "[object Object]"
- $el.attr('newAttr2', [1, 2, 3]);
- $el.attr('newAttr2'); // "1, 2, 3"
- $el.attr('newAttr3', null);
- $el.attr('newAttr3'); // "undefined"
- $el.attr('newAttr4', undefined);
- $el.attr('newAttr4'); // "undefined"
可以看出，如果value是基本数据类型的一种，那么直接返回相应的字符串，但是null value返回的是“undefined"并非"null"。如果value是一个对象，那么对象的toString()会被调用，执行结果即attr()的返回值。
data()的用法
data()修改数据和绑定新数据
和attr()类似，可以在页面生成时绑定数据，实际上是给元素添加名称为data-*的属性。
[html] view
plain copy
- <div class="box" id="jquery-api-attr" data-name="chen" data-AGE="31" isStd="false"></div>
在JavaScript里，data()修改数据可以这样：data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。还有一种方式，如下
[javascript] view
plain copy
- var data = $el.data();
- data.newAttr = 10;
在使用data()修改数据时，如果value是undefined类型，那么数据不会保存或更新。
[javascript] view
plain copy
- $el.data('school', undefined);
- $el.data().hasOwnProperty('school'); // false
- $el.data('newAttr ', undefined);
- $el.data('newAttr '); // 10
data()获取数据
往data()传入一个string称之为key的参数即data(key)，或者data()[key]来获得与key对应的value。但是注意一点，data()可能会返回undefined如果没有任何数据绑定，所以data(key)的方式更为安全。和attr()值返回string类型的值不一样，data()会对静态绑定的数字、布尔、对象、数组和null进行转换。看下面几个例子。
[html] view
plain copy
- <div class="box" id="jquery-api-data" data-name="chen" data-AGE="31" data-isStd="false" data-func="function(){}" data-list='{"listname":"eric chen"}' data-undefinedkey="undefined" data-nullkey="null" data-last-value="43"></div>
[javascript] view
plain copy
- var $el = $('#jquery-api-data');
- $el.data('age'); // 31
- $el.data('AGE'); // undefined
- $el.data('isstd'); // false
- $el.data('func'); // "function() {}"
- $el.data('list'); // obj {"listname": "eric chen"}
- $el.data('undefinedkey'); // "undefined"
- $el.data('nullkey'); // null
- $el.data('lastValue'); // 43
- $el.data('lastvalue'); // undefined
如果在HTML里静态绑定了数据，通过data()来获取数据时，key必须全小写，比如绑定data-AGE="31"，只能通过data('age')而不是data('AGE')。另外注意data-last-value="43"，只能通过data('lastValue')或者data('last-value')。
在JavaScript里通过data()修改数据，再获取值时，须严格按照指定的key。比如data('AGE', 20)，这时data('age')是31，data('AGE')返回20。这时因为，在JS里第一调用data()时，会将HTML里静态绑定的数据，复制到jQuery.cache变量里，复制时key中的字符都转换为对应的小写字母。再次使用data()修改数据或添加新数据时，对key不会转换为小写字母，也不会对存入的数据做类型转换！
通常，data('lastValue', value)和data('last-value', value)修改的是同一数据。但是如果是这样子呢？不给data()传入任何参数来获得绑定在$el上的所有数据即一个JSON对象，然后修改这个对象的属性值。
[javascript] view
plain copy
- var dt= $el.data();
- dt['last-value'] = 12;
- dt.lastValue = 13;
- $el.data('last-value'); // ?
- $el.data('lastValue'); // ?
你会发现$el.data('last-value')返回12，而$el.data('lastValue')返回13。另外一种方式与此等价：
[javascript] view
plain copy
- $el.data({'last-value': 12, 'lastValue': 13});
小结
如果是为了存储和传递页面元素相关的数据，data()比attr()是更好的选择。了解data()的工作方式，才能正确使用这个API。
[javascript] view
plain copy
- <pre code_snippet_id="155762" snippet_file_name="blog_20140114_8_4085715"></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>