jquery data()函式和html5 data屬性

在html5中新增了一個自定義data屬性，利用這個屬性，可以新增任意的以"data-"開頭的屬性，這些屬性不會再頁面上顯示，也不會影響任何原有的佈局效果，並且此自定義屬性是可讀寫的，例如:

[HTML] 純文字檢視 複製程式碼
<div id="thediv" data-webname="螞蟻部落">螞蟻部落歡迎您</div>

以上程式碼就是使用自定義data屬性的一個簡單例子。

可以使用jquery的data()函式來讀取這些屬性，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var webname= jQuery("#thediv").data('webname'); 
console.log(webname);

以上程式碼可以輸出自定義屬性值:"螞蟻部落"。

可以在自定義屬性中使用json格式資料，例如:

[HTML] 純文字檢視 複製程式碼
<div id="thediv" data-webaddress='{"address":"市南區"}'>螞蟻部落歡迎您</div>

同樣可以使用jquery的data()函式並利用json資料的key獲得相應的值，例如:

[JavaScript] 純文字檢視 複製程式碼
var address= $("#thediv").data('webname').address; 
console.log(address);

更多的操作這裡就不多介紹了，具體可以參閱jQuery data()一章節。

特別說明:

在非HTML5的頁面或瀏覽器裡，仍然可以使用.data(obj)方法來操作"data-*" 資料。