Podatki. V svetu jQuery gre za bitov informacij, ki so pritrjeni neposredno na elemente (in ne recimo na spremenljivko, ki ima samo na sebi). Bitov podatkov lahko shranite na "odjemalski strani" (v brskalniku in ne v strežniku). Obstajajo kakršne koli spremenljivke, piškotki, localStorage, indexDB in kdo ve, kaj vse drugega. Podatki se uporabljajo, kadar so ti podatki posebej pomembni za določen element.
Tako kot mnoge metode jQuery ima tudi nastavitelj (dva parametra):
$("#thing").data("name", "value");in geter (en parameter):
$("#thing").data("name"); // "value"Uporabite ga lahko na katerem koli objektu jQuery. Če je v tem predmetu več elementov, vsi dobijo to vrednost podatkov, ko jo uporabite kot nastavitelja. Če je v tem predmetu več elementov, ko ga uporabljate kot geter, bo uporabil prvi element.
Eden od načinov, kako si morda omisliti podatke, je, da je element nekako podoben imenskemu prostoru. Veliko elementov lahko uporablja isto "ime" podatkov, vendar imajo različne vrednosti.
V stari predstavitvi CSS-Tricks, drsniku Google Maps, obstaja resničen primer uporabe. V tej predstavitvi je seznam lokacij in vdelani Google Map. Ko se premaknete nad lokacijo, se zemljevid premakne v središče te lokacije. Za to potrebuje API zemljevida koordinate. Te podatke je smiselno imeti v HTML-ju za te lokacije, vendar jih ni treba videti. To je popoln primer uporabe data-*atributov v HTML (novo v HTML5). Element seznama na tem seznamu lokacij je lahko v tem primeru tak:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*je samo način za reči data- anything . Lahko samo sestavite atribute podatkov. Karkoli želiš. V tem primeru smo eno nadomestili za zemljepisno širino in drugo za zemljepisno dolžino. Ko se dogodek miške s kazalcem miške sproži na tem elementu seznama, preprosto uporabimo jQuery getter for, .data()da odstranimo podatke in jih uporabimo z API-jem.
Zdaj smo podatke preučili na dva načina, podatke, ki so nastavljeni in pridobljeni iz samega JavaScript, in podatki, ki se začnejo v HTML-ju in jih JavaScript uporablja. Oba sta v redu in API je enak. Morda pomislite, da bi informacije uporabili .data()kot reter = "jQuery">$("#thing").attr("rel"); // or any other attribute
Tudi to lahko uporabite, če želite:
$("#thing").attr("data-geo-lat");.data()Getrske je samo bližnjica. In nekako mi je všeč, saj vas pripelje v pravo miselnost.
Vendar je pomembno opozoriti, da uporaba .data()kot nastavitelja dejansko ne spremeni data-*atributa v HTML-ju . To je dobra privzeta nastavitev, ker ne spreminjanje DOM-a pomeni, da je hitrejši. Če morate atribut v HTML-ju nujno spremeniti, uporabite .attr()metodo kot nastavitelja. Upoštevajte tudi, .attr()da morate pri uporabi vključiti predpono "data-", ki je ne potrebujete .data().
$("#thing").attr("data-name", "Chris");Morda boste to morali storiti, da boste lahko prepričani, da imajo dostop drugi deli aplikacije ali če počnete kaj podobnega, kot da pred njimi pišete izbirnike CSS (npr. (data-something="whatever") ( ))