535

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

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

4

3 に答える 3

768

サーバーから 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

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

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 では、自動キャストの動作が変更されました。以前は、 a の有効な表現であった形式はすべて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
于 2011-08-31T19:36:01.040 に答える
119

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

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

$.fn.data途方もなく目立たない場所に情報を保存します。data_userこれは、ローカルで定義された関数 Data のインスタンスである、呼び出されたクローズド オーバー ローカル変数にあります。この変数は、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()他の場所からアクセスできない
  • 検査時に要素に公開されていない
  • オブジェクトにすることができます
于 2015-04-27T23:02:32.240 に答える