Data. I världen av jQuery handlar det om informationsbitar som är kopplade direkt till element (snarare än, säg, en variabel som endast åligger sig själv). Det finns massor av sätt att spara bitar av data på "klientsidan" (i webbläsaren snarare än servern). Det finns variabler av något slag, cookies, localStorage, indexDB, och vem vet vad allt annat. Data används när dessa data är specifikt relevanta för ett specifikt element.
Liksom många jQuery-metoder har den både en setter (två parametrar):
$("#thing").data("name", "value");och en getter (en parameter):
$("#thing").data("name"); // "value"Du kan använda den på vilket jQuery-objekt som helst. Om det finns flera element i det objektet får alla datavärdet när du använder det som setter. Om det finns flera element i det objektet när du använder det som en getter, kommer det att använda det första elementet.
Ett sätt att möjligen tänka på data är att elementet är ungefär som ett namnområde. Många element kan använda samma "namn" men har olika värden.
Det finns ett verkligt användningsfall i en gammal CSS-Tricks-demo, Google Maps Slider. I den demo finns en lista över platser och en inbäddad Google Map. När du håller muspekaren över platserna flyttas kartan till den platsen. För att göra detta behöver kart-API: et koordinater. Det är vettigt att ha den informationen i HTML för dessa platser, men vi behöver inte se den. Det är ett perfekt användningsfall för data-*attribut i HTML (nytt i HTML5). Ett listobjekt i listan över platser kan vara så här då:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*är bara ett sätt att säga data- anything . Du kan bara skapa dataattribut. Vad du än vill ha. I det här fallet gjorde vi en för latitud och en annan för longitud. När en mushändelse avfyrar det listobjektet använder vi enkelt jQuery-getter för .data()att ta bort informationen och använda den med API: et.
Så nu har vi tittat på data på två sätt, data som både är inställda och hämtade från själva JavaScript, och data som börjar i HTML och används av JavaScript. Båda är bra och API: et är detsamma. Du kanske tänker använda .data()som en getter för informationen i rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Du kan också använda det så om du vill:
$("#thing").attr("data-geo-lat");Den .data()getter är bara en genväg. Och jag gillar det ganska när du får rätt inställning.
Det är dock viktigt att notera att användning .data()som setter inte ändrar data-*attributet i HTML-filen . Det är en bra standard för att inte ändra DOM betyder att den är snabbare. Om du absolut behöver ändra attributet i HTML, använd .attr()metoden som setter. Observera också att .attr()du måste inkludera prefixet ”data-” som du inte behöver använda .data().
$("#thing").attr("data-name", "Chris");Du kan behöva göra det så att du kan vara säker på att andra delar av applikationen har åtkomst, eller om du gör något som att skriva CSS-väljare mot dem (t.ex. (data-something="whatever") ( ))