jQueryデータvs Attr？

間の用法の違いは何である$.dataと$.attr使用してdata-someAttribute？

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

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

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

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

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

ただし、データを使用してjQueryの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

また、データ属性の命名規則には、少し隠れた「問題」があります。

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

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

ハイフン付きのキーは引き続き機能します。

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

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()メソッドは、値が認識されたパターンに一致する場合、基本的な自動キャストも実行します。

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

$('#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()。

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

$('#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）を使用していましたが、16進数が1.7.2より前のjQueryバージョンで誤って解析さNumberれ、jQuery 1.8 rc 1 以降では解析されなくなったことは注目に値します。}

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

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

                              // 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単項演算+子などを使用して、値を最初にキャストしてください。

+$('#foo').data('hex'); // 1000

2つの主な違いは、保存場所とアクセス方法です。

$.fn.attr 情報を要素に直接格納します。属性は検査時に公開され、要素のネイティブAPIからも利用できます。

$.fn.data途方もなく曖昧な場所に情報を保存します。これはdata_user、ローカルで定義された関数Dataのインスタンスであると呼ばれる閉じたローカル変数にあります。この変数には、jQueryの外部から直接アクセスできません。

データセット attr()

• からアクセス可能 $(element).attr('data-name')
• からアクセスできelement.getAttribute('data-name')、
• 値がand およびand data-nameからもアクセス可能な形式である場合$(element).data(name)element.dataset['name']element.dataset.name
• 検査時に要素に表示されます
• オブジェクトにすることはできません

データセット .data()

• アクセスのみから.data(name)
• .attr()他の場所やどこからもアクセスできない
• 検査時に要素に公に見えない
• オブジェクトにすることができます

data-*属性を使用して、カスタムデータを埋め込むことができます。data-*属性には、私たちのすべてのHTML要素に埋め込み、カスタムデータ属性の機能を提供します。

jQuery .data()メソッドを使用すると、循環参照から、したがってメモリリークから安全に、あらゆるタイプのデータをDOM要素に取得/設定できます。

.attr()一致するセットの最初の要素のみのjQuery メソッドget / set属性値。

例：

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");