Accentsconagua

jQuery Succinct jQuery de bază

Cod
Share

Conceptul de bază în spatele jQuery

În timp ce există unele variații conceptuale (de ex $ .ajax) în API-ul jQuery, conceptul central din spatele jQuery este "găsiți ceva, faceți ceva". Mai precis, selectați elementele DOM dintr-un document HTML și apoi faceți ceva cu ele folosind metodele jQuery. Acesta este conceptul de imagine mare.

Pentru a conduce acest concept acasă, reflectați codul de mai jos.

Observați că în acest document HTML folosim jQuery pentru a selecta un element DOM (). Cu ceva selectat, vom face apoi ceva cu selecția invocând metodele jQuery text(), attr (), și adăuga la().

text metoda numită pe învelit element și setați textul afișat al elementului "jQuery". attr apeluri stabilește href atribuiți site-ului web jQuery.

Grokking conceptul "găsi ceva, face ceva" este esențial pentru avansarea ca dezvoltator jQuery.

Conceptul, în spatele conceptului, în spatele jQuery

În timp ce selectați ceva și faceți ceva este conceptul de bază în spatele jQuery, aș dori să extind acest concept pentru a include și crearea de ceva. Prin urmare, conceptul din spatele jQuery ar putea fi extins pentru a include mai întâi crearea unui nou lucru, selectarea lui și apoi a face ceva cu el. Am putea numi acest concept, în spatele conceptului, în spatele jQuery.

Ceea ce încerc să fac evident este că nu ești blocat doar cu selectarea ceva care este deja în DOM. Este, de asemenea, important să groku că jQuery poate fi folosit pentru a crea noi elemente DOM și apoi să facă ceva cu aceste elemente.

În exemplul de cod de mai jos, creăm un nou element care nu este în DOM. Odată creat, este selectat și apoi manipulat.

Conceptul cheie de abordat aici este acela că noi creăm element în zbor și apoi operează pe ea ca și cum ar fi fost deja în DOM.

jQuery Necesită ca HTML să ruleze în modul Standarde sau Aproape Standard

Există probleme cunoscute în care metodele jQuery nu funcționează corect atunci când un browser redă o pagină HTML în modul quirks. Asigurați-vă că atunci când utilizați jQuery că browserul interpretează codul HTML în modul standard sau în aproape standard, utilizând o doctype validă.

Pentru a asigura funcționalitatea corespunzătoare, exemplele de cod din această carte utilizează modelul HTML 5 doctype.

Se așteaptă ca DOM să fie pregătită

jQuery declanșează un eveniment personalizat numit gata când DOM este încărcat și disponibil pentru manipulare. Codul care manipulează DOM poate rula într-un handler pentru acest eveniment. Acesta este un model comun văzut cu utilizarea jQuery.

Următorul exemplu prezintă trei exemple codificate ale acestui eveniment personalizat în uz.

Rețineți că puteți atașa cât mai multe gata() evenimente în document așa cum doriți. Nu vă limitați la unul singur. Ele sunt executate în ordinea în care au fost adăugate.

Executarea codului jQuery Când fereastra browserului este complet încărcată

De obicei, nu vrem să așteptăm window.onload eveniment. Acesta este punctul de utilizare a unui eveniment personalizat, cum ar fi gata() care va executa codul înainte de încărcarea ferestrei, dar după ce DOM este gata să fie traversat și manipulat.

Cu toate acestea, uneori, de fapt, nu vreau să aștept. În timp ce obiceiul gata() evenimentul este bun pentru executarea codului odată ce DOM este disponibil, de asemenea, putem folosi jQuery pentru a executa codul după ce întreaga pagină web (inclusiv toate materialele) este complet încărcată.

Acest lucru se poate face prin atașarea unui handler de evenimente de încărcare la fereastră obiect. jQuery oferă sarcină() eveniment care poate fi folosit pentru a invoca o funcție odată ce fereastra este complet încărcată. Mai jos, vă ofer un exemplu de sarcină() în timpul utilizării.

Includeți toate fișierele CSS înainte de a include jQuery

Începând cu jQuery 1.3, biblioteca nu mai garantează că toate fișierele CSS sunt încărcate înainte ca acestea să fie create gata() eveniment. Din cauza acestei schimbări în jQuery 1.3, ar trebui să includeți întotdeauna toate fișierele CSS înainte de orice cod jQuery. Acest lucru va asigura că browserul a analizat CSS înainte de a trece la JavaScript inclus mai târziu în documentul HTML. Desigur, imaginile care fac referire prin CSS pot sau nu să fie descărcate în timp ce browserul analizează JavaScript.

Folosind o versiune găzduită a jQuery

Când încorporați jQuery într-o pagină Web, majoritatea oamenilor aleg să descarce codul sursă și să îl leagă de un domeniu personal / gazdă. Cu toate acestea, există și alte opțiuni care implică altcineva care găzduiește codul jQuery pentru dvs..

Google găzduiește mai multe versiuni ale codului sursă jQuery, cu intenția de a fi utilizat de oricine. Acest lucru este de fapt foarte util. În exemplul de cod de mai jos, folosesc a

De asemenea, Google găzduiește mai multe versiuni anterioare ale codului sursă jQuery, iar pentru fiecare versiune sunt furnizate variante miniaturate și nonminificate. Vă recomandăm să utilizați varianta nonminifiată în timpul dezvoltării, deoarece erorile de depanare sunt întotdeauna mai ușoare atunci când aveți de-a face cu cod nonminifiat.

Un avantaj al utilizării unei versiuni găzduite de Google a jQuery este că este fiabilă, rapidă și potențial stocată în cache.

Executarea codului jQuery Când DOM este parsat fără a fi gata ()

Obiceiul gata() evenimentul nu este absolut necesar. Dacă codul dvs. JavaScript nu afectează DOM, îl puteți include oriunde în documentul HTML. Acest lucru înseamnă că puteți evita gata() eveniment în totalitate dacă codul dvs. JavaScript nu depinde de DOM fiind intact.

Cele mai multe coduri JavaScript în zilele noastre, în special jQuery, vor implica manipularea DOM. Aceasta înseamnă că DOM trebuie să fie analizat pe deplin de către browser pentru a putea opera pe el. Acest fapt este motivul pentru care dezvoltatorii s-au blocat pe window.onload roller coaster plimbare de câțiva ani acum.

Pentru a evita utilizarea gata() eveniment pentru cod care funcționează pe DOM, puteți plasa pur și simplu codul într-un document HTML înainte de închidere element. Acest lucru asigură că DOM este încărcat complet, pur și simplu pentru că browserul va analiza documentul de sus în jos. Dacă plasați codul JavaScript în document după elementele DOM pe care le manipulează, nu este necesar să utilizați codul JavaScript gata() eveniment.

În exemplul de mai jos, am renunțat la utilizarea gata() prin plasarea pur și simplu a scriptului meu înainte de închiderea corpului documentului. Aceasta este tehnica pe care o folosesc în această carte și pe majoritatea site-urilor pe care le construiesc.

    
 Bună, eu sunt DOM! Scriptul este departe!

Dacă trebuia să plasez

Spargerea lanțului cu metode distructive

După cum sa menționat mai sus, nu toate metodele jQuery mențin lanțul. Metode cum ar fi  text() poate fi înlănțuită atunci când este utilizată pentru a seta nodul text al unui element. in orice caz, text() de fapt, rupe lanțul atunci când este folosit pentru a obține nodul text conținut într-un element.

În exemplul de mai jos, text() este folosit pentru a seta și apoi pentru a obține textul conținut în

 element.

Obținerea textului conținut într-un element folosind text() este un prim exemplu al unui lanț rupt, deoarece metoda va returna un șir care conține nodul text, dar nu setul de wrapper jQuery.

Nu ar trebui să fie o surpriză faptul că, dacă o metodă jQuery nu returnează setul de împachetare jQuery, lanțul se rupe astfel. Această metodă este considerată a fi distructivă.

Utilizarea metodelor jQuery distructive și ieșirea din distrugere utilizând End ()

Metodele jQuery care modifică setul inițial de împachetare jQuery selectate sunt considerate a fi distructive. Motivul este că ei nu mențin starea inițială a setului de învelitori. Nu-ți face griji; nimic nu este distrus sau eliminat. Mai degrabă, setul anterior de împachetare este atașat unui nou set.

Cu toate acestea, distracția cu legarea nu trebuie să se oprească odată ce setul original înfășurat este modificat. Utilizarea Sfârșit() , puteți să renunțați la orice schimbări distructive efectuate în setul original de învelitori. Examinați utilizarea Sfârșit() în exemplul următor, pentru a înțelege modul de funcționare în și din elementele DOM.

     
      
  •  
          
     
    •

Aspecte ale funcției jQuery

Funcția jQuery este foarte complexă. Putem să îi transmitem diferite valori și formări de șir, pe care le poate folosi apoi pentru a realiza funcții unice. Iată mai multe utilizări ale funcției jQuery:

  • Selectați elemente din DOM utilizând expresii CSS și expresii personalizate jQuery, precum și selectarea elementelor folosind referințele DOM: jQuery ('p> a') sau jQuery ( ': mai întâi') și jQuery (document.body)
  • Creați HTML în zbor prin trecerea structurilor de șir HTML sau a metodelor DOM care creează elemente DOM: jQuery (“
    „)     sau jQuery (document.createElement ( 'div'))
  • O comandă rapidă pentru gata() eveniment prin transmiterea unei funcții la funcția jQuery: jQuery (funcția ($) / * Comanda rapidă pentru gata () * /)

Fiecare dintre aceste utilizări este detaliată în exemplul de cod de mai jos.

Grokking Atunci când acest cuvânt cheie se referă la elemente DOM

Când atașați evenimentele la elementele DOM conținute într-un set de învelitori, cuvântul cheieacest poate fi folosit pentru a face referire la elementul DOM curent invocând evenimentul. Următorul exemplu conține codul jQuery care va atașa un personalizat mouseenter eveniment pentru fiecare element în pagină. JavaScript nativ mouse-ul peste incendiu eveniment atunci când cursorul intră sau iese dintr-un element copil, în timp ce jQuery mouseenter nu.

    jQuery.com jQuery.com jQuery.com

În interiorul funcției anonime care este transmisă către mouseenter () , folosim cuvântul cheie acest pentru a vă referi la curent element. De fiecare dată când mouse-ul atinge textul "jQuery.com", browserul va avertiza elementul care a fost suprascris prin identificarea lui id valoarea atributului.

În exemplul anterior, este de asemenea posibil să luați acest trimiteți-o și trimiteți-o la funcția jQuery astfel încât elementul DOM să fie înfășurat cu funcționalitatea jQuery.

Deci, în loc de asta:

 // Accesați atributul ID al elementului DOM. alert (this.id);

Am fi putut face asta:

 // Înfășurați elementul DOM cu un obiect jQuery, // și apoi folosiți attr () pentru a accesa valoarea ID. alert ($ (aceasta) .attr ( 'id'));

Acest lucru este posibil deoarece funcția jQuery nu numai că are expresii selective, ci va lua și referințe la elementele DOM. În cod, acest este o referință la un element DOM.

Motivul pentru care ați putea dori să înfășurați funcționalitatea jQuery în jurul unui element DOM trebuie să fie evident. Acest lucru vă oferă posibilitatea de a utiliza legarea jQuery, dacă aveți nevoie de ea.

Iterarea peste un set de elemente conținute în setul de wrapper jQuery este oarecum similar cu conceptul pe care tocmai l-am discutat. Folosind jQuery fiecare() , putem itera peste fiecare element DOM conținut într-un set de învelitori. Acest lucru permite accesul la fiecare element DOM individual, prin utilizarea acest cuvinte cheie.

Pe baza marcajului din exemplul anterior, putem selecta toate elemente din pagină și utilizați fiecare() metodă pentru a itera pe fiecare element în setul de învelitori, accesându-l id atribut. Iată un exemplu.

   jQuery.com jQuery.com jQuery.com

Dacă ați încărcat codul HTML într - un browser, browserul va alerta pentru id valoarea fiecăruia element în pagină. Deoarece există trei elemente în pagină, veți obține trei iterații prin fiecare() și trei ferestre de avertizare.

Extragerea elementelor dintr-un set de wrapper, folosind-le direct fără jQuery

Doar pentru că înfășurați funcționalitatea jQuery în jurul unui element HTML nu înseamnă că pierdeți accesul la elementul DOM propriu-zis. Puteți oricând să extrageți un element din setul de înveliș și să operezi pe element prin intermediul JavaScript-ului nativ. De exemplu, în codul de mai jos sunt setarea atributului de titlu al element în pagina HTML prin manipularea proprietății de titlu nativ al Elementul DOM.

    jQuery.com

Așa cum sa demonstrat, jQuery oferă avantajul obține() metoda de accesare a elementelor DOM la un anumit index din setul de învelitori.

Dar există o altă opțiune aici. Puteți evita utilizarea funcției obține() folosind pur și simplu notația de matrice cu braț pătrate pe obiectul jQuery în sine. În contextul exemplului nostru de cod anterior:

Acest cod:

 $ ('a'). obține (0) .title = 'jQuery.com';

Ar putea deveni acest lucru:

 $ ('a') [0] .title = 'jQuery.com';

Ambele permit accesul la elementul DOM real. Personal, eu prefer notația pătrată. Este mai rapid, deoarece folosește JavaScript nativ pentru a extrage elementul dintr-o matrice, în loc să o transmită unei metode.

Însă obține() metoda oferă o soluție slick pentru plasarea tuturor elementelor DOM într-o matrice nativă. Apelând simplu obține() fără a trece un parametru index, metoda va returna toate elementele DOM din setul de wrap în matrice JavaScript.

Pentru a demonstra, să luăm obține() pentru un test drive. În codul de mai jos, plasez toate elemente într-o matrice. Apoi folosesc matricea pentru a accesa proprietatea titlului celui de-al treilea Obiect DOM pe pagină.

    jQuery.com jQuery.com jQuery.com

Note: Utilizarea obține() va termina legarea lui jQuery. Acesta va lua setul de wrapper și îl va schimba într-o matrice simplă de elemente DOM care nu mai sunt înfășurate cu funcționalitatea jQuery. Prin urmare, folosind .Sfârșit() metoda nu poate restabili înlănțuirea după .obține().

Verificarea pentru a vedea dacă setul Wrapper este gol

Înainte de a începe să lucrați cu un set de învelitori, este logic să verificați dacă ați selectat ceva. Cea mai simplă soluție este de a utiliza o dacă pentru a verifica dacă setul de învelitori conține orice elemente DOM.

    jQuery

Adevărul acestei chestiuni este cel de mai sus dacă instrucțiunile nu sunt absolut necesare, deoarece jQuery va eșua în tăcere dacă nu se găsesc elemente. Cu toate acestea, fiecare metodă înlănțuită la orice set de ambalaj gol este invocată. Deci, deși am putea renunța de fapt la utilizarea dacă declarații, este probabil o regulă bună de a le folosi. Invocarea metodelor pe un set de învelitori goale ar putea provoca o prelucrare inutilă, precum și rezultate nedorite dacă metodele returnează valori altele decât setul de învelitori și acele valori se aplică.

Crearea unui alias prin redenumirea propriu-zisă a obiectului jQuery

jQuery oferă noConflict () metodă care are mai multe utilizări - și anume capacitatea de înlocuire $ cu un alt pseudonim. Acest lucru poate fi util în trei moduri: poate renunța la utilizarea $ semnați la o altă bibliotecă, ajutați la evitarea potențialelor conflicte și oferiți posibilitatea de a personaliza spațiul de nume / alias pentru obiectul jQuery.

De exemplu, să presupunem că construiți o aplicație Web pentru compania XYZ. S-ar putea să fie frumos să personalizați jQuery astfel încât să nu trebuiască să îl utilizați jQuery ( 'div'). Show () sau $ ( 'Div'). Show () ai putea folosi XYZ ( 'div'). Show () in schimb.

    
Syncfusion., Inc.

Note:Prin trecerea lui noConflict () funcția o valoare booleană a valorii adevărate, puteți anula complet ceea ce jQuery a introdus în pagina Web. Acest lucru ar trebui să fie utilizat numai în cazuri extreme, deoarece, probabil, va provoca probleme cu pluginurile jQuery.

Utilizarea .each () Dacă nu este suficientă o iterație implicită

Sperăm că este evident că dacă aveți o pagină HTML (exemplul de mai jos) cu trei goale

elemente, următoarea declarație jQuery va selecta toate cele trei elemente de pe pagină, va repeta cele trei elemente (iterația implicită) și va introduce textul "Sunt div" în toate cele trei
element.

Aceasta este considerată iterație implicită deoarece codul jQuery presupune că doriți să manipulați toate cele trei elemente, ceea ce necesită iterarea peste elementele selectate și setarea valorii nodului text pentru fiecare

cu textul "Sunt un div". Când aceasta se face în mod implicit, se face referire ca repetare implicită.

Acest lucru este destul de la îndemână. În cea mai mare parte, majoritatea metodelor jQuery vor aplica iterația implicită. Cu toate acestea, alte metode se vor aplica numai primului element din setul de învelitori. De exemplu, metoda jQuery attr () va accesa numai primul element din setul de înveliș atunci când este folosit pentru a obține o valoare de atribut.

Note:Atunci când utilizați attr () metoda de a seta un atribut, jQuery va aplica de fapt iterația implicită pentru a seta atributul și valoarea lui la toate elementele din setul de wrapper.

În codul de mai jos, setul de învelitoare conține toate

elementele din pagină, dar attr () metoda returnează numai id valoarea primului element conținut în setul de învelitori.

    
Sunt un div
 
Sunt un div
 
Sunt un div

Din motive de demonstrație, presupuneți că scopul dvs. este de a obține id valoarea atributului pentru fiecare element din pagină. S-ar putea scrie trei declarații jQuery separate accesând fiecare

Element id valoarea atributului. Dacă ar fi să facem asta, s-ar putea să pară așa:

 $ ( '# Div1') Attr ( 'id').; $ ( '# Div2') Attr ( 'id').; $ ( '# Div 3') Attr ( 'id').; // sau var $ divs = $ ('div'); // interogare în cache $ divs.eq (0) .attr ('id'); // Începeți cu 0 în loc de 1 $ divs.eq (1) .attr ('id'); $ Divs.eq (2) .attr ( 'id');

Asta pare un pic cam verbos, nu? Nu ar fi bine dacă am putea să batem peste setul de învelitori și să extragem pur și simplu id valoarea atributului de la fiecare dintre

elemente? Prin utilizarea funcției $ (). Fiecare () , invocăm o nouă rundă de iterație atunci când setul de învelitori necesită iterație explicită pentru a gestiona mai multe elemente.

În exemplul de cod de mai jos, folosesc $ (). Fiecare () pentru a realiza buclă peste setul de învelitori, accesați fiecare element din set și extrageți-l id valoarea atributului.

    
div1
 
Div2
 
Div 3

Imaginați-vă posibilitățile din fața dvs. cu capacitatea de a impune repetarea oricând doriți.

Note: jQuery oferă, de asemenea, $ .each nu trebuie confundat cu $ (). Fiecare , care este utilizată în mod specific pentru a itera pe un set de wrapper jQuery. $ .each metoda poate fi de fapt folosită pentru a repeta peste orice matrice sau obiect JavaScript vechi. Este în esență un subsitut pentru buclele JavaScript native.

Elemente din setul de wrapper jQuery returnat în ordinul documentului

Motorul selector va returna rezultatele în ordinea documentelor, spre deosebire de ordinea în care au fost introduse selectorii. Setul de învelitori va fi populat cu elementele selectate în funcție de ordinea în care fiecare element apare în document, de sus în jos.

    
h1
 
h2
 
h3

Determinarea contextului utilizat de funcția jQuery

Contextul implicit utilizat de funcția jQuery la selectarea elementelor DOM este elementul de document (de ex. $ ('a', document)). Aceasta înseamnă că dacă nu furnizați funcția jQuery (de ex. jQuery ()) cu un al doilea parametru care va fi folosit ca context pentru interogarea DOM, contextul implicit folosit este elementul document, mai cunoscut sub numele de .

Este posibil să se determine contextul în care funcția jQuery efectuează o interogare DOM utilizând context proprietate. Mai jos am arătat două exemple codate de recuperare a valorii proprietății contextului.

    
 
 
jQuery

Crearea întregii structuri DOM, inclusiv a evenimentelor DOM, într-un singur lanț

Folosind metode de legare și jQuery, puteți crea nu numai un singur element DOM, ci întreg structuri DOM. Mai jos, creez o listă neordonată de linkuri jQuery pe care le adaug în DOM.

Conceptul pe care trebuie să îl luați de la exemplul anterior este că jQuery poate fi folosit pentru a construi și a opera structuri DOM complexe. Folosind singurele metode jQuery, puteți bate până aproape orice structură DOM de care aveți nevoie.

Cod
×