HTMLデータ-*パラメータを保存し、jsで取得するための属性

HTML 5では、 data- *などのタグ属性が導入されました。
おそらく別のプロジェクトでそれらについて聞いたり見たりしました。
たとえば、Twitter BootstrapやjQuery Mobileなどのファッショナブルな仲間によって使用されています。

HTMLで情報を保存するため、その後jsで使用するために以前に使用されたクラス。

たとえば、一意のブロック番号を保存するために、多くの場合、次のように書きます。

<div class="items">   <div class="item1">...</div>   <div class="item3">...</div>   <div class="item6">...</div>   <div class="item1">...</div>   ... </div> 


そして、各要素に別のクラスを追加する必要がある場合はどうなりますか? または個々の修飾子ですか? はい、もちろん、あなたはあなたの好みに合わせて定期的なまたは他の松葉杖でトリミングすることができます。

ここではidを使用できるように見えるかもしれませんが、同じ番号のブロックを持つことができます。

時々それらは属性 'rel'を使用しますが、リンクにのみ使用できますが、他の要素も見ています。 繰り返しますが、欠点は、1つの値しか書き込むことができないことです。

そして、ここでChip and Dale data- *属性は私たちの助けに駆けつけています。

パン


任意のタグに添付することができ、古いブラウザは何も言いません。
タイトルにフレーズを書くことができます:data-email-id =” 190”。
値には任意の文字列を使用できます。
1つのタグにこのようなパラメーターをいくつでも使用できます。

HTMLは次のようになります。

 <div class="items">  <div class="item" data-item="1">...</div>  <div class="item" data-item="3">...</div>  <div class="item" data-item="6">...</div>  <div class="item" data-item="1">...</div>  ... </div> 


ここで最も興味深い部分、つまりjQueryでの作業です。

見つける: $('[data-email-id]')または$('[data-action=close]')または$('[data-date^=2010]')
値をvar email = $(selector).attr('data-email-id')ます: var email = $(selector).attr('data-email-id')

最も興味深いのは、.data()関数の使用です。
バージョン1.4.3では、 data()は、data- *属性を次のように取得する方法を学習しました

var action = $(selector).data('action'); // close

ハイフンを介してフレーズを使用した場合、camelCaseで取得できます。

   <div id="superid" data-foo-bar="123"></div> 

    $('#superid').data('fooBar'); //  123 


1つのマイナス(またはマイナスではない)は、初期値のみがデータ()(キャッシュ)に格納され、属性値を変更すると(たとえば、.attr( 'data-foo-bar'、456)を介して) 、次に.data( 'fooBar')を取得すると、古い値が表示されます。
しかし、私たちが望むなら、誰も2つの場所で値を更新することを止めていません:

    var baz = 150;   $(selector).data('fooBar', baz).attr('data-foo-bar', baz); 


ただし、firebugなどでコードを追跡する必要がない場合は、「視覚」表示にのみ影響するため、.attr()も更新できません。

一般に、追加のパラメーターをタグに保存することを決めたらすぐに、データ属性を使用します。

PS:


誰かがjson属性に保存しようとしたのだろうか? :)
これはおそらく異常なプログラミングにありますが。

PSY:


多くの人がjQuery.data関数(elem、key、[value])について話します
誰も知らない、この関数は$(セレクター).data(key、[value])とは異なる
jQueryオブジェクトではなく、オブジェクトのDOM要素にデータをバインドできます。 はい、60%速く動作しますが、data- *属性を受け取りません。

ZYYY:


trijin :$(selector).data()が要素のすべてのdata- *プロパティを持つオブジェクトを返すことは言及されていません。

Source: https://habr.com/ru/post/J139210/


All Articles