jQuery data vs attr: Comprender las diferencias

en jQuery, tanto $ .data como $ .Attr se usan para manipular atributos en los elementos DOM. Sin embargo, tienen propósitos distintos y difieren en su uso y comportamiento.

cuando usar $ .data

$. Los datos se usan principalmente para almacenar datos asociados con un elemento DOM dentro del caché interno de JQuery ($.. Cache). Estos datos no se almacenan como atributos HTML en el elemento en sí. Por lo tanto, si necesita almacenar datos persistentemente para fines de unión de datos o secuencias de comandos personalizados, $ .Data es la opción preferida.

Ejemplo:

$('#foo').data('myData', 'someValue');
// Gets the stored data
$('#foo').data('myData'); // outputs "someValue"

cuando usar $ .attr

$. attr, por otro lado, establece o recupera principalmente html5 data-attributes. Estos atributos de datos se almacenan como atributos en el elemento DOM y están destinados a proporcionar metadatos o contenido adicionales.

Ejemplo:

$('#foo').attr('data-attribute'); // outputs "myCoolValue"
$('#foo').attr('data-attribute', 'newValue'); // Sets the data-attribute to "newValue"

consideraciones adicionales

• El almacenamiento de datos con $ .data admite objetos complejos, mientras que los datos de datos HTML solo pueden contener las cadenas de datos. convertir "verdadero" a un booleano.
• $. ATTR conserva el tipo de datos original al recuperar datos.
• para evitar confusiones, se recomienda usar sintax de camelcase al acceder a los datos almacenados con $ .data.
• también puede usar $ .removeattr para eliminar los datos que no tienen los datos de eliminación de datos, que no tienen un equivalente, que no tiene un equivalente, que no tiene un equivalente, que no tiene un equivalente, no tiene un tipo de califo directo, que no tiene un equivalente, no tiene un tipo de califo. $ .data.