jQuery.data()和HTML5之data-属性

点击打开链接

用js添加data属性的方法

$.data($('#widget_pro')[0], 'product',
{"a": "test"}); -----没有引号

$('#widget_pro').data('product', {"product_id": 123}); 没有引号

$('#test').attr('data-product', '{"mm": "test"}') 有引号

1、jQuery之data()方法

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

1.1、使用js原生对象

$.data(js对象,key,value);//增加data

$.removeData(js对象,key);//移除data

$.hasData(js对象,key);//判断data

1.2、使用jQuery对象

jQuery对象.data(key,value);//增加data

jQuery对象.removeData(key);//移除data

示例：

$input=$('#input');//jQuery对象

_input=$input[0];//javascript对象

$input.data('key','value');//用jQuery对象写入

$.data(_input,'key2','value2');//用javascript对象写入

$input.data('key');//用jQuery对象读取

$.data(_input,'key2');//用javascript对象读取

$input.removeData('key');//用jQuery对象移除

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

2、HTML5之data属性

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

例如：

<div id="novel" data-novelist='{"firstname": "Jose", "lastname": "Saramago"}'>Blindness</div>

<div id="poem" data-poet="Edna St. Vincent Millay">Sonnet 18</div>

<div id="story" data-story-writer="Raymond Carver">A Small, Good Thing</div>

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

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

$('#novel').attr('data-novelist');//读

//输出字符串:{"firstname": "Jose", "lastname": "Saramago"}

$('#novel').attr('data-novelist','another value');//写

$('#poem').attr('data-poet');

//输出字符串:Edna St. Vincent Millay

$('#poem').attr('data-poet','another value');

$('#story').attr('data-story-writer');

//输出字符串:Raymond Carver

$('#story').attr('data-story-writer','another value');

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

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

$('#novel').data('novelist');//读

//输出对象:{"firstname": "Jose", "lastname": "Saramago"}

$('#novel').data('novelist').firstname;

//输出对象值:Jose

$('#novel').data('novelist','another value');//写

$('#poem').data('poet');

//输出字符串:Edna St. Vincent Millay

$('#poem').data('poet','another value');

$('#story').data('story-writer');

//输出字符串:Raymond Carver

$('#story').data('story-writer','another value');

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

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

$.data($('#novel')[0],'novelist');

//返回=undefined

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

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

$('#novel').data('novelist');

//返回对象

$.data($('#novel')[0],'novelist');

//返回对象

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

2.4、removeAttr()移除

$('#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.

【完】

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

原文：jQuery.data()和HTML5之data-属性http://www.learningjquery.com/2011/09/using-jquerys-data-apis