Un ghid de bază pentru JQuery pentru programatori Javascript

Publicitate

JQuery este una dintre cele mai populare biblioteci JavaScript de pe planetă (ce este JavaScript Ce este JavaScript, și Internetul poate exista fără el?JavaScript este unul dintre acele lucruri pe care mulți le iau de la sine. Toată lumea îl folosește. Citeste mai mult ). La momentul înființării, JavaScript (va fi denumit în continuare JS de aici încolo) era într-un loc foarte diferit. 14 ianuarie 2006 a fost ziua în care a fost anunțat jQuery la BarCampNYC. JS încă lipsea oarecum - browserele toate părțile suportate, dar o mulțime de hack-uri și soluții de rezolvare trebuiau implementate pentru a fi conforme.

JQuery a venit și a schimbat totul. JQuery a făcut foarte ușor să scrie cod compatibil browser-ului. Puteți anima pagini web fără să aveți o diplomă în informatică - hooray! După zece ani, jQuery este încă rege și, dacă nu l-ai mai folosit niciodată, ce poți face cu asta?

În plus față de abilitățile dvs. JavaScript, puteți să citiți unele Tutoriale HTML și CSS Aflați HTML și CSS cu aceste instrucțiuni pas cu pas

Ești curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un avantaj pentru a învăța cum să creați site-uri de la zero - iată câteva instrucțiuni pas-cu-pas minunate care merită încercate. Citeste mai mult mai întâi dacă nu sunteți familiarizați cu ei.

Noi avem a introdus jQuery Crearea web interactivă: o introducere în jQueryjQuery este o bibliotecă de scripturi din partea clientului pe care aproape fiecare site-ul modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai susținută și cea mai utilizată ... Citeste mai mult înainte, deci acest ghid pentru JQuery se va concentra pe codarea efectivă.

Noțiuni de bază

Este posibil să vă familiarizați cu modul JS de selectare a ID-urilor din modelul de obiect document (DOM):

document.getElementById ( 'foo');

Ei bine, JQuery face acest pas mai departe. Nu trebuie să apelați la diferite metode pentru a selecta clase, ID-uri sau mai multe elemente. Iată cum selectați un ID:

$ ( '# Bar');

Ușor nu? Este exact aceeași sintaxă pentru a selecta aproape orice element DOM. Iată cum selectați clasele:

$ ( 'Baz.');

De asemenea, puteți obține creativ pentru o putere reală. Aceasta selectează toate td elemente din interiorul a masa cu excepția primului.

$ ('tabel td'). nu (': primul');

Observați cum numele selectoarelor se potrivesc aproape exact cu omologii CSS. Puteți atribui obiecte regulat Variabile JS:

var xyzzy = $ ('# părinte .child');

Sau puteți utiliza variabile jQuery:

var $ xyzzy = $ ('# părinte .child');

Semnul dolar este folosit exclusiv pentru a semnifica că această variabilă este un obiect jQuery, lucru care este foarte util în proiectele complexe.

Puteți selecta părintele unui element:

$ ( 'Copil') părinte ().;

Sau frații:

$ ( 'Copil') frați ().;

Trebuie să executați codul dvs. odată ce browserul este gata. Iată cum faci asta:

$ (document) .ready (funcție () {console.log ('gata!'); });

Mai multă putere

Acum că știți elementele de bază, să trecem la unele lucruri mai complexe. Data unui tabel html:

Face
Model
Culoare


Vad
Escorta
Negru


Mini
dogar
roșu


Vad
Cortina
alb

Spuneți că doriți să faceți din fiecare alt rând o culoare diferită (cunoscută sub numele de Zebra dungi). Acum puteți utiliza CSS pentru acest lucru:

#cars tr: nth-child (even) {background-color: red; }

Astfel se poate realiza acest lucru cu jQuery:

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

Acest lucru va realiza același lucru, oferind acest lucru chiar este o clasă definită în CSS. Observați cum nu este necesară oprirea completă înainte de numele clasei. Acestea sunt obișnuit necesar doar pentru selectorul principal. În mod ideal, ați folosi CSS pentru a începe acest lucru, deși nu este mare lucru.

JQuery poate ascunde sau elimina rânduri:

. $ ( '# FordCortina') ascunde ();. $ ( '# FordCortina') șterge ();

Nu trebuie să ascundeți un element înainte de al elimina.

funcţii

Funcțiile JQuery sunt la fel ca JS. Folosesc bretele ondulate și pot accepta argumente. Acolo unde devine cu adevărat interesant este prin apeluri. Callbacks-urile pot fi aplicate la aproape orice funcție jQuery. Ele specifică o bucată de cod care să fie executată odată ce acțiunea principală este finalizată. Aceasta oferă o funcționalitate uriașă. Dacă nu ar exista și ați scris codul dvs. așteptând ca acesta să funcționeze liniar, JS va continua să execute următoarea linie de cod în așteptarea celui precedent. Callbacks-ul asigură că codul rulează numai după ce sarcina inițială este finalizată. Iată un exemplu:

$ ('table'). hide (funcție () {alert ('Reguli MUO!'); });

Fiți avertizat - acest cod execută o alertă pentru fiecare element. Dacă selecționerul dvs. este ceva de mai multe ori pe pagină, veți primi mai multe alerte.

Puteți utiliza apeluri de apel cu alte argumente:

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

Observați cum există un semicon după bretele de închidere. În mod normal, acest lucru nu ar fi necesar pentru o funcție JS, cu toate acestea, acest cod este încă considerat a fi pe o singură linie (întrucât apelul este în interiorul parantezelor).

Animaţie

JQuery face animarea paginilor web foarte ușoare. Puteți estompa elementele în sau în afara:

$ ( 'Fade1 ') fadeIn (' lent').; $ ('# fade2'). fadeOut (500);

Puteți specifica trei viteze (lente, medii, rapide) 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 sa curentă la 250px.

$ ('foo'). animare ({lățime: '250px'});

Nu este posibilă animarea culorilor. Puteți utiliza apeluri și cu animație:

$ ('bar'). animate ({înălțime: '250px'}, funcție () {$ ('bar'). animate ({lățime: '50px'} });

buclele

Buclele strălucesc într-adevăr în jQuery. Fiecare() este utilizat pentru a itera peste fiecare element al unui tip dat:

$ ('li'). fiecare (funcție () {console.log ($ (aceasta)); });

Puteți utiliza, de asemenea, un index:

$ ('li'). fiecare (funcție (i) {console.log (i + '-' + $ (aceasta)); });

Aceasta ar imprima 0, apoi 1 si asa mai departe.

Puteți utiliza, de asemenea fiecare() pentru a itera peste matrice, la fel ca în JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (mașini, funcție (i, valoare) {console.log (valoare); });

Notă argumentul suplimentar numit valoare - aceasta este valoarea elementului array.

Merită să remarcăm asta fiecare() poate sa uneori să fie mai lent decât buclele JS de vanilie. Acest lucru se datorează procesului suplimentar de procesare pe care îl execută jQuery. Pentru majoritatea timpului, aceasta nu este o problemă. Dacă sunteți îngrijorat de performanță sau lucrați cu seturi de date mari, luați în considerare corelarea codului dvs. jsPerf primul.

AJAX

JavaScript asincron și XML sau AJAX este foarte ușor cu jQuery. AJAX alimentează o sumă vastă de Internet și este ceva în care am acoperit partea a 5-a jQuery Tutorial (partea a 5-a): AJAX Toți!Pe măsură ce ne apropiem de sfârșitul seriei noastre mini-tutorial jQuery, este timpul să aruncăm o privire mai aprofundată la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site web să comunice cu ... Citeste mai mult al nostru tutorial jQuery jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult . Acesta oferă o modalitate de a încărca parțial o pagină web - 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 transferă datele în selector. Simplu!

Puteți performa HTTP GET cereri:

$ .get ('some / url', funcție (rezultat) {console.log (rezultat); });

De asemenea, puteți trimite date folosind POST:

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

Este foarte ușor să trimiteți datele formularului:

$ .post ('url', $ ('formular'). serialize (), funcție (rezultat) {console.log (rezultat); }

serialize () funcția primește toate datele din formular și le pregătește pentru transmitere.

promisiuni

Promisiunile sunt utilizate pentru executarea amânată. Ele pot fi dificil de învățat, cu toate acestea jQuery îl face puțin mai puțin supărător. ECMAScript 6 introduce promisiuni native la JS, totuși, suportul browserului este în cel mai bun caz. Deocamdată, promisiunile jQuery sunt mult mai bune la suportul browser-ului încrucișat.

O promisiune este aproape exact așa cum sună. Codul va face o promisiune de a reveni într-o etapă ulterioară, atunci când va fi finalizat. Motorul dvs. JavaScript va trece la executarea unui alt cod. Odată promisiunea rezolvă (returnează), se poate rula o altă bucată de cod. Promisiunile pot fi gândite ca apeluri. Documentația jQery explică mai detaliat.

Iată un exemplu:

// dfd == amânat. var dfd = $. Diferent (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); returnare dfd.promise (); } $ .când (doThing ()). apoi (funcție () {console.log ('YAY, este terminat'); });

Observați cum se face promisiunea (dfd.promise ()), și se rezolvă numai atunci când apelul AJAX este finalizat. Puteți utiliza o variabilă pentru a urmări mai multe apeluri AJAX și a finaliza o altă sarcină numai după ce au fost făcute toate.

Sfaturi de performanță

Cheia pentru eliminarea performanțelor din browserul dvs. este limitarea accesului la DOM. Multe dintre aceste sfaturi s-ar putea aplica și la JS și este posibil să doriți să vă profilați codul pentru a vedea dacă acesta este inacceptabil de lent. În epoca actuală a motoarelor JavaScript de înaltă performanță, blocajele minore ale codului pot trece adesea neobservate. În ciuda acestui fapt, merită să încercați să scrieți cel mai performant cod pe care îl puteți.

În loc să căutați DOM pentru fiecare acțiune:

$ ('foo'). css ('culoare de fundal', 'roșu'); $ ('foo'). css ('culoare', 'verde'); $ ('foo'). css ('lățime', '100px');

Stocați obiectul într-o variabilă:

$ bar = $ ('foo'); $ bar.css („culoare de fundal”, „roșu”); $ bar.css ('culoare', 'verde'); $ bar.css ('lățime', '100px');

Optimizați-vă buclele. Dat cu o vanilie pentru buclă:

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

Deși nu este în mod inerent rău, această buclă poate fi făcută mai rapid. Pentru fiecare iterație, bucla trebuie să calculeze valoarea tabloului de mașini (cars.length). Dacă stocați acest lucru într-o altă variabilă, puteți obține performanțe, mai ales dacă lucrați cu seturi de date mari:

pentru (int i = 0, j = mașini.lungime; i 

Acum, lungimea tabloului de automobile este stocată în j. Acest lucru nu mai trebuie calculat în fiecare iterație. Dacă utilizați fiecare(), nu trebuie să faceți acest lucru, deși vanilia JS optimizată corespunzător poate depăși jQuery. Unde jQuery strălucește cu adevărat este prin viteza de dezvoltare și depanare. Dacă nu lucrați la date mari, jQuery este de obicei mai mult decât rapid.

Acum ar trebui să știți suficiente elemente de bază pentru a fi un ninja jQuery!

Folosești în mod regulat jQuery? Ați încetat să-l utilizați din orice motive? Spuneți-ne gândurile în comentariile de mai jos!