☰

jQuery Data と Attr の違いは? 質問する

tag-icon • tag-icon javascript jquery html custom-data-attribute
jQuery Data と Attr の違いは? 質問する

を使用する場合$.data、 との使用法の違いは何ですか?$.attrdata-someAttribute

私の理解では、 はDOM ではなく、 $.datajQuery の 内に格納されます。したがって、データ ストレージに を$.cache使用する場合は、 を使用する必要があります。HTML5 データ属性を追加する場合は、 を使用する必要があります。$.cache$.data$.attr("data-attribute", "myCoolValue")

ベストアンサー1

サーバーから DOM 要素にデータを渡す場合は、要素にデータを設定する必要があります。

<a id="foo" data-foo="bar" href="#">foo!</a>

その後、データには以下を使用してアクセスできます。.data()jQueryの場合:

console.log( $('#foo').data('foo') );
//outputs "bar"

ただし、jQuery で dataを使用してDOM ノードにデータを保存する場合、変数はノードオブジェクトに保存されます。これは、ノード要素に属性としてデータを保存すると文字列値のみが格納されるため、複雑なオブジェクトと参照に対応するためです。

上記の例を続けます: 
$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

また、データ属性の命名規則には、ちょっとした隠れた「落とし穴」があります。

HTML: 
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS: 
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

ハイフン付きキーも引き続き機能します:

HTML: 
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS: 
console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

ただし、 によって返されるオブジェクトには.data()ハイフンで区切られたキーが設定されません。

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

このため、JavaScript ではハイフン付きのキーを避けることをお勧めします。

HTML の場合は、ハイフン形式を使い続けます。HTML属性はASCII小文字に自動的に変換されるはずですしたがって<div data-foobar></div>、、、<DIV DATA-FOOBAR></DIV>およびは同一として扱われることになっています<dIv DaTa-FoObAr></DiV>が、互換性を最大限に高めるには小文字形式を使用することをお勧めします。

の.data()メソッドは、値が認識されたパターンと一致する場合に、いくつかの基本的な自動キャストも実行します。

HTML: 
<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>
JS: 
$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

この自動キャスト機能は、ウィジェットとプラグインをインスタンス化するのに非常に便利です。

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

元の値を文字列として取得する必要がある場合は、.attr():

HTML: 
<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>
JS: 
$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

これは不自然な例です。色の値を格納するために、私は数値の16進表記（つまり0xABC123）を使用していましたが、1.7.2 より前のバージョンの jQuery では 16 進数が正しく解析されませんでした。Numberであり、 jQuery 1.8 rc 1 以降では に解析されなくなりました。

jQuery 1.8 rc 1 では、 の自動キャストの動作が変更されました。以前は、 の有効な表現であるすべての形式Numberが にキャストされていましたNumber。現在は、数値の値は、その表現が同じままである場合にのみ自動キャストされます。これは、例で説明するのが最もわかりやすいでしょう。

HTML: 
<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>
JS: 
                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

代替の数値構文を使用して数値にアクセスする予定の場合は、Number単項演算子などを使用して、必ず値を最初にキャストしてください+。

JS（続き）： 
+$('#foo').data('hex'); // 1000

おすすめ記事