Datos. En el mundo de jQuery, se trata de bits de información que se adjuntan directamente a los elementos (en lugar de, digamos, una variable que solo tiene la responsabilidad de sí misma). Hay un montón de formas de guardar bits de datos en el "lado del cliente" (en el navegador, en lugar del servidor). Hay variables de cualquier tipo, cookies, localStorage, indexDB y quién sabe qué todo lo demás. Los datos se utilizan cuando esos datos son específicamente relevantes para un elemento específico.
Como muchos métodos de jQuery, tiene un setter (dos parámetros):
$("#thing").data("name", "value");y un captador (un parámetro):
$("#thing").data("name"); // "value"Puede usarlo en cualquier objeto jQuery. Si hay varios elementos en ese objeto, todos obtienen ese valor de datos cuando lo usa como setter. Si hay varios elementos en ese objeto cuando lo usa como captador, usará el primer elemento.
Una forma de pensar posiblemente en los datos es que el elemento es como un espacio de nombres. Muchos elementos pueden utilizar el mismo "nombre" de datos pero tienen valores diferentes.
Hay un caso de uso del mundo real en una vieja demostración de CSS-Tricks, el control deslizante de Google Maps. En esa demostración, hay una lista de ubicaciones y un mapa de Google integrado. Al pasar el cursor sobre las ubicaciones, el mapa se mueve para centrar esa ubicación. Para hacer esto, la API del mapa necesita coordenadas. Tiene sentido tener esos datos en el HTML para esas ubicaciones, pero no es necesario que los veamos. Ese es un caso de uso perfecto para los data-*atributos en HTML (nuevo en HTML5). Un elemento de la lista en esa lista de ubicaciones puede ser así:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*es solo una forma de decirlo data- anything . Puede simplemente inventar atributos de datos. Todo lo que quieras. En este caso, hicimos uno para la latitud y otro diferente para la longitud. Cuando un evento de desplazamiento del mouse se activa en ese elemento de la lista, simplemente usamos el getter jQuery para .data()extraer la información y usarla con la API.
Así que ahora hemos analizado los datos de dos maneras, datos que se establecen y se obtienen de JavaScript mismo, y datos que comienzan en HTML y son utilizados por JavaScript. Ambos están bien y la API es la misma. Podría pensar en usarlo .data()como un captador para la información en rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
También puede usarlo de esa manera si lo desea:
$("#thing").attr("data-geo-lat");El .data()captador es solo un atajo. Y me gusta un poco porque te pone en la mentalidad correcta.
Sin embargo, es importante tener en cuenta que el uso .data()como establecedor no altera en realidad el data-*atributo en el HTML . Ese es un buen valor predeterminado porque no alterar el DOM significa que es más rápido. Si es absolutamente necesario cambiar el atributo en el HTML, utilice el .attr()método como definidor. También tenga en cuenta .attr()que debe incluir el prefijo "datos-" que no necesita usar .data().
$("#thing").attr("data-name", "Chris");Es posible que deba hacer eso para asegurarse de que otras partes de la aplicación tengan acceso, o si está haciendo algo como escribir selectores CSS contra ellos (por ejemplo (data-something="whatever") ( ))