jQuery的data()函式操作html5的自定義data-*屬性

在實際應用中可能會給html標籤新增一些自定義的和屬性，在html5之前，這是有風險的，因為這會導致違反html標準，可能會導致各種各樣的問題。html5中提供了一個全新的自定義data屬性，關於此屬性的具體用法可以自行查詢相關文章，總之它可以允許使用者新增任意以"data-"開頭的屬性，此自定義屬性不會顯示在頁面上，也不會對頁面佈局有任何不利的影響。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<div id="antzone" data-done="螞蟻部落">分享互助</div>

上面程式碼就是一個簡單的自定義屬性的演示。如果要讀取上面的自定義屬性值，可以使用jquery的data()函式來實現，程式碼如下:

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

上面的程式碼中，可以獲取自定義屬性的值，需要特別注意的是屬性的名稱是"-"後面的部分。

自定義屬性的值可以是json字串，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<div id="antzone" data-done='{webName:螞蟻部落,target:分享互助}'>分享互助</div>

那麼使用jquery獲取這個屬性值之後，可以使用鍵值對的方式訪問json字串中的資料，程式碼如下:

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