在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. Gradle 引入本地定制 jar 包

    第 1 步:创建文件夹,拷贝 jar 包 在自己的 Gradle 项目里建立一个名为 “libs” (这个名字可以自己定义,不一定非要叫这个名字)的文件夹,把自己本地的 jar 包拷贝到这个文件夹中. ...

  2. 深浅copy 和 集合

    1 对于赋值运算,就是共同指向一个内存地址.将一个值赋予一个变量,那么它的内存地址同时也赋予了他,如果值是不可变类型,改变值,就会产生一个新值和新内存地址,如果值是可变类型那么内存地址不会变. s1 ...

  3. Luogu P1608 路径统计 最短路计数

    颓了...重边导致我乖乖用邻接矩阵.... 好吧就是个最短路计数....如果更新时d[v]==d[u]+w[i],就可以接起来,把两个加在一起.. 如果d[v]>d[u]+w[i],那么c[v] ...

  4. CF D. Fair（思维+DFS)

    http://codeforces.com/contest/987/problem/D 题目大概: 给出一个n个城镇m条边的图,给出每个城镇拥有的特产(可能多个城镇有相同特产).有k种不同特产. 要求 ...

  5. PV并发UV

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'返回结果:SYN_RECV 2 (SYN连接请求收到2个 等待确 ...

  6. php5 编译安装

    #!/bin/bash######################################## File Name: php.sh# Version: V1.0# Author: sun yu ...

  7. Linux网络编程基础

    1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...

  8. eclipse中找不到base64包的解决方法

    eclipse中找不到base64包的解决方法 2017年08月26日 11:05:26 yzp_leo 阅读数:634 标签: javaeclipsebase64更多 个人分类: 日记   ecli ...

  9. U盘中病毒了

    往U盘里拷东西的时候突然发现一个后缀名为exe图标却是文件夹的图标的文件.大概二三百K 按类型排序之后发现好几个这样的文件,大小都是一模一样的,名字分别跟我U盘里原先的文件夹对应,原本的文件夹都被设置 ...

  10. 笔记_简明Python教程_Byte_of_Python

    1. 局部变量.全局变量 局部变量: x = 50 def func(x): x = 2 print('Change local x to',x) func(x) print('x is still' ...