html5 のカスタム data-* 属性と jquery の data() メソッドの使用_html5 チュートリアル スキル

データを保存および操作するために、ユーザーは常に HTML タグにカスタム属性を追加することを好みます。ただし、これを行う場合の問題は、将来他のスクリプトがカスタム属性をリセットするかどうかがわからないことです。また、これを行うと、HTML 構文も Html 仕様に準拠しなくなります。他の副作用として。そのため、カスタム データ属性が HTML5 仕様に追加され、それを使用して多くの便利なことができるようになりました。

HTML5の詳細な仕様は読んでいただくとして、このカスタムデータ属性の使い方は非常に簡単で、HTMLタグに「data-」で始まる任意の属性を追加することができます。は表示されませんが、ページのレイアウトやスタイルには影響しませんが、読み取りと書き込みは可能です。

次のコード スニペットは有効な HTML5 マークアップです:

コードをコピーします

コードは次のとおりです

data-myid="3e4ae6c4e">いくつかの素晴らしいデータ

しかし、どうやってそれを読むには このデータを取得するにはどうすればよいですか?もちろん、ページ要素を反復処理して必要なプロパティを読み取ることもできますが、jQuery にはこれらのプロパティを操作するための組み込みメソッドがすでに組み込まれています。これらの「data-*」プロパティにアクセスするには、jQuery の .data() メソッドを使用します。メソッドの 1 つは .data(obj) です。このメソッドは、対応するデータ属性を返すことができます。

たとえば、次の書き込みメソッドを使用して data-myid 属性値を読み取ることができます:

コードをコピー

コードは次のとおりです:

var myid= jQuery("#awesome").data('myid');
console.log(myid); 🎜>
たとえば、次の HTML を記述する場合、「data-*」属性で json 構文を使用することもできます:

コードをコピー コードは次のとおりです。

json のキー値を介して、このデータに直接アクセスできます:

コードをコピーコードは次のとおりです:

var gameStatus= jQuery("#awesome-json").data('awesome') .game;

console.log (gameStatus);


.data(key,value) メソッドを使用して、「data-*」属性に値を直接割り当てることもできます。注意する必要がある重要な点は、これらの「data-*」属性は、その属性が含まれる要素に関連付けられている必要があり、何かを保存するためのストレージ ツールとして使用しないことです。

翻訳者の補足: "data-*" は HTML5 にのみ現れる属性ですが、jquery はユニバーサルなので、HTML5 以外のページやブラウザでも .data(obj) メソッドを使用して操作できます。 「データ-*」データ。