Manipulace DOM s jQuery

Strom DOMThe Strom DOM je hierarchická organizace obsahu našeho dokumentu HTMLTo je velmi užitečné při identifikaci různých prvků, které jsou obsaženy v uvedeném dokumentu, protože s jedinečnými identifikátory můžeme přiřadit různá jména strukturám, které i přes podobné označení mají jiný cíl.
V minulosti byl problém v tom, že se po něm nedalo snadno projít Strom DOM v reálném čase, protože v něm bylo nutné vytvářet těžkopádné rutiny a funkce Javascript, nicméně toto vše se změnilo s výskytem jQuery. Tento rámec pomohl poskytnout přístup k používání Javascript pro neodborníky to opět zvýšilo jeho popularitu.
Jednou z nejzajímavějších věcí, které se mohou zdát velmi komplikované, je výběr děti živluKdyž mluvíme o hierarchické struktuře, můžeme mluvit o rodině, kde je otec nejvyšším živlem a jeho děti jsou prvky, které jsou ovládány pod jeho pláštěm nebo ochranou.
Řekněme například, že máme neuspořádaný seznam nebo prvek „Je logické si myslet, že elementy jsou jejich děti že může obsahovat, pokud chceme vybrat prvek Konkrétní seznam se může zdát jako velmi složitý úkol, ale s jQuery můžeme toho dosáhnout velmi jednoduchým a čistým způsobem.
MetodyChcete -li to provést, musíme našemu nadřazenému prvku poskytnout jedinečný identifikátor a poté zavolat metodu na jeho selektoru děti (), tím získáme pozici, na kterou můžeme s metodou jít každý () každé z jeho dětí.
Podívejme se v následujícím kódu na malý příklad toho, o čem mluvíme:

 Manipulace DOM s JQuery

Syn 1
Syn 2
Syn 3

Vyzkoušet 

Nejprve začneme zařazením jQuery z CDN oficiální, díky tomu nemáme potřebu ukládat soubor se zdrojovým kódem do našeho počítače, takže s prohlížečem a připojením k Internet můžeme použít tento příklad.
Poté vytvoříme malý skript, kde označíme, že když kliknete na prvek s id Start kód uvnitř se spustí.
Kód, který má být spuštěn, jednoduše vyjadřuje, že prvek s id musí být prohledán Táto a na tento volič použijeme metodu děti () lokalizovat své děti a nakonec metodou každý () Projdeme každý z nich, v případě kódu jsou tři, které nám umožní vydat se na cestu, a to by nám mělo ukázat text, který každý z nich obsahuje. Podívejme se, jak výše uvedený kód funguje v našem prohlížeči:

Po kliknutí na tlačítko vyzkoušet můžeme vidět první Upozornění:

ZVĚTŠIT

Pokud budeme pokračovat v zavírání výstrah, uvidíme všechny podřízené prvky obsažené v hierarchické struktuře:

ZVĚTŠIT

Jak jsme mohli vidět, manipulace s prvky ve struktuře naší stránky není nijak složitá, toto je jen malá ukázka, která nám dává otevřená ústa tomu, co v tomto tutoriálu budeme nadále vidět.
Přestože je hledání podřízených prvků docela užitečné, existuje metoda, která nám umožňuje provádět přímější vyhledávání pomocí jít, vlny lekce. Odkazujeme na metodu najít (), tato metoda najde všechny shody podřízených prvků selektoru, který ji vyvolá.
S tímto můžeme mít skvělý a zavolej a najít () na něm lokalizovat zejména třídy nebo id, se kterými se dostáváme k dalšímu bodu.
Vstřikovat stylyJakmile najdeme požadovanou položku v SLUNCE, mnohokrát nechceme vytisknout jeho obsah, pokud jej nějakým způsobem nezvýrazníme, zajímavým způsobem je přidání stylu k uvedenému prvku, což nám umožní manipulovat s CSS naší stránky nepřímo a abychom na ní mohli zvýraznit důležité prvky, a tak můžeme v našem dokumentu vidět něco dynamičtějšího HTML.
Podívejme se v následujícím kódu, jak implementujeme použití metody najít () a poté styl injekce na nalezených prvcích se tímto způsobem můžeme přiblížit něčemu, co můžeme dát užitečné v reálném životě:

 Manipulace DOM s JQuery

Syn 1
Syn 2
Syn 3

Vyzkoušet 

V tomto kódu, pokud se podíváme, máme něco velmi podobného předchozímu triku, změnili jsme to, že na prvním místě je zde obsah štítku místo procházení dětí prvku, používáme metodu najít () k vyhledání prvku ve třídě zvýraznit a k tomuto prvku metodou css () Chystáme se do něj vložit styly, v tomto případě jej nastavíme jako červenou barvu pozadí.
Podívejme se, jak to vypadá v našem prohlížeči, jakmile klikneme na tlačítko vyzkoušet:

Stejně jako jsme byli schopni lokalizovat dítě prvku, můžeme dosáhnout efektu v opačném smyslu hierarchie, tj. syna, můžeme najít otce. To je velmi užitečné v dlouhých seznamech, které jsou generovány dynamicky, protože tímto způsobem můžeme zvýraznit nebo použít rodiče podle našich potřeb.
Metoda rodičů ()K tomu máme metodu rodiče () že podobným způsobem děti () vyhledá nadřízeného voliče, který je vyvolán. Pokud k tomu přidáme metodu each (), přineseme veškerou dědičnost prvku, například pokud se jedná o přineseme prvek a pokud půjdeme dále v hierarchii k prvku a tak dále, dokud se k prvku nedostaneme, protože podle hierarchie jsou všichni rodiče tím, jak jsou obsaženi.
Podívejme se v následujícím kódu, jak můžeme vytvořit skript jQuery což nám umožňuje dosáhnout tohoto cíle ukázat všem rodičům námi zvoleného prvku:

 Manipulace DOM s JQuery

Syn 1
Syn 2
Syn 3

Vyzkoušet 

Struktura je velmi podobná předchozím příkladům, nicméně zde provedeme změnu, tentokrát použijeme třídu zvýraznit jako volič a použijeme metodu rodiče () a pak s každým () můžeme projít hierarchií zevnitř ven.
Podívejme se, jak výše uvedený kód vypadá, když jej spustíme v prohlížeči:

ZVĚTŠIT

Stejně jako předchozí příklad, pokud stále zavíráme Upozornění uvidíme všechny rodiče živlu, dokud se nedostaneme k HTML.
Předchozí trik nám pomáhá vytvořit genealogický strom prvku, možná nám pomůže při ladění našeho HTML, ale co se stane, pokud chceme získat konkrétního rodiče, například pokud máme několik záznamů, ale chceme, aby byl zvýrazněn rodič konkrétního rodiče.
Neměli bychom si dělat starosti, v tomto případě máme metodu rodiče Do ()Pomocí toho můžeme určit místo příjezdu a můžeme provést a HTML injekce Abychom zvýraznili celý blok, podívejme se na následující kód, kde jsme aplikovali tyto znalosti:

 Manipulace DOM s JQuery

Syn 1
Syn 2
Syn 3

Vyzkoušet 

Pokud si všimneme, že tento kód je mírnou variací předchozího, hlavní změna nastane ve volání metody, kterou jsme právě vysvětlili rodiče Do () ke kterému jsme prošli div, což je místo, kde hledání rodičovských prvků selektoru, který ovlivňujeme, se zastaví.
Abychom ukázali, že vše funguje, trochu jsme injekčně aplikovali HTML Abychom označili sekci červeně, podívejme se, jak to vypadá v našem prohlížeči, když klikneme na vyzkoušet:

Potom vidíme, že pouze část s div je červeně zbarvená, což ukazuje, že jsme zastavili hledání rodiče v konkrétním prvku, dokonce i přímého rodiče, jako je prvek což nám ukazuje sílu hledání Strom DOM.
Tím jsme náš tutoriál dokončili, je to jen malá ukázka veškeré síly jQuery manipulovat s SLUNCE od našich HTML„Důležité je, že musíme hodně trénovat a velmi dobře číst dokumentaci, protože s ní budeme moci získat další znalosti a zdroje, abychom mohli zvýšit naši úroveň rozvoje.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod