Método data

O método data permite vincular dados de qualquer tipo a elementos DOM de forma segura, o que evita vazamentos de memória. Podemos definir vários valores diferentes para um elemento e recuperá-los posteriormente. O uso do método data para atualizar dados não afeta os atributos no DOM.

Sintaxe

Assim definimos um valor para um elemento com uma chave, pela qual pode ser encontrado depois:

.data(chave, valor);

Também podemos passar um objeto que contém pares chave-valor para atualizar os dados:

.data(objeto);

Podemos obter os dados associados ao primeiro elemento na coleção jQuery, passando apenas a chave:

.data(chave);

Sem passar nenhum parâmetro, podemos ler os dados anteriormente vinculados aos elementos DOM. O método retornará um objeto JavaScript, contendo cada valor como uma propriedade:

.data();

Exemplo

Vamos usar data para definir dados para a tag p, passando como primeiro parâmetro 'test' e o valor 21 como segundo. Depois vamos ler os dados salvos com a chave 'test':

<p>texto</p>

$('p').data('test', 21); // aqui os dados são gravados

console.log($('p').data('test')); // exibirá o número 21
console.log($('p').data()); // exibirá o objeto {test: 21}

Veja também

método removeData,
que remove dados de um elemento
método hasData,
que verifica a presença de dados em um elemento
método attr,
que permite obter e alterar qualquer atributo de um elemento
propriedade JavaScript dataset,
que permite adicionar atributos personalizados às tags