Dados. No mundo do jQuery, trata-se de bits de informação que são anexados diretamente aos elementos (em vez de, digamos, uma variável com ônus apenas para si mesma). Existem várias maneiras de salvar bits de dados no “lado do cliente” (no navegador, em vez de no servidor). Existem variáveis de qualquer tipo, cookies, localStorage, indexDB e quem sabe o que mais. Os dados são usados quando são especificamente relevantes para um elemento específico.
Como muitos métodos jQuery, ele tem um setter (dois parâmetros):
$("#thing").data("name", "value");e um getter (um parâmetro):
$("#thing").data("name"); // "value"Você pode usá-lo em qualquer objeto jQuery. Se houver vários elementos nesse objeto, todos eles obterão esse valor de dados quando você o usar como configurador. Se houver vários elementos nesse objeto quando você o usar como getter, ele usará o primeiro elemento.
Uma forma de pensar nos dados é que o elemento é como um namespace. Muitos elementos podem usar o mesmo “nome” de dados, mas têm valores diferentes.
Há um caso de uso do mundo real em uma velha demonstração de truques CSS, o Google Maps Slider. Nessa demonstração, há uma lista de locais e um mapa do Google embutido. Conforme você passa o mouse sobre os locais, o mapa se move para o centro desse local. Para fazer isso, a API do mapa precisa de coordenadas. Faz sentido ter esses dados no HTML para esses locais, mas não precisamos vê-los. Esse é um caso de uso perfeito para data-*atributos em HTML (novo em HTML5). Um item da lista de locais pode ser assim:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*é apenas uma maneira de dizer data- anything . Você pode apenas criar atributos de dados. O que você quiser. Neste caso, inventamos um para latitude e outro diferente para longitude. Quando um evento de foco do mouse é acionado nesse item da lista, simplesmente usamos o getter jQuery para .data()arrancar as informações e usá-las com a API.
Portanto, agora vimos os dados de duas maneiras, dados que são definidos e obtidos do próprio JavaScript e dados que começam no HTML e são usados pelo JavaScript. Ambos estão bem e a API é a mesma. Você pode pensar em usar .data()como um getter para as informações em rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Você também pode usá-lo assim se desejar:
$("#thing").attr("data-geo-lat");O .data()getter é apenas um atalho. E eu meio que gosto, pois te deixa com a mentalidade certa.
No entanto, é importante observar que usar .data()como configurador não altera realmente o data-*atributo no HTML . Esse é um bom padrão porque não alterar o DOM significa que ele é mais rápido. Se você realmente precisar alterar o atributo no HTML, use o .attr()método como um configurador. Observe também que .attr()você precisa incluir o prefixo “data-”, o qual não precisa ser usado .data().
$("#thing").attr("data-name", "Chris");Você pode precisar fazer isso para ter certeza de que outras partes do aplicativo tenham acesso, ou se estiver fazendo algo como escrever seletores CSS contra eles (por exemplo (data-something="whatever") ( ))