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

おそらく、jquery mobile を使用するときに、データ ロール、データ テーマなどの使用をよく目にします。たとえば、ヘッダー効果は次のコードによって実現できます:

コードをコピーします

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

i タイトルです

携帯電話で閲覧すると、次のような効果が得られます:

data-role="header" を記述すると、テキストの下部が黒く中央揃えになる効果が得られるのはなぜですか?

この記事では、誰もがこれらの使用法を直感的に理解できるように、最も簡単な実装方法を説明します。

HTML ページを作成し、data-chb="header" 属性をカスタマイズします。この属性を持つ div 領域の背景色は黒、テキストは白、テキストは で表示されることを望みます。中央; data-chb カスタム属性がない場合 div はデフォルトで表示され、HTML コードは次のとおりです:

コードをコピーします。

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

div

> ;

に data-chb カスタム属性を使用しました data-chb は使用しませんでした

「背景色は黒」の表示効果を実現するには、テキストは白で、テキストは中央揃えです」という場合は、次の CSS を定義します:

コードをコピー

コードは次のとおりです。次のように:

次に、以下のjsを渡します。方法は、動的にCSS定義を追加し、divの表示スタイルを変更することです。ページがロードされるときの data-chb 属性:

コードをコピー

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

最終ページの表示効果は以下の通りです:

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

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

コードをコピー

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

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

このデータの読み方 Woolen布？もちろん、ページ要素を反復処理して必要なプロパティを読み取ることもできますが、jQuery にはこれらのプロパティを操作するための組み込みメソッドがすでに組み込まれています。これらの「data-*」プロパティにアクセスするには、jQuery の .data() メソッドを使用します。メソッドの 1 つは .data(obj) です。このメソッドは、対応するデータ属性を返すことができます。
たとえば、次の書き込みメソッドを使用して data-myid 属性値を読み取ることができます:

コードをコピー

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

var myid= jQuery("#awesome").data('myid');

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

コードをコピー

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

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

コードをコピーします

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

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

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

翻訳者の補足: 「data-*」は HTML5 でのみ使用される属性ですが、jquery は汎用であるため、HTML5 以外のページやブラウザー (obj) メソッドでも .data を使用できます。 「data-*」データを操作します。