html data-属性jquery,HTML5中的data-*属性和jQuery中的.data()方法使用

测试在元素上存储一个key-value

js代码

$(document).ready(function(){

var el = document.getElementById("testDiv");

console.log(el.dataset.cname);//=>张三

el.dataset.cname = "ZS";//设置值为"ZS"

console.log(el.dataset.cname);//=>"ZS"

console.log("遍历testDiv上的自有属性");

$.each(el.dataset, function(key, value){

console.log(key+":"+value);

});

//遍历testDiv上的自有属性

//cname:ZS

//eName:zhangsan

//myname:my name is zs.

});

在获取自定义属性的值时，使用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()。