4.6 HTML5 data 屬性的操控

關於 data-* 屬性

特性：

1. 讓開發人員可以在標籤上自訂屬性，例：data-title、data-name 等。* 號是任意字元，儘量是一般小寫英文字母都可。

2. 可以當做資料儲存的地方。

使用 .attr() 取值及設定值

html：

<p data-counter="1" id="p1">這是段落<p>

可以透過以下 jQuery 取得：

$("#p1").attr("data-counter"); // 1

也可以透過以下方式重新設定其值：

$("#p1").attr("data-counter", 2); // 設定 2

範例：

參考：使用 .data() 取值及設定值

html：

<p data-counter="1" id="p1">這是段落<p>

可以透過以下 jQuery 取得：

$("#p1").data("counter"); // 1

也可以透過以下方式重新設定其值：

$("#p1").data("counter", 2); // 設定 2

範例：

.data() 設定的值並不會真的改到元素上的 data-* 屬性，而是 jQeury 會自己另外記錄下來，好處是有隱蔽性，但不易觀察。

避免 .attr() 和 .data() 混用來操控 data-*，以免混亂。