H 5の中のdata属性の紹介

新しいHTML 5規格では、通常の要素ラベルにdata-*のような属性を埋め込み、簡単なデータへのアクセスを実現できます.その数は制限されずjavascriptで動的に変更でき、CSSセレクタによるスタイル設定もサポートされています.これによりdataプロパティが特に柔軟になり、非常に強力になります.このような属性があれば、データのプリセットやストレージをより秩序正しく直感的に行うことができます.HTML 5 Datasetストレージの実用化と、jQueryを含む4つのアクセス方法について説明します.HTML 5 Datasetストレージの例
要素にdata属性を割り当ててデータを格納します.例えば、これはspan要素です.その内容は音楽の名前です.HTMLラベルにこの歌の詳細を直接プリセットします.HTMLソースコードには、Htmlコードと書くことができます.

  
Latch (feat. Sam Smith)  
  

このように、私たちは簡単にこの歌のためにspanラベルに直接アルバム、芸術家、流派の情報を埋め込んだ.
もう1つの例を挙げると、例えばローカライズ翻訳の埋め込み:Htmlコード

これにより、Webページの外観を変更することなく、機械翻訳を設定しながらdata-XXを検出し、より正確で正確な翻訳を人工的に提供することができます.
ここでdata-availableには値がなく、空の値を許可します.例えば、この場合、食べ物が注文できることを意味するだけなので、値は必要ありません.getAttribute、setAttributeによるdatasetへのアクセス
HTML要素のラベルとしてdatasetのアクセスもgetAttribute,setAttributeに従い,この2つの方法の互換性も最も広い.
たとえば、上記の2つの例では、Jsコードを実行できます.

//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フィールドをより容易に取得し、オブジェクトの方法でアクセスと遍歴を容易にすることができます.例えば、上記の例では、Jsコードを実行することができる

//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属性にリアルタイムで反映できます.
ハイフン"-"に関連する場合は、アルパカ化された方法でアクセスできます:Htmlコード

ここでen-usはenUs:Jsコードと書く

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

jQueryを利用するattrメソッドアクセスdataset
jQueryは優れた互換性を持っています.get、setAttribute、jQueryのようなものです.attr()メソッドは、このような場合にも用いることができ、例えば、上記の例では、Jsコードを実行することができる

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-」キーワードを書く必要もありません.例えば、上記の例では、Jsコードを実行できます.

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」:Jsコードである

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解析データセットのJSON情報
実際、jQueryはdataからjson情報を抽出してオブジェクトに変換することもできます:Htmlコード

  
Latch (feat. Sam Smith)  
  

Jsコード

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セレクタでHtmlコードに一致させることができます.

.musique[data-album='Disclosure']  
{  
color:red;  
}  

Jsコード

window.jQuery && (function($){  
$(".food").filter("[data-available]").each(function(){  
$(this).click(function(){  
alert("It's Available!");  
});  
});  
})(window.jQuery);