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