jQuery Daten vs-Attr?

Wenn Sie die übergabe von Daten an ein DOM-element vom server ist, müssen Sie die Daten auf dem element:

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

Anschließend können die Daten zugegriffen werden .Daten() in jQuery:

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

Allerdings, wenn Sie speichern Daten auf einem DOM-Knoten in jQuery mit Daten, die Variablen gespeichert werden auf dem Knoten Objekt. Dies ist ein entgegenkommen für komplexe Objekte und Referenzen, wie die Speicherung der Daten auf den Knoten element als ein Attribut wird nur Platz für string-Werte.

_{- in meinem Beispiel von oben:}

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

Auch die Namenskonvention für data-Attribute hat ein bisschen versteckt "gotcha":

_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

Der Bindestrich-Taste wird immer noch funktionieren:

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

Jedoch das Objekt zurückgegeben .data() wird nicht der Bindestrich-Taste Satz:

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

Es ist aus diesem Grund schlage ich vor, die Vermeidung der Bindestrich-Taste, in javascript.

Für HTML, halten mit der Bindestrich-form. HTML-Attribute werden sollen, um ASCII-automatisch kleingeschrieben werden, so <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>, und <dIv DaTa-FoObAr></DiV> sind soll werden als identisch behandelt, aber für die beste Kompatibilität unteren Fall bilden sollten bevorzugt werden.

Den .Daten() Methode auch führen Sie einige grundlegende auto-casting, wenn der Wert entspricht einem erkennbaren Muster:

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

Diese auto-casting-Fähigkeit ist sehr praktisch für die Instanziierung von widgets & plugins:

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

Wenn Sie absolut müssen den ursprünglichen Wert als string, dann müssen Sie mit .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

_{Das war ein erfundenes Beispiel. Für die Speicherung der Farbwerte, die ich verwendet, um mit den numerischen hex-notation (d.h. 0xABC123), aber es ist erwähnenswert, dass hex war falsch analysiert, die in jQuery-Version 1.7.2, und nicht mehr geparst, in eine Number wie jQuery 1.8 rc 1.}

jQuery 1.8 rc 1 geändert, das Verhalten von auto-casting. Vor, ein format, das war eine gültige Darstellung eines Number würde umgewandelt werden Number. Nun, Werte numerisch sind nur auto-cast, wenn Ihre Darstellung bleibt die gleiche. Dies ist am besten mit einem Beispiel.

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

Wenn Sie planen, auf die Verwendung von alternativen numerisch Syntax Zugriff auf numerische Werte, sicher sein, zu werfen, die Wert auf eine Number ersten, wie mit einem einfachen + Betreiber.

_{JS (Forts.):}

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

InformationsquelleAutor zzzzBov

Können Sie data-* Attribut einbetten von benutzerdefinierten Daten. Die data-* Attribute gibt uns die Möglichkeit zum einbetten von benutzerdefinierten Daten-Attribute, die auf alle HTML-Elemente.

jQuery .data() - Methode können Sie die get/set-Daten von jeder Art, um DOM-Elemente in einer Weise, die sicher ist, von Zirkelbezügen und daher von memory leaks.

jQuery .attr() Methode get/set Attribut-Wert nur für das erste element in dem aufeinander abgestimmten Satz.

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

InformationsquelleAutor Yogendra Chauhan