✅ Manipulace CSS s jQuery

Obsah

S jQuery Na úrovni interakce s uživatelem můžeme dosáhnout mnoha věcí, včetně manipulace s Strom DOMJedna z věcí, které vás možná nenapadají, je Manipulace s CSS.
Manipulací s CSS můžeme dosáhnout změn v prvcích, které vidíme na obrazovce, velmi přirozeným a plynulým způsobem, aniž bychom se uchýlili ke komplexním funkcím v Javascript čistý, jako jsme to museli udělat před několika lety.
The SLUNCE je způsob, jakým je náš dokument organizován HTML, nám umožňuje dát předvídatelnou a hierarchickou strukturu tomu, co chceme zobrazit na obrazovce. To je velmi důležité, protože je to způsob, jakým prohlížeč interpretuje dokumenty, ale existuje ještě jeden aspekt, který můžeme využít ve svůj prospěch; to je, aby bylo možné lokalizovat prvky, aby s nimi mohly jednat.
Když tedy potřebujeme provést změnu na konkrétním prvku, díky SLUNCE Můžeme použít různé způsoby, jak jej lokalizovat a tím manipulovat s jeho obsahem, stylem nebo ho dokonce odstranit z dokumentu v reálném čase.
To je velmi praktické ve chvílích, kdy potřebujeme zvýraznit prvek při provádění akce v dokumentu nebo při obdržení odpovědi, a tedy nemusíme stránku měnit ani ji úplně obnovovat.
Jeden z nejlepších postupů při vytváření stylů CSS je používat třídy, pomocí kterých můžeme vytvářet aspekty, které pak můžeme aplikovat nezávisle na různé prvky, aniž bychom se museli uchýlit k přepisování kódu znovu a znovu.
Atribut třídyAby prvek převzal tyto styly, musíme jednoduše umístit do jeho atributu třída = "" název odpovídající třídy a pokud je styl, který v něm píšeme, vhodný pro prvek, bude jej odrážet.
OmezeníVšechno zní skvěle, ale existuje určité omezení, styl se načte při zvedání stránky a pokud potřebujeme zahrnout nový styl, normálně by se stránka musela znovu načíst, což by uživateli způsobilo přerušení navigace.
jQuery nám umožňuje tyto limity obejít tím, že nám dává možnost začlenit uvedené třídy v reálném čase do dokumentu, aniž bychom museli znovu načíst celou stránku, k tomu musíme jednoduše použít metodu addClass () a předejte mu název třídy CSS které chceme přidat k okamžiku.
Podívejme se krok za krokem na malý praktický příklad a poté uvidíme kompletní kód popsaného:
1- Nejprve vytvoříme soubor s názvem add-classes.html a zahrneme knihovnu jQuery, z praktických důvodů provádíme přímý hovor od CDN adekvátní, to vyžaduje připojení k internetu, nicméně soubor můžeme uložit a doručit lokálně.
2- Potom vytvoříme naše třídy CSSAbychom mohli změnu vidět lépe, vytvořili jsme dvě třídy, každá změní barvu pozadí prvku, na který je aplikována, a každá třída bude mít jinou barvu.
3- V těle našeho dokumentu vytvoříme dva a každému z nich přiřadíme ID, pomocí kterého je můžeme identifikovat v rámci SLUNCE snadno pomocí voličů jQuery.
4- Poté vytvoříme prvek, ke kterému v případě při kliknutí řekneme mu, aby zavolal funkci Javascript.
5- Nakonec jsme vybudovali naši funkci Javascript, toto jednoduše zavolá každý prvek jeho voličem a metodou addClass () Přidá třídu těch, které jsme původně vytvořili, když to uděláme, okamžitě uvidíme změnu.
Protože jsme popsali, co bychom měli dělat, uvidíme kód takový, jaký byl:

Přidejte třídyNáš první jQuery CSS blok
Náš druhý jQuery CSS blok

Kliknutím změníte třídy

Jak vidíme, je to docela jednoduché a když to provedeme v našem prohlížeči, uvidíme, jak jsou před kliknutím na tlačítko prvky normální a po kliknutí změní barvu a přidají se odpovídající třídy. Podívejme se na následujícím obrázku, na co odkazujeme:

ZVĚTŠIT

Poté, co klikneme na tlačítko, můžeme si přechod na naší stránce představit:

Pokud můžeme přidat třídu, musíme být také schopni udělat opak, tj. Odstranit ji jQuery nám poskytuje metodu removeClass (), a to funguje na principu velmi podobném předchozímu příkladu, jednoduše umístíme prvek a řekneme mu metodou, že musí odstranit uvedenou třídu, pokud ji má, bude odstraněna, jinak se nic nestane.
Aby byly věci trochu zajímavější, přidáme použití jiné metody a je to metoda kontroly třídy, toto je hasClass () to nám umožňuje ověřit, zda prvek má určitou třídu, pomocí toho můžeme použít kondicionály a provádět různé experimenty, které diktuje naše logika.
Za tímto účelem vytvoříme malou stránku, na které budeme mít několik funkcí, funkce ověří, zda prvek má konkrétní třídu, pokud ano, bude odstraněn, ale pokud je odpověď záporná, přidáme ji .
To nám dává možnost si trochu pohrát se styly dynamicky, protože v reálném čase vidíme, zda přidáme nebo odebereme určité hodnoty.
1- Na základě předchozího příkladu se budeme soustředit pouze na část, kde jsme funkci napsali Javascript.
2- Uvnitř funkce vytvoříme dvě podmíněné, v první budeme pracovat s prvním prvkem, nejprve se zeptáme s podmíněným blokem pokud () pokud máte povolanou třídu první třídaPokud je odpověď kladná, použijeme metodu remove class, ale pokud třídu nemáme, přidáme ji, čímž získáme efekt přepínač.
3- Opakujeme předchozí krok pro druhý prvek a tím docílíme, že se chová stejně.
Podívejme se na nový kód, který jsme vytvořili níže:

Přidejte třídyNáš první jQuery CSS blok
Náš druhý jQuery CSS blok

Kliknutím změníte třídy

Nyní se podívejme, jak je provádění našeho programu, na tomto prvním obrázku uvidíme, jak náš dokument vypadá HTML V počátečním stavu jsme zahrnuli konzolu Chrome abychom si všimli, jak se prvky mění:

ZVĚTŠIT

Nyní se podívejme, co se stane, když klikneme na tlačítko a proběhne přechod:

ZVĚTŠIT

Na první pohled by se mohlo zdát, že tento dokument funguje úplně stejně jako ten první, který jsme vytvořili v tomto tutoriálu, nicméně pokud klikneme znovu, uvidíme, jak bude metoda fungovat. removeClass ().
Také jsme zkontrolovali, jak metoda hasClass () funguje, možná nedělá nic, co uživatel vidí, ale dává nám možnost spustit na něm podmíněné HTML.
Je tu něco, co nám to umožňuje jQuery a to je přepínání mezi třídami, k tomu používáme metodu toggleClass (), s ním můžeme našemu prvku určit, že když spustíme událost, bude trvat třídu, pokud již má druhou v seznamu.
UžitečnostTo je opravdu užitečné, když chceme pracovat na změnách stavu, je to určitá zkratka, abychom se vyhnuli psaní podmíněné struktury metodou hasClass (). Jeho aplikace je velmi podobná metodám, které jsme dosud viděli, jediným rozdílem je, že místo třídy projdeme dvě oddělené mezerou.
Podívejme se, jak změníme pouze funkci Javascript našeho testovacího dokumentu, abychom začlenili tuto novou metodu:
1- K našim prvkům přidáme počáteční třídu, tímto způsobem budeme mít výchozí bod pro změny.
2- Pak v rámci naší funkce Javascript jednoduše použijeme metodu toggleClass () na každý z prvků prostřednictvím jeho voliče.
Podívejme se, jak náš kód vypadá s použitými změnami:

Přidejte třídyNáš první jQuery CSS blok
Náš druhý jQuery CSS blok

Kliknutím změníte třídy

Nyní se podívejme, co se stane, když dokument načteme poprvé:

Nyní se podívejme, co se stane, když znovu klikneme na tlačítko:

ZVĚTŠIT

Pokud budeme nadále klikat na tlačítko, třídy se budou nadále bez omezení střídat.
S tímto dokončujeme tento tutoriál, naučili jsme se, jak můžeme manipulovat s CSS přímo s jQueryDíky tomu můžeme začít mít lepší nápady, jak naše uživatelská rozhraní obohatit o funkce.