新的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">
北京烤鴨
</h2>
這樣一來,在不改變網頁外觀的情況下,我們可以在設定機器翻譯的同時檢測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://blog.csdn.net/azare/article/details/44220941
轉載于:https://www.cnblogs.com/hihtml5/p/6197752.html