El método .data()nos permite leer datos previamente asociados a elementos del DOM. Podemos recuperar varios valores distintos para un mismo elemento de uno en uno, o como un conjunto:
|
1
2
3
4
5
6
7
|
|
Llamar a .data()sin parámetros devuelve un objeto JavaScript que contiene cada valor almacenado como una propiedad. El objeto puede utilizarse directamente para obtener los valores de los datos (pero tenga en cuenta que los nombres de las propiedades que originalmente contenían guiones habrán sido modificados como se describe a continuación).
Desde jQuery 3, cada secuencia de dos caracteres «-» (U+002D) seguida de una letra ASCII en minúscula en una clave se sustituye por la versión en mayúscula de la letra, en consonancia con la API de conjuntos de datos HTML. Una declaración como $( "body" ).data( { "my-name": "aValue" } ).data(); devolverá { myName: "aValue" }.
Atributos data-* de HTML5
Desde jQuery 1.4.3, los atributos data-* se utilizan para inicializar los datos de jQuery. Los atributos data-* de un elemento se recuperan la primera vez que se invoca el método data() sobre él, y luego ya no se accede ni se muta (todos los valores son almacenados internamente por jQuery).
Se hace todo lo posible para convertir el valor de la cadena del atributo en un valor de JavaScript (esto incluye booleanos, números, objetos, matrices y nulos). Una cadena sólo se convierte en un número si al hacerlo no cambia su representación (por ejemplo, la cadena «100» se convierte en el número 100, pero «1E02» y «100.000» se dejan como cadenas porque su valor numérico de 100 se serializa en «100»). Cuando una cadena comienza con ‘{‘ o ‘[‘, se utiliza jQuery.parseJSON para analizarla; debe seguir una sintaxis JSON válida, incluyendo los nombres de propiedades entrecomillados. Una cadena no analizable como un valor JavaScript no se convierte.
Para recuperar un valor de atributo data-* como una cadena no convertida, utilice el método attr().
Desde jQuery 1.6, los guiones en los nombres de atributos data-* se han procesado en alineación con la API de conjuntos de datos HTML.
Por ejemplo, dado el siguiente HTML:
|
1
|
|
Las siguientes comparaciones son todas verdaderas:
|
1
2
3
4
|
|