Osnovni vodnik za JQuery za programerje Javascript

Oglas

JQuery je ena najbolj priljubljenih knjižnic JavaScript na planetu (kaj je JavaScript Kaj je JavaScript in ali lahko internet obstaja brez njega?JavaScript je ena tistih stvari, ki jih mnogi jemljejo kot samoumevne. Vsi ga uporabljajo. Preberi več ). V času njegovega začetka bo JavaScript (imenovan kot JS od tu naprej v) je bil na zelo drugačnem mestu. 14. januar 2006 je bil dan, ko je bil objavljen jQuery na BarCampNYC. JS je še vedno nekoliko manjkal - brskalniki so vse podprte njegove dele, vendar je bilo za skladnost treba implementirati veliko hekerjev in rešitev.

JQuery je prišel zraven in vse spremenil. JQuery je zelo enostavno napisal kodo, skladno z brskalnikom. Lahko animirate spletne strani, ne da bi diplomirali iz računalništva - hooray! Deset let naprej je jQuery še vedno kralj, in če ga še nikoli niste uporabljali, kaj lahko storite z njim?

Poleg brisanja veščin JavaScript lahko nekaj preberete Vadnice za HTML in CSS Naučite se HTML in CSS s temi vadnicami po korakihŽelite vedeti o HTML, CSS in JavaScript? Če menite, da se poznate, kako ustvariti spletna mesta iz nič - tukaj je nekaj odličnih vadnic po korakih, ki jih je vredno poskusiti.

Preberi več najprej če jih tudi ne poznate.

Imamo predstavil jQuery Izdelava spletnega interaktivnega: uvod v jQueryjQuery je skriptna knjižnica na strani odjemalca, ki jo uporablja skoraj vsako sodobno spletno mesto - spletna mesta naredijo interaktivne. To ni edina Javascript knjižnica, ampak je najbolj razvita, najbolj podprta in najbolj razširjena ... Preberi več prej, zato se bo ta priročnik za JQuery osredotočil na dejansko kodiranje.

Uvod

Morda ste seznanjeni s JS načinom izbire ID-jev iz modela predmeta dokumenta (DOM):

document.getElementById ('foo');

No, JQuery gre še korak dlje. Za izbiro razredov, ID-jev ali več elementov vam ni treba poklicati različnih metod. Evo, kako izberete id:

$ ('# bar');

Enostavno ne? To je enaka sintaksa, da izberete skoraj kateri koli element DOM. Spodaj je opisano, kako izberete pouk:

$ ('. baz');

Lahko si tudi ustvarjalni za nekaj prave moči. To izbere vse td elementi znotraj a mizo razen prvega.

$ ('tabela td'). ni (': prva');

Opazite, kako se imena izbirnikov skoraj natančno ujemajo s kolegi CSS. Predmete lahko dodelite redna Spremenljivke JS:

var xyzzy = $ ('# parent .child');

Lahko pa uporabite tudi spremenljivke jQuery:

var $ xyzzy = $ ('# parent .child');

Znak dolarja se uporablja izključno za označevanje, da je ta spremenljivka objekt jQuery, kar je zelo koristno pri zapletenih projektih.

Izberete lahko nadrejenega elementa:

$ ('otrok'). parent ();

Ali brate in sestre:

$ ('otrok'). brate in sestre ();

Ko je brskalnik pripravljen, morate kodo izvesti. Tukaj je opisano tako:

$ (document) .ready (funkcija () {console.log ('pripravljeno!'); });

Več moči

Zdaj, ko poznate osnove, preidimo na nekatere bolj zapletene stvari. Glede na html tabelo:

Naredite
Model
Barva


Ford
Spremstvo
Črna


Mini
Cooper
rdeča


Ford
Cortina
Bela

Recimo, da želite narediti vsako drugo vrstico drugačne barve (znano kot Zebra Stripes). Zdaj lahko uporabite CSS za to:

#cars tr: nth-otrok (celo) {ozadje-barva: rdeča; }

To lahko dosežemo z jQuery:

$ ('tr: celo'). addClass ('celo');

Tako boste dosegli isto, če to zagotovite celo je razred, opredeljen v CSS. Opazite, kako popolna zaustavitev pred imenom razreda ni potrebna. To so ponavadi potreben samo za glavni izbirnik. V idealnem primeru bi za začetek uporabili CSS, čeprav to ni nič hudega.

JQuery lahko tudi skrije ali odstrani vrstice:

$ ('# fordCortina'). skrivaj (); $ ('# fordCortina'). odstrani ();

Pred odstranitvijo elementa vam ni treba skriti.

Funkcije

Funkcije JQuery so tako kot JS. Uporabljajo kodraste naramnice in lahko sprejemajo argumente. Kjer postane res zanimivo, je prek povratnih klicev. Povratne klice je mogoče uporabiti za skoraj katero koli funkcijo jQuery. Določijo delček kode, ki naj se požene, ko je osnovno dejanje končano. To zagotavlja ogromno funkcionalnosti. Če jih ni, in ste napisali kodo, da pričakujete, da se bo izvajala linearno, bi JS še naprej izvajal naslednjo vrstico kode, medtem ko je čakal na prejšnjo. Povratne klice zagotavljajo, da se koda izvaja samo, ko je izvirna naloga končana. Tu je primer:

$ ('tabela'). skrivaj (funkcija () {alarm ('MUO pravila!'); });

Bodite opozorjeni - ta koda izvede opozorilo za vsak element. Če je vaš izbirnik nekaj več na strani, boste prejeli več opozoril.

Povratne klice lahko uporabite tudi z drugimi argumenti:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Opazite, kako je po zaključnih naramnicah polmesec. To ponavadi ni potrebno za funkcijo JS, vendar velja, da je ta koda še vedno v eni vrstici (ker je povratni klic znotraj oklepajev).

Animacija

JQuery omogoča zelo enostavno animiranje spletnih strani. Elemente lahko zblediš v ali zunaj:

$ ('. fade1'). fadeIn ('počasen'); $ ('# fade2'). fadeOut (500);

Določite lahko tri hitrosti (počasna, srednja, hitra) ali številko, ki predstavlja hitrost v milisekundah (1000 ms = 1 sekunda). Lahko animirate skorajda kateri koli element CSS. To animira širino izbirnika od njegove trenutne širine do 250px.

$ ('foo'). animate ({width: '250px'});

Animacije barv ni mogoče. Povratne klice lahko uporabite tudi z animacijo:

$ ('bar'). animate ({height: '250px'}, function () {$ ('bar'). animate ({width: '50px'} });

Zank

Zanke resnično sijejo v jQueryju. Vsak () se uporablja za ponavljanje vseh elementov dane vrste:

$ ('li'). vsak (funkcija () {console.log ($ (to)); });

Uporabite lahko tudi indeks:

$ ('li'). vsak (funkcija (i) {console.log (i + '-' + $ (to)); });

To bi natisnilo 0, torej 1 in tako naprej.

Lahko tudi uporabite vsak () iterati preko nizov, tako kot v JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (avtomobili, funkcija (i, vrednost) {console.log (vrednost); });

Upoštevajte dodatni poklicani argument vrednost - to je vrednost elementa matrike.

To je vredno omeniti vsak () lahko včasih naj bodo počasnejši kot zanke JS vanilije. To je posledica dodatnih stroškov obdelave, ki jih izvaja jQuery. Večino časa to ni vprašanje. Če vas skrbi učinkovitost ali če uporabljate velike nabore podatkov, razmislite o primerjanju svoje kode jsPerf najprej.

AJAX

Asinhroni JavaScript in XML oz AJAX je z jQuery res zelo enostavno. AJAX napaja ogromno interneta in to je nekaj, kar smo pokrili 5. del Vadnica za jQuery (5. del): AJAX Them All!Ko se bližamo koncu naše mini tutorialne serije jQuery, je čas, da podrobneje pogledamo eno najbolj uporabljenih funkcij jQueryja. AJAX spletnemu mestu omogoča komunikacijo z ... Preberi več od naših jQuery vadnica Vadnica za jQuery - Uvod: Osnove in izbirnikiPrejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke z neko kodo in se naučimo, kako ... Preberi več . Omogoča delno nalaganje spletne strani - ni razloga, da na novo naložite celotno stran, ko želite na primer posodobiti nogometni rezultat. jQuery ima več AJAX metod, najlažje obremenitev ():

$ ('# baz'). load ('nekaj / url / page.html');

To izvede klic AJAX na določeno stran (nekaj / url / page.html) in podatke potisne v izbirnik. Preprosto!

Lahko nastopaš HTTP DOBI prošnje:

$ .get ('nekaj / url', funkcija (rezultat) {console.log (rezultat); });

Podatke lahko pošljete tudi z uporabo POST:

$ .post ('nekaj / drugo / url', {'make': 'Ford', 'model': 'Cortina'});

Podatke obrazca je zelo enostavno:

$ .post ('url', $ ('form'). serialize (), funkcija (rezultat) {console.log (rezultat); }

The serializirati () funkcija dobi vse podatke obrazca in jih pripravi za prenos.

Obljube

Obljube se uporabljajo za odloženo izvršitev. Lahko se jih težko naučimo, vendar jQuery to naredi nekoliko manj težavno. ECMAScript 6 uvaja domače obljube v JS, vendar je podpora brskalnika v najboljšem primeru nejasna. Za zdaj so obljube jQuery veliko boljše pri podpori brskalnikov.

Obljuba je skoraj povsem takšna, kot se sliši. Koda bo obljubila, da se bo vrnila pozneje, ko bo končana. Vaš JavaScript mehanizem bo nadaljeval z izvrševanjem neke druge kode. Enkrat obljuba razreši (vrne), lahko se zažene še kakšen del kode. Obljube lahko veljajo za povratne klice. The jQuery dokumentacija pojasnjuje podrobneje.

Tu je primer:

// dfd == odložen. var dfd = $ .Deferred (); funkcija doThing () {$ .get ('nekaj / počasno / url', funkcija () {dfd.resolve (); }); vrniti dfd.promise (); } $ .when (doThing ()). potem (funkcija () {console.log ('DA, končano je'); });

Opazite, kako je obljuba dana (dfd.promise ()), odpravljena pa je šele, ko je klic AJAX končan. Uporabite lahko spremenljivko za sledenje več klicev AJAX in opravite še eno nalogo, ko so vsi opravljeni.

Nasveti za uspešnost

Ključno za iztisnitev učinkovitosti brskalnika je omejevanje dostopa do DOM-a. Številni od teh nasvetov bi lahko veljali tudi za JS, zato boste morda želeli, da svojo kodo pregledujete, ali je nesprejemljivo počasen. V trenutni dobi visoko zmogljivih motorjev JavaScript lahko manjša ozka grla v kodi pogosto ostanejo neopažena. Kljub temu je vseeno vredno poskusiti napisati najhitreje učinkovito kodo, ki jo lahko.

Namesto da bi iskali DOM za vsako dejanje:

$ ('foo'). css ('barva ozadja', 'rdeča'); $ ('foo'). css ('barva', 'zelena'); $ ('foo'). css ('širina', '100 pik');

Predmet shranite v spremenljivko:

$ bar = $ ('foo'); $ bar.css ('barva ozadja', 'rdeča'); $ bar.css ('barva', 'zelena'); $ bar.css ('širina', '100 pik');

Optimizirajte svoje zanke. Dane vanilije za zanko:

var cars = ['Mini', 'Ford', 'Jaguar']; za (int i = 0; i 

Čeprav ni sam po sebi slab, lahko to zanko naredite hitreje. Za vsako ponovitev mora zanka izračunati vrednost matrike avtomobilov (avtomobili.dolžina). Če to shranite v drugi spremenljivki, je mogoče doseči uspešnost, še posebej, če delate z velikimi nabori podatkov:

za (int i = 0, j = avtomobili.dolžina; i 

Zdaj je shranjena dolžina niza avtomobilov j. Tega ni več treba izračunati v vsaki ponovitvi. Če uporabljate vsak (), tega vam ni treba, čeprav lahko pravilno optimizirana vanilija JS preseže jQuery. Kjer jQuery res sije, je hitrost razvijanja in odpravljanja napak. Če ne delate na velikih podatkih, je jQuery običajno več kot hiter.

Zdaj bi morali poznati dovolj osnov, da bi lahko bili jQuery ninja!

Ali redno uporabljate jQuery? Ste ga zaradi kakršnih koli razlogov prenehali uporabljati? Sporočite nam vaše misli v spodnjih komentarjih!