Data. I jQuery-verdenen handler det kun om bit af information, der er knyttet direkte til elementer (snarere end for eksempel en variabel, der kun påhviler sig selv). Der er masser af måder at gemme bits på "klientsiden" (i browseren i stedet for på serveren). Der er variabler af enhver art, cookies, localStorage, indexDB, og hvem ved hvad alt andet. Data bruges, når disse data er specifikt relevante for et bestemt element.
Som mange jQuery-metoder har den begge en setter (to parametre):
$("#thing").data("name", "value");og en getter (en parameter):
$("#thing").data("name"); // "value"Du kan bruge det på ethvert jQuery-objekt. Hvis der er flere elementer i det objekt, får de alle denne dataværdi, når du bruger den som setter. Hvis der er flere elementer i det objekt, når du bruger det som en getter, bruger det det første element.
En måde at muligvis tænke på data på er, at elementet er som et navneområde. Mange elementer kan bruge de samme data "navn", men har forskellige værdier.
Der er en reel brugssag i en gammel CSS-Tricks-demo, Google Maps Slider. I denne demo er der en liste over placeringer og et indbygget Google Map. Når du holder markøren over placeringerne, flyttes kortet til at centrere den placering. For at gøre dette skal kort-API'et have koordinater. Det giver mening at have disse data i HTML for disse placeringer, men vi behøver ikke se dem. Det er en perfekt brugssag for data-*attributter i HTML (nyt i HTML5). Et listeelement på listen over placeringer kan være sådan her:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*er bare en måde at sige på data- anything . Du kan bare sammensætte dataattributter. Alt hvad du vil have. I dette tilfælde lavede vi en op til bredde og en anden til længdegrad. Når en mus svæver begivenhed, affyres på dette listeelement, bruger vi simpelt jQuery-getter til .data()at fjerne informationen og bruge den med API'en.
Så nu har vi kigget på data på to måder, data, der både er indstillet og hentet fra selve JavaScript, og data, der starter i HTML og bruges af JavaScript. Begge er fine, og API'en er den samme. Du kan måske tænke dig at bruge .data()som en getter til oplysningerne i rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Du kan også bruge det på den måde, hvis du kan lide:
$("#thing").attr("data-geo-lat");Den .data()getter er bare en genvej. Og jeg kan godt lide det, da det får dig til at tænke rigtigt.
Det er dog vigtigt at bemærke, at brug .data()som setter ikke ændrer data-*attributten i HTML-en . Det er en god standard, fordi ikke ændring af DOM betyder, at den er hurtigere. Hvis du absolut har brug for at ændre attributten i HTML-en, skal du bruge .attr()metoden som en setter. Bemærk også at bruge .attr()du skal medtage "data-" præfikset, som du ikke behøver at bruge .data().
$("#thing").attr("data-name", "Chris");Du skal muligvis gøre det, så du kan være sikker på, at andre dele af applikationen har adgang, eller hvis du laver noget som at skrive CSS-vælgere mod dem (f.eks. (data-something="whatever") ( ))