在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式，但取值是必需全部使用小写（后面会说），使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

1.   Html绑定数据写法

1.1简单单词：

<div id="testDiv" data-cd="24">

    Click Here

</div>

1.2  使用驼峰命名（需要特定注意的地方）：

<div id="testDiv" data-cartCd="24">

    Click Here

</div>

2. 取绑定的值方法

原生的js取法：

var testDiv = document.getElementById('testDiv');

简单的单词：console.log(testDiv.dataset.cd);

复杂的驼峰命名单词：console.log(testDiv.dataset.cartcd);//注意是“cartcd”,不管

//是不是驼峰命名，一切都是小些。

使用Jquery方法：

console.log($(“#testDiv”).data(“cd”));

console.log($(“testDiv”).data(“cartcd”));//同上面一样，注意是“cartcd”,不管

//是不是驼峰命名，一切都是小些。

和html5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。

3.  修改绑定数据

原生js方式:

testDiv.dataset.cartcd= “新值”

Jquery方式：

$(“testDiv”).data(“cartcd”,”新值”)

其实这个属性是html5新加的特性，为了绑定数据，我们可以将一些参数绑定到dom标签上，而不用将数据填 到input标签上然后隐藏该标签。最需要注意的一点的取值时必需全部使用小写的名字，”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-* 自定义属性操作及其注意点的更多相关文章

  1. HTML5中自定义属性（data-*）

    在HTML元素上直接添加以‘data-’开头的属性,例如 <div data-mydata='this is my data'></div> 操作它的方式有classList ...

  2. HTML5 本地文件操作之FileSystemAPI整理（一）

    一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...

  3. HTML5——Data Url生成

    HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. HTML5 本地文件操作之FileSystemAPI实例（四）

    目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...

  5. HTML5 本地文件操作之FileSystemAPI实例（三）

    文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...

  6. HTML5 本地文件操作之FileSystemAPI实例（二）

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  7. HTML5 本地文件操作之FileSystemAPI实例（一）

    文件操作实例整理一 1.请求系统配额类型 console.info(window.TEMPORARY); //0 临时 console.info(window.PERSISTENT); //1 持久 ...

  8. HTML5 本地文件操作之FileSystemAPI整理（二）

    一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...

  9. HTML5 本地文件操作之FileSystemAPI简介

    一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...

  10. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

随机推荐

  1. 21. sessionStorage和localStorage的使用

    sessionStorage和localStorage的使用   前言 这是学习笔记,把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904. ...

  2. for循环删除list中多个元素出现的误区

    错误的做法是: for(int i= 0;i<list.size();i++) 因为在你删除元素的同时list.size()也在变小,这样就会照成越界. 正确做法:因为要删除list里面的多个的 ...

  3. Mybatis学习笔记(三) —— DAO开发方法

    一.SqlSession的使用范围 SqlSession中封装了对数据库的操作,如:查询.插入.更新.删除等. SqlSession通过SqlSessionFactory创建. SqlSessionF ...

  4. [CF1051F]The Shortest Statement （LCA+最短路）（给定一张n个点m条有权边的无向联通图，q次询问两点间的最短路）

    题目:给定一张n个点m条有权边的无向联通图,q次询问两点间的最短路 n≤100000,m≤100000,m-n≤20. 首先看到m-n≤20这条限制,我们可以想到是围绕这个20来做这道题. 即如果我们 ...

  5. Photoshop入门教程（四）：混合模式

    学习心得:混合模式在Photoshop常容易被忽视,最大原因就是它所处的位置比较隐蔽,在图层面板左上部的角落里.使用混合模式,决定图像中上图层像素如何与图像中的下层像素进行混合,使图层的叠加更加炫酷. ...

  6. 02Data

    1.数据从何而来 2.数据对象和属性类型 数据集合的类型 结构数据的重要特征 数据对象 属性 属性类型 数据属性的类型 离散 vs.连续属性 3.数据的(基本)统计描述 分布度量 代数度量 整体度量 ...

  7. windows服务开启（收藏url）

    windows服务开启(收藏url) http://blog.csdn.net/wanda39kela/article/details/46310093

  8. 读书笔记 - 《毛X东传》

    这个书名重复太多,这本的作者是迪克威尔逊.这本书很有意思,可以看出是一个局外人根据残缺不全的资料所写的出来的,而且是结合心理分析的手法主要描述政治历程.总体来说作为传记不够全面,但对于一个中国人来说可 ...

  9. 【ACM】会场安排问题

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...

  10. OCR 维护 crsd.log

    ###########sample 1 OCR corruption messages are reported in crsd.log, automatic OCR backup is failin ...