Data. I jQuery-verdenen handler det om biter av informasjon som er knyttet direkte til elementene (i stedet for, for eksempel en variabel med bare på seg selv). Det er mange måter å lagre biter av data på "klientsiden" (i nettleseren, i stedet for serveren). Det er variabler av noe slag, informasjonskapsler, localStorage, indexDB, og hvem vet hva alt annet. Data brukes når dataene er spesielt relevante for et bestemt element.
Som mange jQuery-metoder har den både en setter (to parametere):
$("#thing").data("name", "value");og en getter (en parameter):
$("#thing").data("name"); // "value"Du kan bruke den på et hvilket som helst jQuery-objekt. Hvis det er flere elementer i det objektet, får alle dataverdien når du bruker den som setter. Hvis det er flere elementer i objektet når du bruker det som en getter, vil det bruke det første elementet.
En måte å muligens tenke på data på er at elementet er som et navneområde. Mange elementer kan bruke samme "navn", men har forskjellige verdier.
Det er en virkelig brukssak i en gammel CSS-Tricks-demo, Google Maps Slider. I den demoen er det en liste over steder og et innebygd Google Map. Når du holder markøren over stedene, flytter kartet seg til sentrering av stedet. For å gjøre dette trenger kart-API-et koordinater. Det er fornuftig å ha disse dataene i HTML-koden for disse stedene, men vi trenger ikke se dem. Det er et perfekt bruksområde for data-*attributter i HTML (nytt i HTML5). Et listeelement i listen over steder kan være slik da:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*er bare en måte å si på data- anything . Du kan bare lage dataattributter. Alt du vil. I dette tilfellet laget vi en for breddegrad og en annen for lengdegrad. Når en mus svever hendelse på det listelementet, bruker vi bare jQuery-getter til .data()å fjerne informasjonen og bruke den med API.
Så nå har vi sett på data på to måter, data som både er satt og hentet fra selve JavaScript, og data som starter i HTML og brukes av JavaScript. Begge er fine, og API-en er den samme. Du kan tenke deg å bruke .data()som en getter for informasjonen i rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Du kan også bruke den på den måten hvis du vil:
$("#thing").attr("data-geo-lat");Den .data()getter er bare en snarvei. Og jeg liker det som det får deg til å tenke riktig.
Det er imidlertid viktig å merke seg at bruk .data()som setter ikke endrer data-*attributtet i HTML-en . Det er en god standard fordi ikke å endre DOM betyr at den er raskere. Hvis du absolutt trenger å endre attributtet i HTML, bruk .attr()metoden som en setter. Vær også oppmerksom på at .attr()du må inkludere prefikset “data-” som du ikke trenger å bruke .data().
$("#thing").attr("data-name", "Chris");Du må kanskje gjøre det slik at du kan være sikker på at andre deler av applikasjonen har tilgang, eller hvis du gjør noe som å skrive CSS-velgerne mot dem (f.eks. (data-something="whatever") ( ))