jQuery Data vs Attr?

Jaka jest różnica w użytkowaniu pomiędzy $.datai $.attrpodczas korzystania data-someAttribute?

Rozumiem, że $.datasą przechowywane w jQuery $.cache, a nie w DOM. Dlatego jeśli chcę używać $.cachedo przechowywania danych, powinienem użyć $.data. Jeśli chcę dodać atrybuty danych HTML5, powinienem użyć $.attr("data-attribute", "myCoolValue").

Jeśli przekazujesz dane do elementu DOM z serwera, powinieneś ustawić dane na elemencie:

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

Dostęp do danych można następnie uzyskać .data()w jQuery:

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

Jednak podczas przechowywania danych w węźle DOM w jQuery przy użyciu danych zmienne są przechowywane w obiekcie węzła . Ma to na celu uwzględnienie złożonych obiektów i odniesień, ponieważ przechowywanie danych w elemencie węzła jako atrybutu uwzględni tylko wartości ciągu.

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

Ponadto konwencja nazewnictwa atrybutów danych zawiera trochę ukrytego „gotcha”:

<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

Dzielony klucz będzie nadal działał:

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

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

Jednak obiekt zwracany przez .data()nie będzie miał ustawionego klucza dzielonego:

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

Z tego powodu sugeruję unikanie klucza dzielonego w javascript.

W przypadku HTML używaj dzielonego formularza. Atrybuty HTML mają dostać ASCII małe litery automatycznie , tak <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>i <dIv DaTa-FoObAr></DiV>są niby być traktowane jako identyczne, ale dla najlepszej zgodności powinny być preferowane dolna forma przypadek.

The .data()Metoda będzie również wykonać kilka podstawowych funkcji automatycznego odlewania jeżeli wartość odpowiada uznanym wzór:

<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']}`

Ta funkcja automatycznego rzutowania jest bardzo wygodna w przypadku tworzenia widgetów i wtyczek:

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

Jeśli absolutnie musisz mieć oryginalną wartość jako ciąg, musisz użyć .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

_{To był wymyślony przykład. Do przechowywania wartości kolorów używałem numerycznej notacji szesnastkowej (tj. 0xABC123), ale warto zauważyć, że szesnastka została niepoprawnie przeanalizowana w wersjach jQuery przed 1.7.2 i nie jest już przetwarzana na NumberjQuery 1.8 rc 1.}

jQuery 1.8 rc 1 zmieniło zachowanie automatycznego rzucania . Wcześniej każdy format, który był prawidłową reprezentacją pliku, Numberbyłby rzutowany na Number. Teraz wartości liczbowe są rzutowane automatycznie tylko wtedy, gdy ich reprezentacja pozostaje taka sama. Najlepiej ilustruje to przykład.

<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"

Jeśli planujesz używać alternatywnych składni numerycznych w celu uzyskania dostępu do wartości liczbowych, pamiętaj, aby rzucić wartość na Numberpierwszą, na przykład za pomocą jednoargumentowego +operatora.

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

Główna różnica między nimi polega na tym, gdzie jest przechowywany i jak jest dostępny.

$.fn.attr przechowuje informacje bezpośrednio na elemencie w atrybutach, które są publicznie widoczne podczas kontroli, a także które są dostępne z natywnego API elementu.

$.fn.dataprzechowuje informacje w absurdalnie niejasnym miejscu. Znajduje się w zamkniętej zmiennej lokalnej o nazwiedata_user która jest instancją lokalnie zdefiniowanej funkcji Data. Ta zmienna nie jest dostępna bezpośrednio z jQuery.

Zestaw danych z attr()

• dostępny z $(element).attr('data-name')
• dostępny z element.getAttribute('data-name'),
• jeżeli wartość była w formie data-namerównież dostępne z $(element).data(name)i element.dataset['name']aelement.dataset.name
• widoczne na elemencie podczas kontroli
• nie mogą być przedmiotami

Zestaw danych z .data()

• dostępne tylko z.data(name)
• niedostępne z .attr()jakiegokolwiek innego miejsca
• niewidoczne publicznie na elemencie podczas inspekcji
• mogą być przedmiotami

Możesz użyć data-*atrybutu, aby osadzić dane niestandardowe. Te data-*atrybuty daje nam możliwość osadzić danych niestandardowych atrybutów wszystkich elementów HTML.

.data()Metoda jQuery pozwala uzyskać / ustawić dane dowolnego typu do elementów DOM w sposób bezpieczny przed cyklicznymi odniesieniami, a tym samym przed wyciekiem pamięci.

.attr()Metoda jQuery pobiera / ustawia wartość atrybutu tylko dla pierwszego elementu w dopasowanym zestawie.

Przykład:

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

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