jQuery Data vs Attr?

¿Cuál es la diferencia en el uso entre $.datay $.attrcuando se usa data-someAttribute?

Tengo entendido que $.datase almacena dentro de jQuery $.cache, no en el DOM. Por lo tanto, si quiero usar $.cachepara el almacenamiento de datos, debería usarlo $.data. Si quiero agregar atributos de datos HTML5, debería usar $.attr("data-attribute", "myCoolValue").

Si está pasando datos a un elemento DOM desde el servidor, debe establecer los datos en el elemento:

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

Se puede acceder a los datos utilizando .data()jQuery:

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

Sin embargo, cuando almacena datos en un nodo DOM en jQuery utilizando datos, las variables se almacenan en el objeto del nodo . Esto es para acomodar objetos complejos y referencias, ya que almacenar los datos en el elemento del nodo como un atributo solo acomodará valores de cadena.

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

Además, la convención de nomenclatura para los atributos de datos tiene una especie de "problema" oculto:

<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

La clave con guiones seguirá funcionando:

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

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

Sin embargo, el objeto devuelto por .data()no tendrá la clave con guiones establecida:

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

Por esta razón, sugiero evitar la clave con guiones en JavaScript.

Para HTML, siga usando el formulario con guiones. Atributos HTML se supone que para obtener automáticamente en minúsculas ASCII , por lo que <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>y <dIv DaTa-FoObAr></DiV>se supone que debe ser tratada como idénticos, pero para la mejor compatibilidad se debe preferir la forma en minúsculas.

El .data()método también realizará una transmisión automática básica si el valor coincide con un patrón reconocido:

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

Esta capacidad de transmisión automática es muy conveniente para instanciar widgets y complementos:

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

Si absolutamente debe tener el valor original como una cadena, deberá usar .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

_{Este fue un ejemplo artificial. Para almacenar valores de color, solía usar la notación hexadecimal numérica (es decir, 0xABC123), pero vale la pena señalar que el hexadecimal se analizó incorrectamente en las versiones jQuery anteriores a 1.7.2 , y ya no se analiza en NumberjQuery 1.8 rc 1.}

jQuery 1.8 rc 1 cambió el comportamiento de la transmisión automática . Antes, cualquier formato que fuera una representación válida de a Numbersería enviado a Number. Ahora, los valores numéricos solo se convierten automáticamente si su representación permanece igual. Esto se ilustra mejor con un ejemplo.

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

Si planea usar sintaxis numéricas alternativas para acceder a los valores numéricos, asegúrese de convertir el valor a un Numberprimero, como con un +operador unario .

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

La principal diferencia entre los dos es dónde se almacena y cómo se accede.

$.fn.attr almacena la información directamente en el elemento en atributos que son visibles públicamente después de la inspección, y que también están disponibles en la API nativa del elemento.

$.fn.dataalmacena la información en un lugar ridículamente oscuro . Se encuentra en una variable local cerrada sobre llamada data_userque es una instancia de una función definida localmente Datos. Esta variable no es accesible desde fuera de jQuery directamente.

Conjunto de datos con attr()

• accesible desde $(element).attr('data-name')
• accesible desde element.getAttribute('data-name'),
• si el valor estaba en forma de data-nametambién accesible desde $(element).data(name)y element.dataset['name']yelement.dataset.name
• visible en el elemento tras la inspección
• no pueden ser objetos

Conjunto de datos con .data()

• accesible solo desde.data(name)
• no accesible desde .attr()o desde cualquier otro lugar
• no visible públicamente en el elemento tras la inspección
• pueden ser objetos

Puede usar el data-*atributo para incrustar datos personalizados. Los data-*atributos nos permiten incorporar atributos de datos personalizados en todos los elementos HTML.

El .data()método jQuery le permite obtener / establecer datos de cualquier tipo en elementos DOM de una manera segura de referencias circulares y, por lo tanto, de pérdidas de memoria.

El .attr()método jQuery obtiene / establece el valor del atributo solo para el primer elemento del conjunto coincidente.

Ejemplo:

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

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