在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. POJ1054 The Troublesome Frog

    题目来源:http://poj.org/problem?id=1054 题目大意: 有一种青蛙在晚上经过一片稻田,在庄稼上跳跃,会把庄稼压弯.这让农民很苦恼.我们希望通过分析青蛙跳跃的路径,找出对稻田 ...

  2. Codeforces Round #532 (Div. 2)- A（思维）

    This morning, Roman woke up and opened the browser with nn opened tabs numbered from 11 to nn. There ...

  3. MATLAB教程

    基本操作:https://www.w3cschool.cn/matlab/ MATLAB2018a下载安装教程http://www.zhanshaoyi.com/6938.html

  4. java中double的四舍五入 BigDecimal

    转载:https://blog.csdn.net/xiaobing_122613/article/details/71077225 1. 功能 将程序中的double值精确到小数点后两位.可以四舍五入 ...

  5. java拦截器的使用

    转载: https://www.cnblogs.com/liangblog/p/7234757.html https://blog.csdn.net/reggergdsg/article/detail ...

  6. 并行执行hive脚本

    ### 模板脚本存放路径(无需修改) cd /tmp/fix_data/tmp_wjj_20180322_01 ### 脚本名称 script=tmp_wjj_20180322_01 ### 开始日期 ...

  7. java thread start到run：C++源码分析

    转:https://hunterzhao.io/post/2018/06/11/hotspot-explore-inside-java-thread-run/ 整体流程 java new Thread ...

  8. Autel MaxiSys Pro Description

    Autel MaxiSys pro MS908P is an evolutionary smart solution for specialized automotive diagnosis and ...

  9. docker 部署公司阿里云服务器 （一）

    持续更新... 背景环境: 阿里云ecs服务器 centos7.4          公网地址:xx.xx.xx.xx      内网地址:172.16.77.4 阿里云RDS 阿里云 Redis 第 ...

  10. C# Linq 查询数据库(DataSet)生成 Tree

    效果图如下 cs代码 using System; using System.Collections.Generic; using System.ComponentModel; using System ...