认识jQuery的两个API：attr和data

参考文档：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

 

1. <div class="box" id="jquery-api-attr" name="chen" AGE="31" isStd="false"></div>  

[javascript]  view plain  copy

 

1. $('#jquery-api-attr').attr('age'); // "31"  
2. $('#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

 

1. var $el = $('#jquery-api-attr');  
2. $el.attr('newAttr1', {name: 'chen'});  
3. $el.attr('newAttr1'); // "[object Object]"  
4.   
5. $el.attr('newAttr2', [1, 2, 3]);  
6. $el.attr('newAttr2'); // "1, 2, 3"  
7.   
8. $el.attr('newAttr3', null);  
9. $el.attr('newAttr3'); // "undefined"  
10.   
11. $el.attr('newAttr4', undefined);  
12. $el.attr('newAttr4'); // "undefined"  

data()的用法

data()修改数据和绑定新数据

和attr()类似，可以在页面生成时绑定数据，实际上是给元素添加名称为data-*的属性。

[html]  view plain  copy

 

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

 

1. var data = $el.data();  
2. data.newAttr = 10;  

在使用data()修改数据时，如果value是undefined类型，那么数据不会保存或更新。

[javascript]  view plain  copy

 

1. $el.data('school', undefined);  
2. $el.data().hasOwnProperty('school'); // false  
3. $el.data('newAttr ', undefined);  
4. $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

 

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

 

1. var $el = $('#jquery-api-data');  
2. $el.data('age'); // 31  
3. $el.data('AGE'); // undefined  
4. $el.data('isstd'); // false  
5. $el.data('func'); // "function() {}"  
6. $el.data('list'); // obj {"listname": "eric chen"}  
7. $el.data('undefinedkey'); // "undefined"  
8. $el.data('nullkey'); // null  
9. $el.data('lastValue'); // 43  
10. $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

 

1. var dt= $el.data();  
2. dt['last-value'] = 12;  
3. dt.lastValue = 13;  
4.   
5. $el.data('last-value'); // ?  
6. $el.data('lastValue'); // ?  

你会发现$el.data('last-value')返回12，而$el.data('lastValue')返回13。另外一种方式与此等价：

[javascript]  view plain  copy

 

1. $el.data({'last-value': 12, 'lastValue': 13});  

如果是为了存储和传递页面元素相关的数据，data()比attr()是更好的选择。了解data()的工作方式，才能正确使用这个API。

[javascript]  view plain  copy

 

1. <pre code_snippet_id="155762" snippet_file_name="blog_20140114_8_4085715"></pre>  
2. <pre></pre>  
3. <pre></pre>  
4. <pre></pre>  
5. <pre></pre>  
6.