jQuery Tutorial - Početak rada: osnove i birači

jQuery Tutorial - Početak rada: osnove i birači

Prošli tjedan sam govorio o tome koliko je jQuery važan za svakog modernog web programera i zašto je to super. Ovaj tjedan, mislim da je vrijeme da uprljamo ruke s nekim kodom i naučimo kako zapravo koristiti jQuery u našim projektima.





Reći ću ovo sada - ne morate učiti Javascript da biste koristili jQuery. Vjerojatno bi bilo najbolje ako mislite o jQueryju kao evoluciji Javascripta - boljem načinu za to - nego samo o knjižnici koja dodaje funkcionalnost. Bilo koji Javascript koji vam je potreban bit će pokupljen usput. Pretpostavlja se, međutim, da kao web programer imate prilično dobro znanje o HTML -u i CSS -u (a evo i korisnog besplatnog xHTML vodiča ako ne!).



Objektni model dokumenta

jQuery se bavi prelaskom i manipulacijom OSUDA - the D ocument ILI bject M odel. DOM je hijerarhijski prikaz stranice u obliku stabla, koji su izgradili preglednici nakon čitanja cijelog HTML koda. U jQueryju koristit ćemo terminologiju poput roditelj , djeca , i braća i sestre dosta često, pa biste trebali imati ideju što to znači u odnosu na DOM.





Ovaj jednostavan dijagram izw3školeprilično dobro objašnjava pojmove. Trebali biste moći vidjeti da je roditelj elementa, dok je element ima neposrednu

brat ili sestra.

Početak rada: Dodavanje jQueryja

Najnovija verzija jQueryja iznosi oko 91 KB kada se komprimira, pa dodaje otprilike istu težinu stranice kao mala fotografija ili snimak zaslona. Najjednostavniji način da uključite jQuery u svoj projekt je da zalijepite referencu na najnoviju hostiranu verziju u odjeljak zaglavlja web lokacije:



Međutim, imajte na umu da ako koristite Wordpress, to može uzrokovati probleme jer već ima svoju kopiju knjižnice jQuery. Dodaci mogu zahtijevati učitavanje, a Wordpress će inteligentno učitati jQuery samo jednom, bez obzira na to koliko je dodataka to zatražilo.

Dodate li sljedeći redak u svoj funkcije.php temu, dodat ćete još jedan zahtjev za njeno uključivanje. Wordpress će tada znati uvijek učitavati ako je vaša tema aktivna.





kako dobiti kanale na roku bez kabela
wp_enqueue_script('jquery');

Druga stvar koju treba imati na umu je da će se, kada se jQuery doda standardnom metodom, učitati kao $ . Svemu što radite s jQueryjem prethodit će ovaj $, na primjer:

$.ajax

ili



$('#header')

Međutim, kada se jQuery učitava putem Wordpressa, sve se radi pomoću varijable jQuery umjesto $, pa na primjer:

jQuery('#header')

Iako to nije veliki problem pri pisanju vlastitog koda, to znači da će izrezivanje i lijepljenje isječaka jQueryja koje nađete na webu biti potrebno prevesti da biste koristili jQuery umjesto $ - to je sve.

Jedan od načina da to zaobiđete je umotavanje koda u stilu $ koji vam se čini ovako:

(function($) {
// paste $ code in here
})(jQuery);

Za to je potrebno jQuery varijablu i prosljeđuje je u anonimnu funkciju kao $ . Sljedeći ću put objasniti anonimne funkcije - za sada naučimo osnovnu strukturu pomalo jQuery koda.

Da biste dodali kôd na HTML ili PHP stranicu, sve stavite u oznake, na sljedeći način:


// jQuery code codes here

$ ('selektor').metoda();

To je to, u naslovu gore. To je osnovna struktura jednog komada jQuery koda za manipulaciju DOM -om. Lako, zar ne?

Theselektorgovori jQueryju da pronađe stvari koje odgovaraju ovom pravilu, i isto je što i birači CSS -a (a zatim još neki na vrhu). Dakle, baš kao i u CSS -u s kojim biste stilizirali sve veze

a { }

U jQueryju bi se učinilo isto kao

$('a')

To se može učiniti za sve HTML elemente - div, h1, span - bilo što. Također možete koristiti CSS klase i ID -ove kako biste bili precizniji.

Na primjer, da biste pronašli sve veze s klasom 'findme', upotrijebili biste:

$('a.findme')

Ne morate svaki put navesti vrstu elementa - ali ako to učinite, to pravilo jednostavno čini specifičnijim. Mogao si samo reći

$('.findme')

što bi sve odgovaralo klasi Nađi me , bez obzira radi li se o poveznici ili ne.

Da biste koristili imenovani ID element, upotrijebite # umjesto toga potpisati. Ključna razlika ovdje je što će birač ID -a izabrati samo jedan objekt, dok birač klasa može pronaći više od jednog.

vanjski pogon ne prikazuje Windows 10
$('#something')

U osnovi, ako to možete učiniti u CSS -u, tada će to učiniti i jQuery. Zapravo, također možete napraviti neke prilično složene pseudo selektore u stilu CSS3 poput: prvo

$('body p:first')

Što bi zgrabilo odlomak stranice. Naći ćete i elemente s određenim atributima. Razmotrimo ovaj primjer; želimo pronaći sve poveznice na stranici koje interno upućuju na iskoristiti te ih na neki način istaknuti. Evo kako bismo ih mogli pronaći:

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

Nije li to super? Pa, mislim da jest.

Sljedeća luka bi vam trebala biti jQuery API dokumentacija za selektore . To je ogroman popis svih različitih vrsta birača koji su dostupni za upotrebu i nitko ne bi očekivao da ćete ih sve naučiti.

Sljedeći dio jednadžbe jemetoda- što učiniti s tim stvarima kad ih sve pronađete - ali ostavit ćemo to za sljedeću lekciju. Ako ipak želite početi isprobavati razne selektore, predlažem da se držite sljedeće css metode. Za to su potrebna dva parametra - CSS naziv nekretnine , i novi vrijednost dodijeliti toj nekretnini. Dakle, da biste svim vezama dali crvenu boju pozadine, učinite sljedeće:

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

Dovoljno jednostavno! Iako ovo možda nema nikakve praktične koristi, omogućit će vam da lako vidite sve elemente koji se nalaze pomoću vaših birača. Sada krenite i odaberite - DOM vas čeka.

Nadam se da vam je ovaj vodič bio od koristi; Pokušao sam ga učiniti što jednostavnijim i razumljivim. Slobodno postavite sva pitanja ili ostavite povratne informacije, ali imajte na umu da ja zasigurno nisam elitni jQuery nindža.

Udio Udio Cvrkut E -pošta 5 savjeta za nadopunu vaših VirtualBox Linux strojeva

Umorni ste od loših performansi koje nude virtualni strojevi? Evo što biste trebali učiniti kako biste povećali performanse VirtualBox -a.

Pročitajte Dalje Povezane teme
  • Web kultura
  • Web razvoj
  • JavaScript
  • Programiranje
  • jQuery
O autoru James Bruce(707 objavljenih članaka)

James je diplomirao umjetnu inteligenciju i ima CompTIA A+ i Network+ certifikat. Kad nije zaposlen kao urednik pregleda hardvera, uživa u LEGO -u, VR -u i društvenim igrama. Prije nego što se pridružio MakeUseOfu, bio je tehničar rasvjete, učitelj engleskog jezika i inženjer podatkovnog centra.

Više od Jamesa Brucea

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu