Tiedot. JQueryn maailmassa kyse on tietojenkeräyksistä, jotka on kiinnitetty suoraan elementteihin (sen sijaan, että sanottaisiin muuttuja, jolla on vain itseään koskeva tehtävä). On paljon tapoja tallentaa bittiä tietoja "asiakaspuolelle" (selaimessa, ei palvelimelle). On kaikenlaisia muuttujia, evästeet, localStorage, indexDB ja kuka tietää mitä muuta. Tietoja käytetään, kun kyseiset tiedot liittyvät erityisesti tiettyyn elementtiin.
Kuten monilla jQuery-menetelmillä, sillä on molemmat asetin (kaksi parametria):
$("#thing").data("name", "value");ja getter (yksi parametri):
$("#thing").data("name"); // "value"Voit käyttää sitä missä tahansa jQuery-objektissa. Jos objektissa on useita elementtejä, ne kaikki saavat kyseisen arvon, kun käytät sitä asettajana. Jos objektissa on useita elementtejä, kun käytät sitä getterinä, se käyttää ensimmäistä elementtiä.
Yksi tapa ajatella tietoja on, että elementti on eräänlainen kuin nimitila. Monet elementit voivat käyttää samaa data-nimeä, mutta niillä on erilaiset arvot.
Vanhassa CSS-Tricks-esittelyssä, Google Maps Sliderissä, on todellinen käyttö. Tässä esittelyssä on luettelo sijainneista ja upotettu Google Map. Kun viet hiiren sijaintien päälle, kartta siirtyy kyseisen sijainnin keskelle. Tätä varten kartan sovellusliittymä tarvitsee koordinaatteja. On järkevää, että kyseiset tiedot ovat HTML-koodissa kyseisistä sijainneista, mutta meidän ei tarvitse nähdä niitä. Se on täydellinen tapa käyttää data-*HTML-määritteitä (uusi HTML5: ssä). Luettelokohde kyseisessä sijaintiluettelossa voi olla seuraava:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*on vain tapa sanoa data- anything . Voit vain muodostaa tietoattribuutit. Mitä tahansa haluat. Tässä tapauksessa muodostimme yhden leveysasteen ja toisen pituusasteen. Kun hiiren hiiren tapahtuma laukaisee kyseisen luettelokohteen, käytämme yksinkertaisesti jQuery-getteriä tietojen .data()karkottamiseen ja käyttämiseen API: n kanssa.
Joten nyt olemme tarkastelleet tietoja kahdella tavalla: tiedot, jotka on asetettu ja saatu itse JavaScriptistä, ja tiedot, jotka alkavat HTML: stä ja joita JavaScript käyttää. Molemmat ovat kunnossa ja API on sama. Voisit ajatella, että käytät .data()reletter "jQuery"> -sivuston tietoja getterinä$("#thing").attr("rel"); // or any other attribute
Voit käyttää sitä myös niin, jos haluat:
$("#thing").attr("data-geo-lat");.data()Getter on vain oikotie. Ja pidän siitä tavallaan, koska se saa sinut oikeaan ajattelutapaan.
On kuitenkin tärkeää huomata, että käyttäminen .data()setterinä ei todellakaan muuta data-*HTML-attribuuttia . Se on hyvä oletus, koska DOM: n muuttamatta jättäminen tarkoittaa, että se on nopeampi. Jos sinun on ehdottomasti vaihdettava määritettä HTML: ssä, käytä .attr()menetelmää asettajana. Huomaa myös, että .attr()sinun on lisättävä ”data-” etuliite, jota et tarvitse .data().
$("#thing").attr("data-name", "Chris");Saatat joutua tekemään niin, jotta voit olla varma, että sovelluksen muilla osilla on pääsy, tai jos teet jotain, kuten kirjoitat CSS-valitsimia, ne palauttavat ne (esim. (data-something="whatever") ( ))