Podaci. U svijetu jQueryja radi se o bitovima informacija koji su izravno pričvršćeni na elemente (umjesto, recimo, varijable koja ima samo na sebi). Postoji mnoštvo načina za spremanje bitova podataka na "klijentskoj strani" (u pregledniku, a ne na poslužitelju). Postoje varijable bilo koje vrste, kolačići, localStorage, indexDB i tko zna što sve ostalo. Podaci se koriste kada su ti podaci posebno relevantni za određeni element.
Kao i mnoge jQuery metode, on ima i setter (dva parametra):
$("#thing").data("name", "value");i geter (jedan parametar):
$("#thing").data("name"); // "value"Možete ga koristiti na bilo kojem jQuery objektu. Ako u tom objektu postoji više elemenata, svi oni dobivaju tu vrijednost podataka kada ga koristite kao postavljač. Ako u tom objektu postoji više elemenata kada ga koristite kao geter, on će upotrijebiti prvi element.
Jedan od načina za razmišljanje o podacima jest taj da je element nalik na prostor imena. Mnogo elemenata može koristiti isti naziv podataka, ali imaju različite vrijednosti.
Slučaj stvarne uporabe postoji u starom demo CSS-Tricksu, Google Maps Slider. U toj demonstraciji nalazi se popis lokacija i ugrađena Google karta. Dok lebdite iznad lokacija, karta se pomiče u središte te lokacije. Da bi to učinio, API-ju karte potrebne su koordinate. Ima smisla imati te podatke u HTML-u za te lokacije, ali ih ne trebamo vidjeti. To je savršen slučaj upotrebe data-*atributa u HTML-u (novo u HTML5). Stavka popisa na tom popisu lokacija tada može biti sljedeća:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*je samo način da se kaže data- anything . Možete samo izraditi atribute podataka. Sve što želite. U ovom smo slučaju nadoknadili zemljopisnu širinu, a drugu dužinu. Kada se slučaj lebdenja miša aktivira na toj stavci popisa, jednostavno koristimo jQuery getter for .data()da izbacimo podatke i koristimo ih s API-jem.
Dakle, sada smo podatke gledali na dva načina, podatke koji su postavljeni i dobiveni iz samog JavaScript-a, i podaci koji počinju u HTML-u i koje koristi JavaScript. I jedno i drugo je u redu, a API je isti. Mogli biste pomisliti da koristite .data()podatke za dobivanje podataka u rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Možete ga koristiti i na taj način ako želite:
$("#thing").attr("data-geo-lat");.data()Inicijator je samo prečac. I nekako mi se sviđa jer vas dovodi u pravi način razmišljanja.
Međutim, važno je napomenuti da upotreba .data()kao postavljača zapravo ne mijenja data-*atribut u HTML-u . To je dobra zadana vrijednost jer neizmjena DOM-a znači da je brža. Ako apsolutno trebate promijeniti atribut u HTML-u, koristite .attr()metodu kao postavljač. Također imajte na umu da prilikom upotrebe .attr()morate uključiti prefiks „data-“ koji ne trebate koristiti .data().
$("#thing").attr("data-name", "Chris");Možda ćete to morati učiniti kako biste bili sigurni da drugi dijelovi aplikacije imaju pristup ili ako radite nešto poput pisanja CSS selektora (npr. (data-something="whatever") ( ))