data-* と js の間の相互作用

今回は data-* と js のやりとりについてお届けします。 data-* と js のやりとりにおける 注意事項 について、実際のケースを見てみましょう。

HTML5新しい属性data-*

記述例

<p data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options=&#39;{"name":"John"}&#39;>
</p>

1. 定義:

属性は、ページまたはアプリケーションのプライベートカスタムデータを保存するために使用されます。

data-* 属性を使用すると、すべての HTML 要素にカスタム データ属性を埋め込むことができます。

2. 注:

data-* 属性には 2 つの部分が含まれます:

• 属性名には大文字を含めることはできません。プレフィックス「data-」の後に少なくとも 1 文字が必要です

• 属性 値は任意の

  string

data-* 属性と jQueryInteraction

jQuery の .data() 関数を使用して data-* 属性値を取得します

console.log($("p").data('lastValue'));  //输出的值为:43
console.log($("p").data('role'));  //输出的值为:page

注意事項

data-**属性名形式のキャメルケース命名書き換え

data-attribute は、この data 属性を最初に使用した後はアクセスまたは変更されなくなります (すべてのデータ値は jQuery に内部的に保存されます) )

デモ:

 console.log($("p").data('lastValue'));  //输出的值为:43
    $('p').data('lastValue',44);  //设置data-last-value=44
    $('p')[2]  //假设这是文档中的第3个p,我们输出这个dom
    //输出:<p data-role="page" data-last-value="43" data-hidden="true" data-options=&#39;{"name":"John"}&#39;>

心配しないでください、出力した値

 console.log($("p").data('lastValue'));  //输出的值为:44

は jQuery 内に保存されるだけです

jQuery の .attr() 関数を使用して data-* 属性値を取得します

console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43

Useデータを設定するための jQuery の .attr() 関数 -*属性値

$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象

注: ダッシュはキャメルケースの名前付けに変換する必要があります

この記事のケースを読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

H5 のサーバー プッシュ イベントの詳細な説明

HTML5 ジャイロスコープに基づいて移動アニメーション効果を実現する

H5 キャンバスで Snake ミニ ゲームを実装する

以上がdata-* と js の間の相互作用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。