Údaje. Vo svete jQuery je to všetko o bitoch informácií, ktoré sú pripojené priamo k prvkom (skôr ako povedzme k premennej, ktorá má iba na sebe zodpovednosť). Existuje množstvo spôsobov, ako uložiť bity dát na „strane klienta“ (v prehliadači, a nie na serveri). Existujú premenné ľubovoľného druhu, cookies, localStorage, indexDB a ktovie čo ešte. Údaje sa používajú, keď sú tieto údaje konkrétne relevantné pre konkrétny prvok.
Rovnako ako mnoho metód jQuery má aj nastavovač (dva parametre):
$("#thing").data("name", "value");a geter (jeden parameter):
$("#thing").data("name"); // "value"Môžete ho použiť na ľubovoľný objekt jQuery. Ak sa v objekte nachádza viac prvkov, všetky dostanú túto údajovú hodnotu, keď ho použijete ako nastavovač. Ak je v objekte viac prvkov, keď ho použijete ako getr, použije sa prvý prvok.
Jedným zo spôsobov, ako možno myslieť na údaje, je, že prvok je niečo ako menný priestor. Veľa prvkov môže používať rovnaký dátový „názov“, ale majú rôzne hodnoty.
V starej ukážke CSS-Tricks, posuvníku Mapy Google, je prípad použitia zo skutočného sveta. V tejto ukážke je zoznam miest a vložená mapa Google. Keď umiestnite kurzor myši na dané miesta, mapa sa presunie do stredu daného miesta. Mapové API na to potrebuje súradnice. Je logické mať tieto údaje v kóde HTML pre tieto miesta, ale nemusíme ich vidieť. To je perfektný prípad použitia data-*atribútov v HTML (nové v HTML5). Položka zoznamu v tomto zozname miest môže byť potom taká:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*je len spôsob, ako povedať data- anything . Môžete len doplniť údajové atribúty. Čokoľvek chceš. V tomto prípade sme vytvorili jednu pre zemepisnú šírku a inú pre zemepisnú dĺžku. Keď sa na tejto položke zoznamu vyskytne udalosť umiestnenia kurzora myši, jednoducho použijeme getter jQuery .data()na vytrhnutie informácií a použitie s API.
Teraz sme sa teda na údaje dívali dvoma spôsobmi, a to na údaje, ktoré sa nastavujú a získavajú zo samotného JavaScriptu, a na údaje, ktoré sa začínajú v HTML a používajú ich JavaScript. Oba sú v poriadku a API je rovnaké. Môžete si myslieť, že použitie .data()ako getter pre informácie v rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Môžete ich tak použiť aj v prípade, že máte radi:
$("#thing").attr("data-geo-lat");.data()Karierista je len skratka. A celkom sa mi páči, keď vás dostane do správneho zmýšľania.
Je však dôležité poznamenať, že použitie .data()ako nastavovač v skutočnosti nezmení data-*atribút v kóde HTML . To je dobré predvolené nastavenie, pretože nezmenenie modelu DOM znamená, že je rýchlejší. Ak nevyhnutne potrebujete zmeniť atribút v HTML, použite .attr()metódu ako nastavovač. Upozorňujeme, .attr()že je potrebné zahrnúť predponu „data-“, ktorú nepotrebujete používať .data().
$("#thing").attr("data-name", "Chris");Možno to budete musieť urobiť, aby ste si boli istí, že k nim majú prístup ďalšie časti aplikácie, alebo ak napríklad robíte niečo, čo by ste písali selektory CSS (napr. (data-something="whatever") ( ))