Duomenys. „JQuery“ pasaulyje viskas susiję su informacijos dalimis, kurios yra tiesiogiai pritvirtintos prie elementų (o ne, tarkime, kintamasis, kurio pareiga yra tik pati sau). Yra daugybė būdų, kaip išsaugoti duomenų „kliento pusėje“ (naršyklėje, o ne serveryje). Yra bet kokio tipo kintamieji, slapukai, localStorage, indexDB ir kas žino, kas visa kita. Duomenys naudojami, kai tie duomenys yra konkrečiai susiję su konkrečiu elementu.
Kaip ir daugelis „jQuery“ metodų, jis turi ir nustatiklį (du parametrus):
$("#thing").data("name", "value");ir getter (vienas parametras):
$("#thing").data("name"); // "value"Jį galite naudoti bet kuriame „jQuery“ objekte. Jei tame objekte yra keli elementai, visi jie gauna tą duomenų vertę, kai naudojate juos kaip nustatiklį. Jei tame objekte yra keli elementai, kai jį naudojate kaip „getter“, jis naudos pirmąjį elementą.
Vienas iš būdų galbūt pagalvoti apie duomenis yra tas, kad elementas yra panašus į vardų sritį. Daugelis elementų gali naudoti tuos pačius duomenis „vardas“, bet jų reikšmės skiriasi.
Yra realus naudojimo atvejis senoje „CSS-Tricks“ demonstracinėje versijoje „Google Maps Slider“. Toje demonstracijoje yra vietų sąrašas ir įdėtas „Google“ žemėlapis. Užvedus pelės žymeklį virš vietų, žemėlapis juda į tos vietos centrą. Norėdami tai padaryti, žemėlapio API reikia koordinačių. Tikslinga tuos duomenis turėti tų vietų HTML, bet mums jų nereikia matyti. Tai puikus data-*HTML atributų naudojimo atvejis (naujas HTML5). Tada sąrašo elementas tame vietų sąraše gali būti toks:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*yra tik būdas pasakyti data- anything . Galite tiesiog sudaryti duomenų atributus. Viskas, ko norite. Šiuo atveju mes nustatėme vieną platumos ir kitą ilgumos atžvilgiu. Kai pelės užvedimo įvykis .data()paleidžia tą sąrašo elementą, mes paprasčiausiai naudojame „jQuery“ žymeklį, norėdami išsitraukti informaciją ir naudoti ją su API.
Taigi dabar mes apžvelgėme duomenis dviem būdais: duomenis, kurie yra nustatyti ir gauti iš pačios „JavaScript“, ir duomenis, kurie prasideda HTML ir kuriuos naudoja „JavaScript“. Ir vienas, ir kitas yra tas pats. Galite pagalvoti .data()apie rel = "jQuery"> informacijos naudojimą kaip „getter“$("#thing").attr("rel"); // or any other attribute
Jei norite, galite tai naudoti ir tokiu būdu:
$("#thing").attr("data-geo-lat");„ .data()Getter“ yra tik nuoroda. Ir man tai kažkaip patinka, nes tai priverčia jus teisingai mąstyti.
Tačiau svarbu pažymėti, kad naudojant .data()kaip seterį HTML atributas iš tikrųjų nepasikeičiadata-* . Tai yra geras numatytasis nustatymas, nes nepakeitus DOM reiškia, kad jis yra greitesnis. Jei būtinai reikia pakeisti HTML atributą, naudokite .attr()metodą kaip nustatiklį. Taip pat atkreipkite dėmesį, kad .attr()jums reikia įtraukti priešdėlį „data-“, kurio jums nereikia naudoti .data().
$("#thing").attr("data-name", "Chris");Jums gali reikėti tai padaryti, kad galėtumėte būti tikri, jog kitos programos dalys turi prieigą, arba jei darote ką nors, pavyzdžiui, rašote CSS selektorius, kad jas pakartotumėte (pvz. (data-something="whatever") ( ))