Il metodo data() di jQuery permette di associare dati arbitrari a ciascun oggetto del set di jQuery. Questi dati possono essere memorizzati come oggetti letterali. L'utilità di questo metodo sta nel fatto che migliora di molto la performance dei nostri script, in quanto i dati inizializzati vengono direttamente associati agli elementi.
Il primo modo per associare tali dati è quello di memorizzarli in modo semplice:
$('#test').data('test', 10);
Possiamo quindi accedere al loro valore in questo modo:
alert($('#test').data('test')); // 10
Per gli oggetti complessi, invece, si usa la seguente notazione:
$('#test').data('myTest', {foo: 'Foo', bar: 10});
Per accedere ai valori di tali oggetti useremo invece:
alert($('#test').data('myTest').foo); // 'Foo'
alert($('#test').data('myTest').bar); // 10
In altre parole, test è divenuto il riferimento per accedere all'oggetto in esso contenuto. Come si può notare, la notazione è la stessa di qualsiasi altro oggetto JavaScript.
Possiamo ottenere un riferimento completo a tutti i dati associati all'elemento usando data() senza argomenti:
$('#test').data(); // {test: 10, myTest: {foo: 'Foo', bar: 10}}
Una particolarità interessante sta nel fatto che possiamo anche specificare metodi (cioè funzioni) per gli oggetti associati agli elementi:
$('#test').data('myTest', {method: function() { alert('Test');}});
e quindi invocare tali metodi nel modo consueto:
$('#test').data('myTest').method(); // un alert con 'Test'