Dati. Nel mondo di jQuery, si tratta di bit di informazioni che sono attaccati direttamente agli elementi (piuttosto che, diciamo, una variabile con un onere solo su se stessa). Ci sono molti modi per salvare bit di dati sul "lato client" (nel browser, piuttosto che nel server). Ci sono variabili di qualsiasi tipo, cookies, localStorage, indexDB e chissà cos'altro. I dati vengono utilizzati quando tali dati sono specificamente rilevanti per un elemento specifico.
Come molti metodi jQuery, ha sia un setter (due parametri):
$("#thing").data("name", "value");e un getter (un parametro):
$("#thing").data("name"); // "value"Puoi usarlo su qualsiasi oggetto jQuery. Se ci sono più elementi in quell'oggetto, tutti ottengono quel valore di dati quando lo usi come setter. Se ci sono più elementi in quell'oggetto quando lo usi come getter, userà il primo elemento.
Un modo per pensare ai dati è che l'elemento sia una specie di spazio dei nomi. Molti elementi possono utilizzare lo stesso "nome" di dati ma avere valori diversi.
C'è un caso d'uso nel mondo reale in una vecchia demo di CSS-Tricks, il Google Maps Slider. In quella demo, c'è un elenco di posizioni e una mappa di Google incorporata. Mentre passi con il mouse sulle posizioni, la mappa si sposta al centro di quella posizione. Per fare ciò, l'API della mappa necessita delle coordinate. Ha senso avere quei dati nell'HTML per quelle posizioni, ma non abbiamo bisogno di vederli. Questo è un caso d'uso perfetto per gli data-*attributi in HTML (nuovo in HTML5). Un elemento dell'elenco in quell'elenco di posizioni potrebbe essere così:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*è solo un modo per dirlo data- anything . Puoi solo creare attributi di dati. Quello che vuoi. In questo caso ne abbiamo ricavato uno per la latitudine e uno diverso per la longitudine. Quando un evento al passaggio del mouse si attiva su quell'elemento dell'elenco, usiamo semplicemente jQuery getter per .data()estrarre le informazioni e usarle con l'API.
Quindi ora abbiamo esaminato i dati in due modi, i dati impostati e ottenuti da JavaScript stesso e i dati che iniziano in HTML e vengono utilizzati da JavaScript. Entrambi vanno bene e l'API è la stessa. Potresti pensare di utilizzare .data()come getter per le informazioni in rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Puoi usarlo anche in questo modo se ti piace:
$("#thing").attr("data-geo-lat");Il .data()getter è solo una scorciatoia. E mi piace perché ti mette nella giusta mentalità.
Tuttavia, è importante notare che l'utilizzo .data()come setter non altera effettivamente l' data-*attributo nell'HTML . Questa è una buona impostazione predefinita perché non alterare il DOM significa che è più veloce. Se hai assolutamente bisogno di cambiare l'attributo nell'HTML, usa il .attr()metodo come setter. Si noti inoltre che .attr()è necessario includere il prefisso "data-" che non è necessario utilizzare .data().
$("#thing").attr("data-name", "Chris");Potrebbe essere necessario farlo in modo da essere sicuro che altre parti dell'applicazione abbiano accesso, o se stai facendo qualcosa come scrivere selettori CSS di nuovo (ad esempio (data-something="whatever") ( ))