Andmed. JQuery maailmas on kõik seotud infobittidega, mis on kinnitatud otse elementidele (mitte näiteks muutujale, millel on ainult enda ülesanne). Andmete bittide salvestamiseks kliendi poolel (brauseris, mitte serveris) on palju võimalusi. Seal on igasuguseid muutujaid, küpsised, localStorage, indexDB ja kes teab mida kõike muud. Andmeid kasutatakse siis, kui need andmed on konkreetse elemendi jaoks konkreetselt asjakohased.
Nagu paljudel jQuery meetoditel, on ka sellel mõlemad setter (kaks parameetrit):
$("#thing").data("name", "value");ja getter (üks parameeter):
$("#thing").data("name"); // "value"Saate seda kasutada mis tahes jQuery objektil. Kui selles objektis on mitu elementi, saavad kõik need selle väärtuse, kui kasutate seda setterina. Kui selles objektis on mitu elementi, kui kasutate seda getterina, kasutab see esimest elementi.
Üks võimalus andmete väljamõtlemiseks on see, et element sarnaneb nimeruumiga. Paljud elemendid võivad kasutada samu andmeid „nimi“, kuid neil on erinevad väärtused.
Vanas CSS-Tricksi demos, Google Mapsi liuguris, on reaalse kasutamise juhtum. Selles demos on asukohtade loend ja sisseehitatud Google Map. Asukohtade kohal hõljutades liigub kaart selle asukoha keskele. Selleks vajab kaardi API koordinaate. On mõistlik, et need andmed on HTML-is nende asukohtade jaoks olemas, kuid me ei pea neid nägema. See sobib ideaalselt data-*HTML-i atribuutide kasutamiseks (uus HTML5-s). Selles asukohaloendis olev loendiüksus võib olla järgmine:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*on lihtsalt viis öelda data- anything . Saate lihtsalt välja töötada andmete atribuudid. Ükskõik mida tahad. Sel juhul tegime ühe laiuskraadi ja teise pikkuskraadi jaoks. Kui hiirekursori sündmus käivitub selle loendiüksuse kasutamisel, kasutame lihtsalt teavet jankimiseks jQuery getterit .data()ja kasutame seda koos API-ga.
Nii et nüüd oleme andmeid vaadanud kahel viisil: andmed, mis on nii JavaScripti enda poolt määratud kui ka saadud, ning HTML-is algavad ja JavaScripti kasutatavad andmed. Mõlemad on korras ja API on sama. Võiksite mõelda, .data()kui kasutada rel = "jQuery"> teabe getterina$("#thing").attr("rel"); // or any other attribute
Võite seda ka nii kasutada, kui soovite:
$("#thing").attr("data-geo-lat");.data()Getter on lihtsalt otsetee. Ja see mulle meeldib, kuna see viib teid õigesse mõtteviisi.
Siiski on oluline märkida, et .data()setterina kasutamine ei muuda data-*HTML-i atribuuti tegelikult . See on hea vaikimisi, sest DOM-i muutmata jätmine tähendab seda kiiremat. Kui peate tingimata HTML-is atribuuti muutma, kasutage .attr()meetodit setterina. Pange tähele ka seda, .attr()et peate lisama "data-" eesliite, mida te ei vaja .data().
$("#thing").attr("data-name", "Chris");Võimalik, et peate seda tegema, et oleksite kindel, et rakenduse teistel osadel on juurdepääs või kui teete midagi sellist, nagu kirjutate CSS-i valijaid uuesti (nt (data-something="whatever") ( ))