Minulý 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 úžasné. Tento týždeň si myslím, že je načase, aby sme si zašpinili ruky nejakým kódom a naučili sme sa, ako jQuery skutočne využívať v našich projektoch.

Poviem to teraz - na používanie jQuery sa nemusíte učiť Javascript. Je to asi najlepšie, keď budete jQuery chápať ako evolúciu Javascriptu - lepší spôsob, ako to urobiť - ako jednoducho knižnicu, ktorá pridáva funkcie. Akýkoľvek požadovaný JavaScript bude vyzdvihnutý na ceste. Predpokladá sa však, že ako webový vývojár máte celkom dobré znalosti HTML a CSS (a ak nie, tu je užitočný bezplatný sprievodca xHTML!).

Objektový model dokumentu

jQuery je o prechode a manipulácii s ROZSUDOK - D pomník ALEBO bject M odel. DOM je hierarchická stromová reprezentácia stránky, ktorú vytvorili prehliadače po prečítaní celého kódu HTML. V jQuery použijeme terminológiu ako rodič , deti a súrodenci pomerne často, takže by ste mali mať predstavu o tom, čo to znamená vo vzťahu k DOM.

Tento jednoduchý diagram odškoly w3celkom dobre vysvetľuje pojmy. Mali by ste vidieť, že rodič prvku je, zatiaľ čo prvok má bezprostredný

jQuery code codes here`

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

To je všetko, v názve tam hore. To je základná štruktúra jedného kusu kódu jQuery na manipuláciu s DOM. Ľahké, však?

Thevoličhovorí jQuery, aby našiel veci, ktoré zodpovedajú tomuto pravidlu, a je rovnaký ako selektory CSS (a potom niektoré ďalšie navrchu). Rovnako ako v CSS by ste teda všetky odkazy upravili pomocou

a { }

To isté by sa urobilo v jQuery ako

$('a')

To je možné vykonať pre akékoľvek prvky HTML - div, h1, span - čokoľvek. Špecifickejšie môžete použiť aj triedy a ID CSS.

Napríklad na nájdenie všetkých odkazov s triedou „findme“ by ste použili:

$('a.findme')

Typ prvku nemusíte zadávať zakaždým, ale ak to urobíte, pravidlo sa tým spresní. Mohli ste práve povedať

$('.findme')

ktoré by zodpovedalo všetkému s triedou Nájdi ma , či už to bol odkaz alebo nie.

Ak chcete použiť pomenovaný prvok ID, použite # namiesto toho sa podpíšte. Kľúčovým rozdielom je, že selektor ID vyberie iba jeden objekt, zatiaľ čo volič tried môže nájsť viac ako jeden.

ako používať 3D tlačiareň krok za krokom

$('#something')

V zásade, ak to dokážete v CSS, urobí to aj jQuery. V skutočnosti môžete tiež použiť pomerne zložité pseudo selektory v štýle CSS3 ako: prvé

$('body p:first')

Čo by zabralo odsek stránky. Nájdete tu aj prvky s určitými atribútmi. Zoberme si tento príklad; chceme na stránke nájsť všetky odkazy, na ktoré smerujú interne použiť a nejakým spôsobom ich zvýrazniť. Takto sme ich mohli nájsť:

$('a[href*='makeuseof']')

Nie je to v pohode? No myslím, že je.

Váš ďalší prístav by mal byť Dokumentácia rozhrania API jQuery pre selektory . Je to obrovský zoznam všetkých rôznych typov selektorov, ktoré sú k dispozícii na použitie, a nikto by nečakal, že sa ich všetky naučíte.

Ďalšia časť rovnice jemetóda- čo s tými vecami robiť, keď ich všetky nájdete - ale to necháme na ďalšiu lekciu. Ak však chcete začať s vyskúšaním rôznych voličov teraz, navrhujem, aby ste sa držali nasledujúcej metódy css. Na to sú potrebné dva parametre - CSS názov nehnuteľnosti , a nový hodnotu priradiť k tejto vlastnosti. Ak chcete dať všetkým odkazom červenú farbu pozadia, postupujte takto:

$('a').css('background-color','red');

Dosť jednoduché! Aj keď to nemusí byť praktické, umožní vám to ľahko vidieť všetky prvky umiestnené pomocou vašich voličov. Teraz choďte a zvoľte - DOM na vás čaká.

Dúfam, že tento návod bol pre vás užitočný; Snažil som sa to čo najjednoduchšie pochopiť. Neváhajte sa opýtať na akékoľvek otázky alebo zanechať spätnú väzbu, ale uvedomte si, že určite nie som elitný ninja jQuery.

zdieľam zdieľam Tweet E -mail 5 tipov, ako nabiť svoje počítače VirtualBox Linux

Ste unavení z nízkeho výkonu, ktorý ponúkajú virtuálne počítače? Tu je to, čo by ste mali urobiť, aby ste zvýšili výkon svojho VirtualBoxu.

Čítajte ďalej Súvisiace témy

Webová kultúra
Vývoj webových aplikácií
JavaScript
Programovanie
jQuery

O autorovi James Bruce(707 publikovaných článkov)

James má bakalársky titul v odbore umelá inteligencia a je certifikovaný CompTIA A+ a Network+. Keď nie je zaneprázdnený ako editor recenzií hardvéru, baví ho hry LEGO, VR a stolné hry. Pred nástupom do MakeUseOf bol svetelným technikom, učiteľom angličtiny a inžinierom dátového centra.

Viac od Jamesa Brucea

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber