认识jQuery的两个API：attr和data

http://www.html-js.com/article/1747

从语义上看，这两个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’)都能得到期望的返回值。

<div class="box" id="jquery-api-attr" name="chen" AGE="31" isStd="false"></div>$('#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是对象，我们最终会获得什么呢？看下面几个例子。

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-*的属性。

在JavaScript里，data()修改数据可以这样：data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。还有一种方式，如下

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

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

$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进行转换。看下面几个例子。

<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>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对象，然后修改这个对象的属性值。

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。另外一种方式与此等价：

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

小结

如果是为了存储和传递页面元素相关的数据，data()比attr()是更好的选择。了解data()的工作方式，才能正确使用这个API。 PS：经过一些实践，发现data()的陷阱真不少。标题改成“认识jQuery API：data的陷阱”似乎更为合适，而attr()就单纯很多。