data和attr的用法与区别

attr()的用法

attr()获得属性值

通过attr()获得属性时，可以这样$(selector).attr(attrName)。注意，其返回值始终是string型！
eg : 通过attr()得到的属性age的值是”23”，属性iswork的值是”true”。
另外需要注意的是，attr()对传入的attrName大小写不敏感，就是说attr(‘name’)和attr(‘NAME’)都能得到期望的返回值。

<div class="card" id="jq-attr" name="zx" AGE="23" isWork="true"></div>$('#jq-attr').attr('age'); // "23"$('#jq-attr').attr('iswork'); // "true"

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 = $('#jq-attr');$el.attr('attr1', {name: 'chen'});$el.attr('attr1'); // "[object Object]"$el.attr('attr2', [1, 2, 3]);$el.attr('attr2'); // "1, 2, 3"$el.attr('attr3', null);$el.attr('attr3'); // "undefined"$el.attr('attr4', undefined);$el.attr('attr4'); // "undefined"

可以看出，如果value是基本数据类型的一种，那么直接返回相应的字符串，但是null value返回的是“undefined”并非”null”。如果value是一个对象，那么对象的toString()会被调用，执行结果即attr()的返回值。

data()的用法

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

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

<div class="card" id="jq-attr" data-name="chen" data-AGE="23" isWork="true"></div>

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

var data = $el.data();data.attr = 10;在使用data()修改数据时，如果value是undefined类型，那么数据不会保存或更新。$el.data('school', undefined);$el.data().hasOwnProperty('school'); // true$el.data('attr ', undefined);$el.data('attr '); // 10

data()获取数据

往data()传入一个string称之为key的参数即data(key)，或者data()[key]来获得与key对应的value。但是注意一点，data()可能会返回undefined如果没有任何数据绑定，所以data(key)的方式更为安全。和attr()值返回string类型的值不一样，data()会对静态绑定的数字、布尔、对象、数组和null进行转换。看下面几个例子。

<div class="box" id="jq-data" data-name="zx" data-AGE="23" data-isWork="true" data-func="function(){}" data-list='{"listname":"eric chen"}' data-undefinedkey="undefined" data-nullkey="null" data-last-value="100"></div>var $el = $('#jq-data');$el.data('age'); // 23$el.data('AGE'); // undefined$el.data('isWork'); // true$el.data('func'); // "function() {}"$el.data('list'); // obj {"listname": "eric chen"}$el.data('undefinedkey'); // "undefined"$el.data('nullkey'); // null$el.data('lastValue'); // 100$el.data('lastvalue'); // undefined

如果在HTML里静态绑定了数据，通过data()来获取数据时，key必须全小写，比如绑定data-AGE=”23”，只能通过data(‘age’)而不是data(‘AGE’)。另外注意data-last-value=”100”，只能通过data(‘lastValue’)或者data(‘last-value’)。
在JavaScript里通过data()修改数据，再获取值时，须严格按照指定的key。比如data(‘AGE’, 22)，这时data(‘age’)是23，data(‘AGE’)返回22。这时因为，在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'] = 99;dt.lastValue = 100;$el.data('last-value'); // ?$el.data('lastValue'); // ?

你会发现el.data(′last−value′)返回99，而el.data(‘lastValue’)返回100。另外一种方式与此等价：
$el.data({‘last-value’: 99, ‘lastValue’: 100});

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