Úvod do jQuery (část 2) Metody a funkce

Toto je část úvodního úvodu do programovací série webů jQuery. Část 1 se týkala základů jQuery - Výukový program jQuery - Začínáme: Základy a výběry - Výukový program jQuery - Začínáme: Základy a výběry, minulý týden jsem hovořil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili jsme, jak… jak to začlenit do vašeho projektu a selektorů. V části 2 budeme pokračovat v základním používání, když se podíváme na některé metody, které můžete na těchto prvcích DOM provést, a některé další jazykové základy.

$ (selector) .method ();

Pokud si vzpomenete z lekce 1, jedná se o základní strukturu manipulace DOM v jQuery. Manipulace s DOM není jediná věc, kterou můžete s jQuery dělat, ale je to nejjednodušší místo, odkud začít a nejběžnější, proto jsme si vybrali.

Pro rychlou rekapitulaci vám část selektoru v tomto příkazu umožňuje použít názvy elementů, třídy nebo ID elementů podobné CSS pro nalezení částí DOM. Například chytit všechny s názvem třídy .skrytý, použijeme:

$ ('div.hidden')

Druhou částí této rovnice je metoda, kterou na těchto DIV provedeme, jakmile je najdeme (pokud vůbec existují, nebo mohou být pouze jednou) “vhodný” položka). Pamatujte, že jQuery vrátí vždy pouze jeden prvek pro výběr ID, protože ID by se měly vztahovat na jedinečné položky. Pokud budete mít více než jedno, musí být definována jako třída v CSS.

Poté metodám; co stejně můžete dělat s prvky DOMu?

Nejprve jsem vás představil .css metodu naposledy, abyste ji mohli použít pro testování. Formát je jednoduchý:

.css ('vlastnost', 'hodnota');

Cokoli definovatelné pomocí CSS lze proto upravit pomocí jQuery - barvy, průhlednost, umístění, velikost - abychom jmenovali jen několik. Změna je okamžitá.

Pokud raději oživíte změny CSS, mám pro vás skvělé zprávy; existuje také metoda nazývaná .animovat(). Je to ale trochu složitější:

.animovat ('vlastnost': 'hodnota', rychlost);

Jako příklad:

.animovat ('neprůhlednost': '0,25', 'výška': '100px', 'rychlý');

V tomto okamžiku se možná budete ptát, k čemu jsou složené rovnátka; Říká se jim “objekt doslovný”, a obvykle se používají k vytvoření seznamu hodnota majetku páry, něco jako indexované pole pokud přicházíte z jiných jazyků. Budete je hodně používat v jQuery, takže to řeknu znovu - zvykněte si na řádnou kontrolu uzavřených závorek a závorek!

Podívejte se na tuto stránku, kde najdete spoustu pracovních příkladů animované metody.

Stejně jako manipulaci s vlastnostmi CSS něčeho, můžete upravit jeho obsah pomocí .metody text (), .html () a .val () (val je pro obsah prvků formuláře). Tyto metody fungují jako obojí souborters a dostatters; Pokud nezadáte hodnotu, získá aktuální hodnotu. Pokud zadáte hodnotu, nahradí aktuální hodnotu.

Zde je několik rychlých příkladů:

Získejte aktuální hodnotu pole pro jméno ve formuláři komentáře a přiřaďte jej proměnné comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Nastavte hodnotu na hodnotu získanou od commenter_name:

$ ('span.name'). text (commenter_name);

Pak máme obrovský výběr metod klonování, pohybu kolem, vkládání nebo mazání částí DOM. Vaše představivost je opravdu limit.

Řekněme, že jste chtěli dynamicky vložit blok reklamního obrazu po každém každém třetím odstavci ve sloupci obsahu, ale děláte to v Javascriptu, aby bylo možné udržet čisté počáteční načítání stránky. Zní to docela složitě, že? Stěží…

$ ('div # content p: nth-child (3n)'). po ('
Také mějte na paměti, že existuje více než jeden způsob, jak něco udělat. Pokud například nemůžete zúžit správný objekt insertAfter (), možná přemýšlet o nalezení další dítě dole a používání insertBefore () místo toho.
Metoda řetězení
Konečně dnes, pojďme se krátce zmínit o řetězení metod, v podstatě jen proto, že je to úžasné. Nejprve se podívejme na následující řádky kódu:
$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');
To zní dost rozumně, že? Ale to samé můžete udělat v jednom řádku:
$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');
To dělá přesně to samé a nazývá se řetězení metod. Protože téměř všechny metody jQuery vracejí objekt jQuery samy o sobě, každý z nich se může vrhnout do dalšího. To znamená méně kódu - což je vždy dobrá věc - ale ve skutečnosti také běží rychleji.
Proč? Pokaždé, když vyvoláte základní jQuery $ příkaz a selektor, žádáte, aby prohledával strom DOM a hledal odpovídající prvek. Když provádíte řetězení metod, nepotřebujete příliš odkazovat zpět na DOM, protože ví, kde jsou nyní, a může metodu provést okamžitě.
To je pro dnešek, a myslím, že jsme asi hodně pokryli. Nyní byste měli být vyzbrojeni schopností provádět některé velmi těžké manipulace s DOM, takže jděte, zřetězte své metody dohromady a udělejte ze stránky skutečný nepořádek. Prozatím budete chtít umístit skripty do zápatí, aby se dal zbytek stránky načíst. Příští týden se budeme zabývat otázkou, jak dělat jQuery dělat věci, pouze pokud se vše správně načte událostmi a zvědavý případ anonymních funkcí.
Pokud jste právě narazili na tento příspěvek, jste pravděpodobně webový vývojář nějakého druhu a možná budete chtít vyzkoušet všechny naše WordPress a články o blogování, nebo dokonce naši nejlepší stránku WordPress Pluginy.