HTML5 自定義屬性 data-* 和 jQuery.data 詳解

新的HTML5標準容許你在普通的元素標籤裏，嵌入相似data-*的屬性，來實現一些簡單數據的存取。它的數量不受限制，而且也能由javascript動態修改，也支持CSS選擇器進行樣式設置。這使得data屬性特別靈活，也很是強大。有了這樣的屬性咱們可以更加有序直觀的進行數據預設或存儲。下面介紹HTML5 Dataset 存儲的實際應用，以及包括jQuery在內的四種存取方式。

HTML5 Dataset 存儲的例子

爲一個元素分配data屬性存儲數據，例如這是一個span元素，它的內容是一首音樂的名稱，咱們爲其HTML標籤裏直接預置這首歌的更多信息，在HTML源碼上看起來能夠這樣來寫：

<span id="music-latch" class="musique"

data-date="2013"

data-genre="Electronic"

data-album="Settle (Deluxe)"

data-artist="Disclosure"

data-composer="Howard Lawrence & Guy Lawrence">

Latch (feat. Sam Smith)

</span>

這樣，咱們就很簡單的爲這首歌在span標籤裏直接內嵌了其專輯、藝術家和流派信息。

再舉一個例子，好比說一個本地化翻譯的嵌入：

<h2 id="food-pkd" class="food"

data-en="Peking Duck"

data-available

data-ja="北京ダック"

data-fr="Canard laqué de Pékin"

data-de="Pekingente">

北京烤鴨

這樣一來，在不改變網頁外觀的狀況下，咱們能夠在設定機器翻譯的同時檢測data-XX，來人工提供更準確精準的翻譯。

其中data-available沒有值，容許空值，例如在這個狀況下，它僅表明該食物能夠訂購，因此不須要有值。

利用 getAttribute、setAttribute 存取 dataset

做爲HTML元素的標籤，dataset的存取也服從getAttribute、setAttribute，並且這兩個方法兼容性也最廣。

例如對於上面的兩個例子，咱們能夠運行：

//get

var album = document.getElementById("music-latch").getAttribute("data-album");

console.log(album);

//set

document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

這樣就能夠以一種更兼容的方式，來存取dataset數據。所作出的任何更改，都是能夠實時反映到元素data屬性上的。

可是這種方法比較低端，若是遇到多個data-*自定義字段，想要一次所有獲取全部的data屬性幷包裝成對象的話，還必須作一個循環，很麻煩。不過咱們還有Dataset API可用。

利用 dataset API 存取 dataset

經過.dataset API，咱們能夠更方便的獲取元素的全部data字段，並以對象的方式，方便存取和遍歷。例如，對於上面的例子，能夠運行:

//get

var songd = document.getElementById("music-latch").dataset;

var album = songd.album;

console.log(album);

//set

document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck";

//add

document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";

這時候咱們在訪問data時，就不須要data-.dataset.name就能夠訪問到。這比上面的方法更方便。所作出的任何更改，都是能夠實時反映到元素data屬性上的。

若是涉及到連字符-，能夠採起駝峯化的方法來存取：

<span id="en" data-en-us="Peiking Duck"></span>

其中en-us要寫成enUs：

var en = document.getElementById("en").dataset.enUs;

利用 jQuery.attr 方法存取 dataset

jQuery有着出色的兼容性。相似get、setAttribute，jQuery的.attr()方法一樣能夠用在這樣的狀況下，例如，對於上面的例子，能夠運行：

window.jQuery && (function($){

//get

var album = $("#music-latch").attr("data-album");

console.log(album);

//set

$("#food-pkd").attr("data-en","Beijing Stuffed Duck");

})(window.jQuery);

這與jQuery.attr運用在其餘屬性上時的狀況徹底同樣，而且所作出的任何更改，都是能夠實時反映到元素data屬性上的。

利用 jQuery.data 方法存取 dataset

jQuery從1.4.2版本開始支持$.data()方法來直接訪問data屬性，同時也不須要寫data-關鍵詞了，例如，對於上面的例子，能夠運行:

window.jQuery && (function($){

//get

var album = $("#music-latch").data("album");

console.log(album);

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

})(window.jQuery);

這樣的方法也能出色的存取data屬性，可是須要注意，jQuery.data對data數據作出的更改，不會反映到HTML元素data屬性上。

也就是說，jQuery如今認爲#food-pkd元素的data-en爲"Beijing Stuffed Duck"，可是在HTML元素上，其值仍是沒有改變，仍爲"Peking Duck"：

window.jQuery && (function($){

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

console.log( $("#food-pkd").data("en") );

// log: "Beijing Stuffed Duck"

})(window.jQuery);

console.log( document.getElementById("food-pkd").dataset.en );

// log: "Peking Duck"

jQuery.data 解析 Dataset 的 JSON 信息

事實上，jQuery還能夠很聰明的從data裏提取出json信息轉換爲對象：

<span id="song-jsn"

data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'>

Latch (feat. Sam Smith)

</span>
window.jQuery && (function($){

var jsn = $("#song-jsn").data("meta");

console.log( jsn.album );

// log: "Disclosure"

})(window.jQuery);

這樣，你就能夠沒必要寫一堆 data-album、data-lyrics、data-artist了，你能夠直接把全部歌曲信息所有寫到JSON裏放到一個單獨的data標籤裏！

CSS、jQuery 查找 data 屬性對應元素

若是我想要全部專輯名（data-album）爲Disclosure的歌曲名顯示爲紅色，在CSS選擇器裏，咱們能夠這樣去匹配：

.musique[data-album='Disclosure']

{

color:red;

}

這樣，上面的例子中的span文字就會顯示爲紅色。

若是我想要全部的如今可訂購的食物在點擊後彈出對話窗，在jQuery裏，也能夠經過中括號[]用如下方式去輕鬆匹配：

window.jQuery && (function($){

$(".food").filter("[data-available]").each(function(){

$(this).click(function(){

alert("It's Available!");

});

});

})(window.jQuery);

怎麼樣，是否是感受這種自由簡便的存儲方式能夠帶來很強大的效果？

HTML5 Dataset 瀏覽器支持狀況

HTML5 Data屬性的支持狀況在IE上很糟糕：

Internet Explorer: 11+
Chrome: 8+
Firefox: 6+
Opera: 11.1+
Safari: 6+
Android Browser: 4+

所以，若是要考慮兼容性，能夠考慮利用 getAttribute、setAttribute存取dataset。

文章來自：http://1ke.co/course/364