html5のカスタムdata-*属性とjqueryのdata()method_jqueryの使用例

データを保存および操作するために、ユーザーは常に 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); 🎜>you たとえば、次の HTML を記述する場合、「data-*」属性で json 構文を使用することもできます:

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

js を通じてこのデータに直接アクセスでき、json のキー値を通じて、対応する値を取得できます:

コードをコピー コードは次のとおりです: var gameStatus= jQuery("#awesome-json").data('awesome').game; log(gameStatus);

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

補足:
「data-*」は HTML5 でのみ出現する属性ですが、jquery は汎用なので、HTML5 以外のページやブラウザーでも使用できます。 ) 「data-*」データを操作するメソッド