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