1、jQuery之data()方法

描述：data() 方法向被选元素附加数据，或者从被选元素获取数据。

1.1、使用js原生对象

1. $.data(js对象,key,value);//增加data
2. $.removeData(js对象,key);//移除data
3. $.hasData(js对象,key);//判断data

1.2、使用jQuery对象

1. jQuery对象.data(key,value);//增加data
2. jQuery对象.removeData(key);//移除data

示例：

1. $input=$('#input');//jQuery对象
2. _input=$input[0];//javascript对象
4. $input.data('key','value');//用jQuery对象写入
5. $.data(_input,'key2','value2');//用javascript对象写入
7. $input.data('key');//用jQuery对象读取
8. $.data(_input,'key2');//用javascript对象读取
10. $input.removeData('key');//用jQuery对象移除

注意：如果发生内存泄露或者DOM被移除，则data将会消失。

2、HTML5之data属性

描述：HTML5给每个元素都添加了data-*属性，这是一个私有的数据存储区域，用户无法看到开发者定义的属性，它不会改变DOM结构、样式以及行为。

例如：

1. <div id="novel" data-novelist='{"firstname": "Jose", "lastname": "Saramago"}'>Blindness</div>
2. <div id="poem" data-poet="Edna St. Vincent Millay">Sonnet 18</div>
3. <div id="story" data-story-writer="Raymond Carver">A Small, Good Thing</div>

2.1、attr()方法读取/写入

这些data属性可以用jQuery.attr()来读取和修改（属性名必须完整）。

1. $('#novel').attr('data-novelist');//读
2. //输出字符串:{"firstname": "Jose", "lastname": "Saramago"}
3. $('#novel').attr('data-novelist','another value');//写
5. $('#poem').attr('data-poet');
6. //输出字符串:Edna St. Vincent Millay
7. $('#poem').attr('data-poet','another value');
9. $('#story').attr('data-story-writer');
10. //输出字符串:Raymond Carver
11. $('#story').attr('data-story-writer','another value');

2.2、jQuery对象.data()方法读取/写入

同样，这些data属性也可以用jQuery的data()方法读取和写入（属性名省略data-）。

1. $('#novel').data('novelist');//读
2. //输出对象:{"firstname": "Jose", "lastname": "Saramago"}
3. $('#novel').data('novelist').firstname;
4. //输出对象值:Jose
5. $('#novel').data('novelist','another value');//写
7. $('#poem').data('poet');
8. //输出字符串:Edna St. Vincent Millay
9. $('#poem').data('poet','another value');
11. $('#story').data('story-writer');
12. //输出字符串:Raymond Carver
13. $('#story').data('story-writer','another value');

2.3、jQuery.data()读取/写入

如果直接使用javascript原生对象来读取的话：

1. $.data($('#novel')[0],'novelist');
2. //返回=undefined

对了，它返回的结果是undefined而不是一个对象。

如果这样，它就能读取正确了。

1. $('#novel').data('novelist');
2. //返回对象
3. $.data($('#novel')[0],'novelist');
4. //返回对象

为了防止混淆，不要把HTML5的data-属性和jQuery的data()方法同时使用在同一个元素上。

2.4、removeAttr()移除

1. $('#novel').removeAttr('data-novelist');//移除

removeData()无法移除。

Over time, jQuery's .data() API has taken on more responsibilities than it originally had when it was just a way to associate in-memory data with DOM elements and prevent IE leakage. If you need only a simple way to read HTML5 data-* attributes as strings, then the .attr() method may be the best choice, even though the siren-song-name .data() may be telling you otherwise. Whether you use .attr() or .data(), they work consistently across browsers all the way back to IE6 — even if the browser doesn't support HTML5 — so just choose the API with the feature set that works best for your needs.

【完】

注：文中可能有错误之处，欢迎指正。

---

原文：http://www.learningjquery.com/2011/09/using-jquerys-data-apis