原文地址链接：http://blog.csdn.net/fly_zxy/article/details/50687691；

HTML5中的data-*属性

我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据，我们自定义的属性名字也千奇百怪，五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定，自定义的属性都已data—*开头，这样就区分开了固有属性和自定义属性。HTML代码如下：
  1. <div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value</div>
  1. $(document).ready(function(){
  2. var el = document.getElementById("testDiv");
  3. console.log(el.dataset.cname);//=>张三
  4. el.dataset.cname = "ZS";//设置值为"ZS"
  5. console.log(el.dataset.cname);//=>"ZS"
  6. console.log("jQuery data:", $("#testDiv").data("eName") );
  7. $("#testDiv").data("eName", "abcefg");
  8. console.log("jQuery data:", $("#testDiv").data("eName") );
  9. console.log("遍历testDiv上的自有属性");
  10. $.each(el.dataset, function(key, value){
  11. console.log(key+":"+value);
  12. });
  13. //遍历testDiv上的自有属性
  14. //cname:ZS
  15. //eName:zhangsan
  16. //myname:my name is zs.
  17. <span style="white-space:pre">    </span>
  18. });

在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性，用于和data-*配合使用。
通过each打印的结果，我们需要注意：

1，如果data-后面包含了“-”，例如 date-e-name，"-"会去掉，并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2，如果data-后面的单词有大写，例如 myName，将会转存成小写 myname。这里就不理解为什么会转换成小写了，JSON Object的key是区分大小写的。求高人指定？？
3，如果你想删除一个data-*属性，请使用 delete dataset.cname或者dataset.cname=null;
 
data-*属性看起来很好，但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。

jQuery中的.data()

jQuery中的.data()方法作用：在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据，在jQuery也可以通过data()来实现。data()方法有多个重载，传递一个参数是获取value值，传递两个参数是存储或覆盖已存在的值，传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value，value可以是一个对象，而不是像data-*只能存储一个字符串的value。下面给出一个综合示例：
  1. <script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. </head>
  6. <body>
  7. <div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">
  8. 测试在元素上存储一个key-value
  9. </div>
  10. </body>
  11. </html>
  1. $(function(){
  2. function printVlaue(){
  3. //通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。
  4. $("#testDiv").data("ename", "zhangsan");
  5. //修改data()通过 data-* 属性存储的值
  6. $("#testDiv").data("cname", "我是张三");
  7. console.log( "获取通过data()存储在testDiv元素上的ename值:",         $("#testDiv").data("ename") );
  8. console.log( "获取通过 data-* 存储在testDiv元素上的cname值:",   $("#testDiv").data("cname") );
  9. //$("#testDiv").jQueryremoveAttr("data-"+"abc");
  10. console.log( "获取ename值:", $("#testDiv").data("ename") );
  11. console.log( "获取cname值:", $("#testDiv").data("cname") )
  12. console.log("删除testDiv元素上 ename 和 cname 键/值对。");
  13. $("#testDiv").removeData("ename");
  14. $("#testDiv").removeData("cname");
  15. console.log("输出 eanem 和 canme 对应的值，看是否已经删除");
  16. console.log( $("#testDiv").data("ename") );
  17. console.log( $("#testDiv").data("cname") );
  18. };
  19. $("<button>获取值</button>").appendTo("body").bind("click", printVlaue);;
  20. console.log("debug use.");;
  21. });
  22. /*
  23. 获取通过data()存储在testDiv元素上的ename值: zhangsan
  24. 获取通过 data-* 存储在testDiv元素上的cname值: 我是张三
  25. 获取ename值: zhangsan
  26. 获取cname值: 我是张三
  27. 删除testDiv元素上 ename 和 cname 键/值对。
  28. 输出 eanem 和 canme 对应的值，看是否已经删除
  29. undefined
  30. 张三
  31. */

从上例中我们可以看出，.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中，我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好，大多数情况，我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性，这个属性的兼容问题，我们可以通过写jQuery插件来解决。这是我的插件代码，如下：

  1. <script id="jquery_183" type="text/javascript" class="library"
  2. src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. </head>
  7. <body>
  8. <div id="testDiv" data-cname="张三" data-e-nAme="zhangsan" data-myName="my name is zs.">
  9. 测试在元素上存储一个key-value
  10. </div>
  11. </body>
  12. </html>
  1. $(document).ready(function(){
  2. function printValue(){
  3. var $testDiv = $("#testDiv").udDataAttr();
  4. console.log("udDataAttr get()=>", $testDiv.get("cname") );
  5. $testDiv.set("cname", "set 张三");
  6. console.log("udDataAttr get()=>", $testDiv.get("cname") );
  7. console.log("打印所有已data-*开头的属性和值=>", $testDiv.dataset());
  8. console.log("udDataAttr get e-name=>", $testDiv.get("e-name") );
  9. //var el = document.getElementById("testDiv");
  10. //console.log("el.dataset.eName=>", el.dataset.eName);
  11. };
  12. $("<button>获取值</button>").appendTo("body").bind("click", printValue);
  13. console.log("debug use.");
  14. });
  15. (function($, window){
  16. //user-defined Attribute
  17. var plugName = "udDataAttr";
  18. $.fn[plugName] = function(){
  19. var $self = $(this),
  20. obj = ($self.length && $self[0].dataset) || null;
  21. return {
  22. get: function(name){
  23. return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];
  24. }
  25. ,set: function(name, value){
  26. if(obj === null){
  27. $self.attr("data-"+name, value);
  28. }else{
  29. obj[ this._format(name) ] = value;
  30. }
  31. return $self;
  32. }
  33. ,dataset: function(){
  34. var newObj = {};
  35. if(obj === null){
  36. $.each(obj, function(key, value){
  37. newObj[key] = value;
  38. });
  39. }else{
  40. newObj = $self.data(); //获取所有以data-*开头的属性
  41. }
  42. return newObj;
  43. }
  44. /*
  45. *  将name转换成dataset可识别的格式。
  46. *  例如：e-name 转换成 eName
  47. *  总感觉 _format()的实现不是最优的,求高手给出实现
  48. */
  49. ,_format: function(name){
  50. console.log("_format old name=>",name);
  51. name = name.toLowerCase();
  52. if(name.indexOf('-')>-1){
  53. var array = name.split('-');
  54. for(var i=1,len=array.length; i<len; i++){
  55. var v = array[i];
  56. array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);
  57. name=array.join("");
  58. }
  59. }
  60. console.log("_format() new name=>",name);
  61. return name;
  62. }
  63. };
  64. };
  65. }(jQuery, window));

HTML5中的data-*属性和jQuery中的.data()方法使用的更多相关文章

  1. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  2. Mybatis中实体类属性与数据库列表间映射方法介绍

               这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考.         Mybatis不像Hibernate中那么自动化,通过@Co ...

  3. HTML5 中的新属性autocomplete=&quot;off&quot;失效的解决方法（兼容firefox，IE，360）

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  4. html5的自定义data-＊属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  5. js中的原生Ajax和JQuery中的Ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...

  6. Android 中自定义控件和属性(attr.xml,declare-styleable,TypedArray)的方法和使用

    一. 在res/values 文件下定义一个attrs.xml 文件.代码如下: <?xml version="1.0" encoding="utf-8" ...

  7. 【坑】Spring中抽象父类属性注入，子类调用父类方法使用父类注入属性

    运行环境 idea 2017.1.1 spring 3.2.9.RELEASE 需求背景 需要实现一个功能,该功能有2个场景A.B,大同小异 抽象一个抽象基类Base,实现了基本相同的方法BaseMe ...

  8. body中的onload()函数和jQuery中的document.ready()有什么区别？

    1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...

  9. js中的写出想jquery中的函数一样调用

    1.IIFE: Immediately-Invoked function Expression 函数模块自调用 2.代码实现 <!DOCTYPE html> <html lang=& ...

  10. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

随机推荐

  1. 《菊与刀》--[美]鲁思&#183;本尼迪克特（Ruth Benedict）

    <菊与刀>这本书实在是好看. 下面是一些书摘: * 由在美国曾经全力以赴与之战斗的敌人中,日本人的脾气是最琢磨不透的. * “菊”本是日本皇家家微,“刀”是武家文化的象征. * 日本人的格 ...

  2. 或许你不知道：ArrayList

    ArrayList 底层以一个transient 线性数组来存储数据,它提供了无参构造方法,和有参构造方法,用户可以通过有参构造方法来初始化长度.如果不传参数,则默认调用无参构造器,数组默认长度为10 ...

  3. FZU 2213 Common Tangents 第六届福建省赛

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=2213 题目大意:两个圆,并且知道两个圆的圆心和半径,求这两个圆共同的切线有多少条,若有无数条,输出-1,其他条 ...

  4. 程序bug致损失400亿，判程序员坐牢？ 搞笑我们是认真的

    号外!号外!走过,路过,不要错过!日本 IT 业的狗血八卦继续独家放送啦!! 2015 年 9 月 3 日,随着东京最高法院驳回瑞穗证券的上诉,维持二审的原判结果,一个长达 10 年的诉讼终于画下了句 ...

  5. 2017-11-09 中文代码示例之Vuejs入门教程(一)

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...

  6. sh脚本文件的运行

    sh脚本文件的运行mac终端下运行shell脚本 1.写好自己的 脚本,比如test-bash.sh 2.打开终端 执行,方法一: 输入命令 ./test-bash.sh , 方法二:直接把 aa.s ...

  7. 关hashMap跟hashTable的区别

    1.HashMap和Hashtable都实现了Map接口 2.HashMap是非synchronized,而Hashtable是synchronized 3.HashTable使用Enumeratio ...

  8. 了解dto概念,什么是DTO

    了解dto概念   此博文收集整理了一些主流的文章对于DTO模式的解读,他们大体相似而又各有所不同.对于设计模式的解读也是一个仁者见仁智者见智的事情,不过设计模式往往都是前辈们在遇到一类特定的问题下而 ...

  9. BugPhobia贡献篇章：团队贡献分值与转会确定

    0x01 :无言 0x02 :团队贡献分说明 (1202)冯志睿 54 (1156)李入云 43 (1188)李云涛 56 (1184)马腾跃 26 (1197)钱林琛 60 (1100)王鹿鸣 63 ...

  10. 003_Mac挂载NTFS移动硬盘读取VMware虚拟机文件

    一.Mac 挂载NTFS移动硬盘进行读写操作 (Read-only file system) 注意如下图所示先卸载,然后按照下图的命令进行挂载.然后cd /opt/003_vm/   &&am ...