web-dev-qa-db-ja.com

jQueryのデータ対Attr？

$.dataを使用するときの$.attrとdata-someAttributeの使用法の違いは何ですか？

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

javascriptjqueryhtml5custom-data-attribute
489
John B

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

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

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

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

ただし、データをjQueryusingのDOMノードに保存すると、変数はノードobjectに保存されます。これは、ノードelementにデータを格納するときに、属性が文字列値のみに対応するため、複雑なオブジェクトと参照に対応するためです。

上から私の例を続けます：
$('#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
739
zzzzBov

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

$.fn.attr は、検査時に一般に表示され、要素のネイティブAPIからも利用可能な属性に、要素に関する情報を直接格納します。

$.fn.data は ばかばかしい 場所に情報を格納します。これは、ローカルに定義された関数Dataのインスタンスであるdata_userという名前の閉じたローカル変数にあります。この変数はjQueryの外部から直接アクセスすることはできません。

attr()でデータセット

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

.data()でデータセット

  • アクセス可能な のみ .data(name)から
  • .attr()や他の場所からはアクセスできない
  • 検査時に要素上に公に表示されない
  • オブジェクトになることができます
94
Travis J

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

jQueryの.data()メソッドを使用すると、循環参照から、つまりメモリリークから安全な方法で、任意の型のデータをDOM要素に取得/設定できます。

jQueryの.attr()メソッドはマッチしたセットの最初の要素だけの属性値を取得/設定します。

例： 

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

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