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

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对象
  3. $input.data(‘key’,’value’);//用jQuery对象写入
  4. $.data(_input,’key2′,’value2′);//用javascript对象写入
  5. $input.data(‘key’);//用jQuery对象读取
  6. $.data(_input,’key2′);//用javascript对象读取
  7. $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’);//写
  4. $(‘#poem’).attr(‘data-poet’);
  5. //输出字符串:Edna St. Vincent Millay
  6. $(‘#poem’).attr(‘data-poet’,’another value’);
  7. $(‘#story’).attr(‘data-story-writer’);
  8. //输出字符串:Raymond Carver
  9. $(‘#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’);//写
  6. $(‘#poem’).data(‘poet’);
  7. //输出字符串:Edna St. Vincent Millay
  8. $(‘#poem’).data(‘poet’,’another value’);
  9. $(‘#story’).data(‘story-writer’);
  10. //输出字符串:Raymond Carver
  11. $(‘#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

jQuery.data()和HTML5之data-属性
标签:     

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*