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

reklama

Toto je část úvodního úvodu do programovací série webů jQuery. Část 1 pokrývala základy jQuery Výukový program jQuery - Začínáme: Základy a výběrMinulý týden jsem mluvil 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, jak ... Přečtěte si více o tom, jak ji zahrnout do vašeho projektu, a výběrů. 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.

$(volič).metoda();

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

Chcete-li rychle shrnout, volič část tohoto příkazu umožňuje použít názvy prvků, třídy nebo ID prvků podobné CSS pro nalezení částí DOM. Například chytit všechny s názvem třídy .skrytý, použili bychom:

$ ('div.hidden')

Druhá část této rovnice je metoda hrát na těchto DIV, jakmile je najdeme (pokud vůbec existují; nebo to může být pouze jedna „odpovídající“ 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í to být definováno jako třída v CSS.

Na metody pak; co stejně můžete dělat s prvky DOM?

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 byste raději animovali 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ší:

.animate ({'property': 'value'}, speed);

Jako příklad:

.animate ({'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 „doslovný objekt“ 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!

Překontrolovat tato stránka pro spoustu pracovních příkladů animované metody.

Kromě manipulace s vlastnostmi CSS něčeho můžete upravit také 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 popadl od commenter_name:

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

Potom 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 vkládat blok reklamního obrázku po každé třetí odstavec ve sloupci obsahu, ale děláte to v Javascriptu, aby bylo možné počáteční načtení stránky udržoval čisté. Zní to docela složitě, že? Stěží…

$('div # contentstr: n-dítě (3n)').po('');

Když jsme to rozebrali, požádali jsme jQuery, aby:

1. Najděte div s ID „obsahu“
2. Najděte p obsažené v tomto div
3. Filtrujte na každou 3. str pomocí pseudo selektoru n-dítěte (více zde)
4. Vložte libovolný obrázek po každý odpovídající prvek

Tady nemůžu vyjmenovat všechny metody a ani byste to nechtěli přečíst. Jde o to, že existuje způsob, jak udělat téměř cokoli, na co si vzpomenete, pokud jde o manipulaci, takže zkontrolujte API pro jednoho můžete použít.

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 () namísto.

Metoda řetězení

A konečně dnes si řekneme krátce 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, nemusíte se dále odkazovat 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 jQuery dělat věci, pouze když se vše správně načte událostmi a zvědavým případem anonymních funkcí.

Pokud jste právě narazili na tento příspěvek, pravděpodobně jste webový vývojář nějakého druhu a možná budete chtít vyzkoušet všechny naše WordPress a blogování články, nebo dokonce naše Nejlepší WordPress Pluginy Nejlepší WordPress Pluginy Přečtěte si více stránka.