¿Qué función jQuery data() hace

Question

No he encontrado cuál es el uso de la función jquery data(). ¿Alguien me puede dar un ejemplo de cómo se puede utilizar?

Answer 1

Es realmente útil para asociar varios objetos, cadenas, matrices, etc. con un elemento DOM. Aquí está una hipotética utilización de diversión:

$(document).ready(function(){ 
    $("a").each(function(index, el){ 
     if(index % 2 == 0) 
     $(this).data('coolColor', 'Orange'); // Set the data 
     else 
     $(this).data('coolColor', 'Purple'); // Set the data 
    }).click(function(e){ 
     alert($(this).data('coolColor')); // Retrieve the data 
     e.preventDefault(); 
    }); 
}); 

Esto se seleccionaría todos los a etiqueta, y establecer Orange si es impar, o si es incluso Purple. Esta no es la manera más óptima de escribir este código si esto es lo que realmente quería hacer, pero sí ilustra cómo usar la función .data().

También puede utilizarlo para almacenar objetos:

$("#header").data('headerSettings',{ 
    color: "red", 
    cost: "$25.00", 
    time: 1000 
}); 

Ahora se puede acceder a esos datos en cualquier otro lugar en la página:

$("#header").data('headerSettings').color; 

Answer 2

El jQuery documentation lo resume bastante bien:

Devuelve un identificador único para el elemento.

Normalmente esta función solo será utilizada internamente. Es probable que no utilice el método data() de esta manera. Se llama automáticamente cuando es necesario cuando se utiliza la funcionalidad de otros datos() .

Básicamente esta función existe para admitir otras funciones de jQuery. Lo mejor es ignorar esta función, ya que no está destinada a formar parte de la interfaz pública de la API de jQuery.

Answer 3

Le permite asociar cualquier tipo de datos con un elemento DOM. Ver la publicación del blog this para algunos ejemplos.

Answer 4

Creo que esta pregunta necesita un poco más de atención. La API data de jQuery es realmente potente para varios casos de uso.

La función de datos de jQuery le permite almacenar y recuperar cualquier información asociada con cualquier objeto jQuery.

Principalmente, también se puede utilizar para leer los atributos data- establecidos en cualquier nodo en el html.

Ejemplo 1

HTML: <div id="myNode" data-foo="bar"></div>.

Código jQuery: $("#myNode").data("foo") //bar

Ejemplo 2

mismo modo que puede almacenar un valor w.r.t cualquier nodo también.

Código jQuery:

$("#myNode").data("foo","baz") $("#myNode").data("foo") //baz

Una cosa importante a tener en cuenta es que cuando uno se propone un conjunto de datos en la nota usando el API de datos, el HTML no se actualiza en el DOM. Si desea actualizar el código HTML, le recomendamos que se adhiera al método attr("data-foo","baz").

Si bien uno puede leer cadenas almacenadas en atributos de datos HTML, también puede asignar un objeto mientras se almacena un valor usando la API de datos.

Existen varios casos de uso donde los desarrolladores vinculan un objeto con un nodo.

p. Ej.

var obj = { 
    name : "test" 
} 
$("#myNode").data("foo",obj); 

$("#myNode").data("foo") === obj //true 

Adelante, explore the API here.