HTML5 data-* 自定义属性及其注意点

在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-*”中名子可以用驼峰命名。