jQuery Data vs Attr?

Was ist der Unterschied in der Verwendung zwischen $.dataund $.attrbei der Verwendung data-someAttribute?

Meines Wissens nach wird das $.datain jQuery's gespeichert $.cache, nicht im DOM. Daher sollte ich verwenden, wenn ich $.cachefür die Datenspeicherung verwenden möchte $.data. Wenn ich HTML5-Datenattribute hinzufügen möchte, sollte ich verwenden $.attr("data-attribute", "myCoolValue").

Wenn Sie Daten vom Server an ein DOM-Element übergeben, sollten Sie die Daten für das Element festlegen:

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

Auf die Daten kann dann .data()in jQuery zugegriffen werden :

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

Allerdings , wenn Sie Daten auf einem DOM - Knoten in jQuery speichern unter Verwendung von Daten, werden die Variablen auf dem Knoten gespeichert Objekt . Dies ist komplexe Objekte und Referenzen , wie die Speicherung der Daten auf dem Knoten aufzunehmen Element als Attribut wird nur Stringwerte aufzunehmen.

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

Außerdem hat die Namenskonvention für Datenattribute ein verstecktes "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

Der mit Bindestrich versehene Schlüssel funktioniert weiterhin:

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

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

Für das von zurückgegebene Objekt ist .data()jedoch kein getrennter Schlüssel festgelegt:

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

Aus diesem Grund empfehle ich, den mit Bindestrich versehenen Schlüssel in Javascript zu vermeiden.

Verwenden Sie für HTML weiterhin das mit Bindestrich versehene Formular. HTML - Attribute sollen erhalten ASCII-Kleinbuchstaben automatisch , so <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>und <dIv DaTa-FoObAr></DiV>sind angeblich als identisch behandelt werden, aber für die beste Kompatibilität der unteren Gehäuseform bevorzugt werden sollte.

Die .data()Methode führt auch ein grundlegendes Auto-Casting durch, wenn der Wert mit einem erkannten Muster übereinstimmt:

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

Diese Auto-Casting-Funktion ist sehr praktisch, um Widgets und Plugins zu instanziieren:

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

Wenn Sie unbedingt den ursprünglichen Wert als Zeichenfolge haben müssen, müssen Sie Folgendes verwenden .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

_{Dies war ein erfundenes Beispiel. Zum Speichern von Farbwerten habe ich die numerische Hex-Notation (dh 0xABC123) verwendet, aber es ist erwähnenswert, dass Hex in jQuery-Versionen vor 1.7.2 falsch analysiert wurde und ab NumberjQuery 1.8 rc 1 nicht mehr in a analysiert wird .}

jQuery 1.8 rc 1 hat das Verhalten des automatischen Castings geändert . Zuvor wurde jedes Format, das eine gültige Darstellung von a war Number, umgewandelt Number. Jetzt werden numerische Werte nur dann automatisch umgewandelt, wenn ihre Darstellung gleich bleibt. Dies lässt sich am besten anhand eines Beispiels veranschaulichen.

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

Wenn Sie alternative numerische Syntaxen für den Zugriff auf numerische Werte verwenden möchten, müssen Sie den Wert in einen Numberersten Wert umwandeln, z. B. mit einem unären +Operator.

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

Der Hauptunterschied zwischen den beiden besteht darin, wo es gespeichert ist und wie darauf zugegriffen wird.

$.fn.attr speichert die Informationen direkt auf dem Element in Attributen, die bei der Überprüfung öffentlich sichtbar sind und auch über die native API des Elements verfügbar sind.

$.fn.dataspeichert die Informationen an einem lächerlich dunklen Ort. Es befindet sich in einer geschlossenen lokalen Variablen, data_userdie als Instanz einer lokal definierten Funktion Data bezeichnet wird. Auf diese Variable kann von außerhalb von jQuery nicht direkt zugegriffen werden.

Datensatz mit attr()

• zugänglich von $(element).attr('data-name')
• zugänglich von element.getAttribute('data-name'),
• wenn der Wert in Form von data-nameauch zugänglich von $(element).data(name)und element.dataset['name']und warelement.dataset.name
• bei der Inspektion auf dem Element sichtbar
• kann kein Objekt sein

Datensatz mit .data()

• nur zugänglich von.data(name)
• nicht zugänglich von .attr()oder irgendwo anders
• bei Inspektion auf dem Element nicht öffentlich sichtbar
• können Objekte sein

Sie können data-*Attribute verwenden, um benutzerdefinierte Daten einzubetten. Die data-*Attribute geben uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.

Mit der jQuery- .data()Methode können Sie Daten eines beliebigen Typs für DOM-Elemente auf eine Weise abrufen / festlegen, die vor Zirkelverweisen und damit vor Speicherlecks geschützt ist.

jQuery- .attr()Methode Attributwert abrufen / festlegen nur für das erste Element in der übereinstimmenden Gruppe.

Beispiel:

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

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