Úvod do jQuery (časť 2): Metódy a funkcie

Reklama

Toto je súčasť pokračujúceho úvodného úvodu do programovacej série jQuery web. Časť 1 sa venovala základom jQuery Výukový program jQuery - Začíname: Základy a výberyMinulý týždeň som hovoril o tom, aké dôležité je jQuery pre každého moderného webového vývojára a prečo je to úžasné. Tento týždeň si myslím, že je čas, aby sme si zašpinili ruky nejakým kódom a zistili sme, ako ... Čítaj viac o tom, ako ho zahrnúť do svojho projektu, a výberových pracovníkov. V časti 2 budeme pokračovať v základnom používaní, keď sa pozrieme na niektoré metódy, ktoré môžete vykonať na týchto prvkoch DOM, a niektoré ďalšie jazykové základy.

$(volič).metóda();

Ak si spomeniete na lekciu 1, jedná sa o základnú štruktúru manipulácie DOM v jQuery. Manipulácia s DOM nie je jedinou vecou, ​​ktorú s jQuery môžete robiť, ale je to najjednoduchšie miesto, odkiaľ začať a najbežnejšie, preto sme si vybrali.

Ak chcete rýchlo zhrnúť, volič časť tohto príkazu vám umožňuje používať názvy prvkov, triedy alebo ID prvkov podobné CSS na vyhľadanie častí DOM. Napríklad, chytiť všetky s názvom triedy

.hidden, použili by sme:

$ ( 'Div.hidden')

Druhou časťou tejto rovnice je metóda účinkovať v týchto DIV, akonáhle sme ich našli (ak vôbec existujú); alebo to môže byť iba jedna „zodpovedajúca“ položka). Nezabudnite, že jQuery vráti iba jeden prvok pre výber ID, pretože ID by sa mali vzťahovať na jedinečné položky. Ak máte niečo viac, musíte ho definovať ako triedu v CSS.

Na metódy potom; Čo vlastne môžete robiť s prvkami DOM?

Najprv som vás predstavil CSS metódu naposledy, aby ste ju mohli použiť na testovanie. Formát je jednoduchý:

CSS ( 'vlastnosť', 'hodnota');

Čokoľvek, čo sa dá definovať pomocou CSS, je preto možné upraviť pomocou jQuery - farby, priehľadnosť, umiestnenie, veľkosť - aby sme vymenovali aspoň niektoré z nich. Zmena je okamžitá.

Ak by ste radšej animovali zmeny CSS, mám pre vás skvelú správu; volá sa aj metóda .animate (). Je to však trochu zložitejšie:

.animate ({ 'vlastnosť': 'hodnota'}, rýchlosť);

Ako príklad:

.animate ({ 'zákal': '0,25', 'výška': '100 pixelov'}, 'rýchlo');

V tomto okamihu by ste sa mohli pýtať, na čo sú zložené rovnátka; nazývajú sa „doslovný objekt“ a zvyčajne sa používajú na vytvorenie zoznamu property: value páry, niečo ako indexované pole ak pochádzate z iných jazykov. Veľa ich využijete v jQuery, takže to poviem znova - zvyknite si správne skontrolovať zatvorené zátvorky a rovnátka!

Odhlásiť sa táto strana pre veľa pracovných príkladov animovanej metódy.

Okrem manipulácie s vlastnosťami CSS niečoho môžete obsah upraviť aj pomocou .metódy text (), .html () a .val () (val je pre obsah prvkov formulára). Tieto metódy pôsobia ako obidve sadaters a getpohonu; ak neurčíte žiadnu hodnotu, získajú aktuálnu hodnotu. Ak zadáte hodnotu, nahradí aktuálnu hodnotu.

Tu je niekoľko rýchlych príkladov:

Získajte aktuálnu hodnotu poľa pre meno vo formulári komentára a priraďte ho premennej comment_name:

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

Nastavte hodnotu na hodnotu chytenú od COMMENTER_NAME:

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

Potom máme obrovský výber metód na klonovanie, pohybovanie sa, vkladanie alebo odstraňovanie častí DOM. Vaša fantázia je skutočne limit.

Povedzme, že ste chceli dynamicky vkladať blok reklamy s obrázkami každé každé 3. v stĺpci obsahu, ale robíte to v Javascripte, aby bolo možné počiatočné načítanie stránky udržiavané čisté. Znie to dosť komplexne, však? Ťažko ...

$('div # obsahp: n-dieťa (3n)').po ( '');

Ak to urobíme, požiadali sme jQuery, aby:

1. Nájdite priehradku s identifikátorom „obsahu“
2. Nájdite p obsiahnuté v tomto div
3. Filtrujte na každú 3. str pomocou pseudo selektora pre n-dieťa (viac tu)
4. Vložte ľubovoľný obrázok po každý zodpovedajúci prvok

Nemôžem tu vymenovať všetky metódy a nechcel by si ich prečítať. Ide o to, že existuje spôsob, ako urobiť takmer všetko, čo vás napadne, pokiaľ ide o manipuláciu skontrolujte API pre jedného, ​​ktorý môžete použiť.

Nezabúdajte tiež na to, že existuje viac ako jeden spôsob, ako niečo urobiť. Ak napríklad nemôžete zúžiť správny objekt na insertAfter (), možno premýšľať o nájdení Ďalšie dieťa dole a pomocou insertBefore () miesto.

Metóda reťazenia

A konečne dnes si povieme niečo o reťazení metód, v podstate len preto, že je to úžasné. Najprv zvážme nasledujúce riadky kódu:

$ ( 'Nav # menu') fadeIn ( 'rýchle'). $ ( 'Nav # menu') addClass ( 'beingShown.'); $ ( 'Nav # menu') css ( 'margin-right', '10px').

To znie dosť rozumne, však? To isté však môžete urobiť iba v jednom riadku:

$ ( 'Nav # menu') fadeIn ( 'rýchle') addClass ( 'beingShown') css ( 'margin-right', '10px') ...

To robí presne to isté a nazýva sa to reťazenie metód. Pretože takmer všetky metódy jQuery sami vracajú objekt jQuery, každý z nich sa môže vložiť do nasledujúceho. To znamená menej kódu - čo je vždy dobrá vec - ale v skutočnosti tiež beží rýchlejšie.

Prečo? Zakaždým, keď vyvoláte základné jQuery $ príkaz a selektor, požiadate ho, aby prehľadával strom DOM a hľadal zodpovedajúci prvok. Keď reťazíte metódy, nepotrebujete sa ďalej odvolávať na DOM, pretože vie, kde sú teraz, a metódu môžete vykonať okamžite.

To je pre dnešok a myslím si, že sme sa pravdepodobne dosť veľa zaoberali. Teraz by ste mali byť vyzbrojení schopnosťou vykonávať niektoré veľmi ťažké manipulácie s DOM, takže choďte, prepojte svoje metódy a urobte zo stránky skutočný chaos. V súčasnosti budete chcieť umiestniť skripty do päty, aby sa dal zvyšok stránky načítať. Budúci týždeň sa budeme zaoberať otázkou, ako jQuery robiť veci, len ak je všetko správne naložené udalosťami a je zvedavý prípad anonymných funkcií.

Ak ste práve narazili na tento príspevok, pravdepodobne ste nejaký webový vývojár a možno budete chcieť vyskúšať všetky naše WordPress a blogovanie články, alebo dokonca naše Najlepšie doplnky WordPress Najlepšie doplnky WordPress Čítaj viac str.