Acțiune:
Un ghid de bază pentru JQuery pentru programatorii Javascript
JQuery este una dintre cele mai populare biblioteci JavaScript de pe planeta (ce este JavaScript) Ce este JavaScript, și poate exista Internetul fără ea? Ce este JavaScript și poate exista Internetul fără ea? Toată lumea o folosește. În momentul în care a început, JavaScript (va fi denumit în continuare JS de aici încolo) se afla într-un loc foarte diferit. 14 ianuarie 2006 a fost ziua când jQuery a fost anunțată la BarCampNYC. JS încă lipsea într-o oarecare măsură - browserele toate componentele acceptate ale acestuia, dar au fost implementate o mulțime de hack-uri și soluții pentru conformarea.
JQuery a venit și a schimbat totul. JQuery a făcut foarte ușor să se scrie codul compatibil cu browserul. Ați putea să animați pagini web fără să aveți o diplomă în domeniul informaticii. Zece ani mai târziu, jQuery este încă rege și, dacă nu l-ați folosit niciodată înainte, ce puteți face cu ea?
În plus față de perierea pe abilitățile dvs. JavaScript, poate doriți să citiți câteva tutoriale HTML și CSS Aflați HTML și CSS cu aceste Tutoriale pas cu pas Aflați HTML și CSS cu aceste Tutoriale pas cu pas Curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un talent pentru a învăța cum să creați site-uri web de la zero - aici sunt câteva tutoriale pas cu pas care merită încercate. Mai întâi citiți mai întâi dacă nu sunteți familiarizați cu acestea.
Noi am introdus jQuery Efectuarea Interactiunii Web: o introducere la jQuery Efectuarea Interactiunii Web: o introducere In jQuery jQuery este o biblioteca de scripting pe partea clientului pe care aproape orice site web modern o foloseste - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai utilizată și cea mai utilizată ... Citește mai mult înainte, deci acest ghid pentru JQuery se va concentra pe codarea efectivă.
Noțiuni de bază
S-ar putea să fiți familiarizat cu modul JS de selectare a ID-urilor din Modelul Obiectului Documentului (DOM):
document.getElementById ( 'foo');Ei bine, JQuery face un pas mai departe. Nu trebuie să apelați alte metode pentru a selecta clase, ID-uri sau mai multe elemente. Iată cum selectați un id:
$ ( '# Bar');E ușor? Este exact aceeași sintaxă pentru a selecta aproape orice element DOM. Iată cum selectați clasele:
$ ( 'Baz');Puteți obține, de asemenea, creativitate pentru o anumită putere reală. Aceasta selectează toate td elemente în interiorul unui masa cu excepția primei.
$ ('table td') nu (': prima');Observați cum numele selectorului se potrivesc aproape exact cu omologii lor CSS. Aveți posibilitatea să atribuiți obiecte regulat Variabile JS:
var xyzzy = $ ('# părinte .child');Sau puteți utiliza variabilele jQuery:
var $ xyzzy = $ ('# părinte .child');Semnul dolarului este folosit exclusiv pentru a indica faptul că această variabilă este un obiect jQuery, ceea ce este foarte util în cazul proiectelor complexe.
Puteți selecta părintele unui element:
$ ( 'Copil') părinte ().;Sau frații:
. $ ( 'Copil') frați ();Trebuie să executați codul după ce browser-ul este pregătit. Iată cum faceți acest lucru:
$ (document) .ready (funcția () console.log ('gata!'););Mai multă putere
Acum că știți elementele de bază, să trecem la câteva lucruri mai complexe. Având o tabelă html:
Face Model Culoare Vad Escorta Negru Mini dogar roșu Vad Cortina alb
Spuneți că doriți să faceți din orice alt rând o altă culoare (cunoscută sub numele de Zebra Stripes). Acum puteți utiliza CSS pentru aceasta:
#cars tr: n-copil (chiar) fundal-culoare: roșu; 
Acesta este modul în care ar putea fi atins cu jQuery:
$ ( 'Tr: chiar'). AddClass ( 'chiar');Acest lucru va realiza același lucru, cu condiția chiar este o clasă definită în CSS. Observați cum nu este necesar oprirea completă înainte de numele clasei. Acestea sunt de obicei numai pentru selectorul principal. În mod ideal, ați folosi CSS pentru a începe acest lucru, deși nu este o afacere mare.
JQuery poate, de asemenea, ascunde sau elimina rânduri:
$ ( '# FordCortina') ascunde ().; $ ( '# FordCortina') șterge ().;Nu trebuie să ascundeți un element înainte de al scoate.
funcţii
Funcțiile JQuery sunt la fel ca JS. Ei folosesc bretele și pot accepta argumente. În cazul în care devine cu adevărat interesant este prin callbacks. Comenzile de returnare pot fi aplicate în aproape orice funcție jQuery. Acestea specifică o bucată de cod care rulează odată ce acțiunea de bază este finalizată. Aceasta oferă o funcționalitate imensă. Dacă nu există și ați scris codul dvs. așteptând ca acesta să ruleze în mod liniar, JS va continua să execute următoarea linie de cod în timp ce așteaptă cea anterioară. Comenzile de returnare asigură că codul rulează numai după finalizarea sarcinii inițiale. Iată un exemplu:
$ ('table') ascunde (function () alert ('MUO rules!'););Fi avertizat - acest cod execută o alertă pentru fiecare element. Dacă selectorul dvs. este ceva pe pagină de mai multe ori, veți primi alerte multiple.
Puteți utiliza apelurile de apel cu alte argumente:
$ ('tr: even') addClass ('chiar', funcția () console.log ('Hello'););Observați cum există un semi-colon după încheieturile de închidere. Acest lucru nu ar fi în mod normal necesar pentru o funcție JS, cu toate acestea acest cod este încă considerat a fi pe o singură linie (deoarece callback-ul este în paranteze).
Animaţie
JQuery face foarte ușor să animați paginile web. Puteți să deconectați sau să eliminați elemente:
$ ( 'Fade1. ') FadeIn (' lent').; $ ( '# Fade2') fadeOut (500).;Puteți specifica trei viteze (lent, mediu, rapid) sau un număr care reprezintă viteza în milisecunde (1000ms = 1 secundă). Puteți anima aproape orice element CSS. Aceasta animă lățimea selectorului de la lățimea curentă la 250 de pixeli.
$ ('foo'). animați (width: '250px');Nu este posibil să animați culorile. Puteți utiliza și callback-uri cu animație:
$ ('bar') animate (height: '250px', function () $ ('bar').buclele
Buclele strălucesc cu adevărat în jQuery. Fiecare() este folosit pentru a itera peste fiecare element dintr-un anumit tip:
$ ('li') fiecare (functie () console.log ($ (aceasta)););De asemenea, puteți utiliza un index:
$ ('li') fiecare (funcția (i) console.log (i + '-' + $ (aceasta)););Aceasta ar imprima 0, atunci 1 si asa mai departe.
Puteți utiliza, de asemenea fiecare() pentru a itera peste mese, la fel ca în JS:
var cars = ["Ford", "Jaguar", "Lotus"]; $ .eu (mașini, funcție (i, valoare) console.log (valoare););Rețineți argumentul suplimentar numit valoare - aceasta este valoarea elementului matrice.
Merită să observăm asta fiecare() poate sa uneori să fie mai lent decât buclele de vanilie JS. Acest lucru se datorează proceselor suplimentare de procesare pe care jQuery le efectuează. În majoritatea cazurilor, nu este o problemă. Dacă sunteți preocupat de performanță sau lucrați cu seturi de date mari, luați în considerare comparativ codul dvs. cu jsPerf mai întâi.
AJAX
Asynchronous JavaScript și XML sau AJAX este foarte usor cu jQuery. AJAX deține o mare cantitate de Internet și este ceva pe care l-am abordat în partea a 5 jQuery Tutorial (Partea 5): AJAX Them All! jQuery Tutorial (Partea 5): AJAX-le pe toate! Pe măsură ce ne apropiem de sfârșitul seriei mini-tutorial jQuery, este timpul să ne uităm la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site web să comunice cu ... Citește mai mult despre tutorialul nostru jQuery jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. În această săptămână, cred că este timpul să ne murdărim mâinile cu un cod și să învățăm cum ... Citiți mai multe. Acesta oferă o modalitate de încărcare parțială a unei pagini web - nu există niciun motiv pentru a reîncărca întreaga pagină atunci când doriți doar să actualizați scorul de fotbal, de exemplu. jQuery are mai multe metode AJAX, cea mai ușoară fiind sarcină():
$ ( '# Baz') de încărcare ( 'unele / url / pagină.html').;Aceasta efectuează un apel AJAX către pagina specificată (unele / url / pagină.html) și împinge datele în selector. Simplu!
Puteți efectua HTTP GET cereri:
$ .get ('some / url', funcție (rezultat) console.log (rezultat););De asemenea, puteți trimite date utilizând POST:
$ .post ('some / other / url', 'marca': 'Ford', 'model': 'Cortina');Este foarte ușor să trimiteți datele formularului:
$ .post ('url', $ ('form')) serialize (), function (rezultat) console.log (rezultat);serialize () funcția primește toate datele formularului și o pregătește pentru transmisie.
promisiuni
Promisiunile sunt folosite pentru executarea amânată. Ele pot fi dificil de învățat, cu toate acestea jQuery o face ușor mai puțin supărător. ECMAScript 6 introduce promisiuni native ale JS, cu toate acestea, suportul pentru browser este cel mai bun. Deocamdată, promisiunile jQuery sunt mult mai bune la suportul de browser încrucișat.
O promisiune este aproape exact așa cum pare. Codul va face o promisiune de a reveni într-o etapă ulterioară când este completă. Motorul dvs. JavaScript va trece la executarea unui alt cod. Odată promisiunea rezolvă (returnează), se poate executa o altă bucată de cod. Promisiunile pot fi considerate ca apeluri de apel. Documentația jQuery explică în detaliu.
Iată un exemplu:
// dfd == amânat var dfd = $ .Deferred (); funcția doThing () $ .get ('some / slow / url', funcția () dfd.resolve ();); returnați dfd.promise (); $ .when (doThing ()), apoi (funcția () console.log ('YAY, este terminată'););Observați cum se face promisiunea (dfd.promise ()) și este rezolvată numai după finalizarea apelului AJAX. Ați putea utiliza o variabilă pentru a urmări mai multe apeluri AJAX și puteți termina o altă sarcină după ce ați făcut toate acestea.
Sfaturi privind performanța
Cheia pentru a stoarce performanța din browserul dvs. limitează accesul la DOM. Multe dintre aceste sfaturi s-ar putea aplica și pentru JS, și vă recomandăm să vă codificați codul pentru a vedea dacă este inacceptabil de lent. În actuala vârstă a motoarelor JavaScript de înaltă performanță, blocajele minore în cod pot trece adesea neobservate. În ciuda acestui fapt, merită încă încercarea de a scrie codul cu cea mai rapidă performanță.
În loc să căutați DOM pentru fiecare acțiune:
$ ('foo') css ('fundal-culoare', 'roșu'); $ ('foo'). css ('culoare', 'verde'); $ ('foo'). css ('lățime', '100px');Depozitați obiectul într-o variabilă:
$ bar = $ ('foo'); $ bar.css ('fundal-color', 'roșu'); $ bar.css ('culoare', 'verde'); $ bar.css ('lățime', '100px');Optimizați-vă buclele. Având o vanilă pentru buclă:
var cars = ['Mini', 'Ford', 'Jaguar']; pentru (int i = 0; i < cars.length; ++i) // do something Deși nu este în mod inerent rău, această bucla poate fi făcută mai repede. Pentru fiecare iterație, bucla trebuie să calculeze valoarea matricei de mașini (cars.length). Dacă stocați acest lucru într-o altă variabilă, performanța poate fi câștigată, mai ales dacă lucrați cu seturi de date mari:
pentru (int i = 0, j = lungimea vehiculului; < j; ++i) // do something Acum este stocată lungimea matricei de mașini j. Acest lucru nu mai trebuie calculat în fiecare iterație. Dacă utilizați fiecare(), nu aveți nevoie să faceți acest lucru, deși vanilina JS optimizată în mod corespunzător poate depăși performanța jQuery. În cazul în care jQuery strălucește într-adevăr este prin viteza de dezvoltare și de depanare. Dacă nu lucrați la date mari, jQuery este, de obicei, mai mult decât rapid.
Ar trebui să cunoașteți acum câteva elemente de bază pentru a fi un jQuery ninja!
Folosesti in mod regulat jQuery? Te-ai oprit din orice motiv? Anunțați-vă gândurile în comentariile de mai jos!
Explorați mai multe despre: JavaScript, jQuery.