Data. Ve světě jQuery je to všechno o bitech informací, které jsou připojeny přímo k prvkům (spíše než, řekněme, proměnné, které mají pouze onus). Existuje spousta způsobů, jak ukládat bitová data na „straně klienta“ (spíše v prohlížeči než na serveru). K dispozici jsou proměnné jakéhokoli druhu, soubory cookie, localStorage, indexDB a kdo ví, co všechno ostatní. Data se používají, když jsou tato data konkrétně relevantní pro konkrétní prvek.
Stejně jako mnoho metod jQuery má jak setter (dva parametry):
$("#thing").data("name", "value");a getr (jeden parametr):
$("#thing").data("name"); // "value"Můžete jej použít na libovolný objekt jQuery. Pokud je v tomto objektu více prvků, všechny tyto hodnoty získají, když je použijete jako setter. Pokud v objektu existuje více prvků, když ho použijete jako getr, použije první prvek.
Jedním ze způsobů, jak možná přemýšlet o datech, je, že prvek je něco jako jmenný prostor. Mnoho prvků může používat stejný datový „název“, ale mají různé hodnoty.
Ve staré ukázce CSS-Tricks, posuvníku Map Google, existuje skutečný případ použití. V této ukázce je seznam míst a vložená mapa Google. Když umístíte ukazatel myši nad místa, mapa se přesune do středu tohoto místa. K tomu potřebuje mapové API souřadnice. Má smysl mít tato data v HTML pro tato místa, ale nemusíme je vidět. To je perfektní případ použití data-*atributů v HTML (nové v HTML5). Položka seznamu v tomto seznamu míst pak může vypadat takto:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*je jen způsob, jak to říct data- anything . Můžete jen vytvořit datové atributy. Cokoli chceš. V tomto případě jsme vytvořili jeden pro zeměpisnou šířku a jiný pro zeměpisnou délku. Když se na této položce seznamu spustí událost vznášení myši, jednoduše použijeme getter jQuery pro .data()vytrhnutí informací a použití s API.
Takže teď jsme se podívali na data dvěma způsoby, a to na data, která jsou nastavena a získána ze samotného JavaScriptu, a data, která začínají v HTML a jsou používána JavaScriptem. Oba jsou v pořádku a API je stejné. Možná si pomyslíte, že použití .data()jako getru pro informace v rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Můžete to také použít, pokud chcete:
$("#thing").attr("data-geo-lat");.data()Kariérista je jen zkratka. A docela se mi líbí, protože vás dostane do správného myšlení.
Je však důležité si uvědomit, že použití .data()jako setter ve skutečnosti nezmění data-*atribut v HTML . To je dobré výchozí nastavení, protože nezměnění modelu DOM znamená, že je rychlejší. Pokud absolutně potřebujete změnit atribut v HTML, použijte .attr()metodu jako setter. Všimněte .attr()si také, že je třeba uvést předponu „data-“, kterou nepotřebujete používat .data().
$("#thing").attr("data-name", "Chris");Možná to budete muset udělat, abyste si byli jisti, že mají přístup i jiné části aplikace, nebo pokud děláte něco jako psaní selektorů CSS, které je znovu (např. (data-something="whatever") ( ))