在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. import与from...import...的区别

    from ... import ... 的用法和直接import的区别: 1.直接使用import时,如果需要使用到导入模块内的属性和方法,必须使用模块名.属性和模块名.方法的方式进行调用 2.使用f ...

  2. 华东交通大学2015年ACM“双基”程序设计竞赛1001

    Problem A Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  3. 5月 28日css前端知识

    a:link {color : #FF0000}    #未访问连接时设置颜色 a:visited {color:  #FF0000}   #访问过得连接设置颜色 a:hover {color: #F ...

  4. MetricStatTimer

    package org.apache.storm.metric.internal; import java.util.Timer; /** * Just holds a singleton metri ...

  5. （转）如何使用caffe的MATLAB接口

    编译MatCaffe 转自: http://blog.csdn.net/ws_20100/article/details/50525879 使用如下命令编译MatCaffe make all matc ...

  6. 信息领域热词分析系统--python切词

    利用python将标题切割成词语 import jieba #读取文件 f=open(r"F:\大数据\大作业\爬取到的数据\data1_xinxi.txt",'r') s=f.r ...

  7. tomcat异常[1]--java.lang.ClassNotFoundException: XXXX.EncodingFilter

    EncodingFilter类在java项目中,确实存在,但是启动项目时,总是说找不到这个类. 后来想了一下,项目运行取的应该是项目WEB-INF/classes下面已经编译为.class文件的类文件 ...

  8. SQLiteOpenHelper 升级onUpgrade 的调用问题

    onUpgrade 的调用次数问题 比如说现在数据库版本是1,然后此时我修改代码定数据库版本为5. 那么系统在调用onUpgrade的时候是只调用一次(oldVersion == 1, newVers ...

  9. jndi理解

    java中很多这些接口规范,jndi就是其中一个,而下面那些包就是jndi接口的提供商程序实现包,他们都是遵循jndi规范的. 主要接口功能是:添加命名与对象的映射到jndi树中,客户能快速查找并使用 ...

  10. Unity 物体旋转会发生变形

    当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.