Biblioteca jQuery facilitează manipularea codului HTML după ce este redat în browser. De asemenea, oferă instrumente care ajută utilizatorul să interacționeze cu pagina dvs.; instrumente care vă ajută să creați animații; și instrumentele care vă permit să comunicați cu serverul fără a reîncărca pagina. În curând vom ajunge la toate astea. În primul rând, vom examina unele dintre elementele de bază ale jQuery și, de asemenea, vom aplica jQuery pentru munca sa principală: obțineți unele elemente și faceți ceva cu ele.
Acest ghid presupune că sunteți familiarizat cu selectorii HTML și CSS. Dacă nu știți cum să aplicați selectori anumitor elemente, trebuie să vă petreceți ceva timp și să ajungeți rapid la curs înainte de a începe să lucrați cu acest ghid.
De ce, și nu altceva?
Biblioteca jQuery oferă o funcție jQuery. care vă permite să selectați elemente utilizând selectori CSS.
Desigur, dacă ați văzut deja un cod jQuery, probabil că sunteți mai obișnuit cu ceva de genul:
$ (document) .ready ()
Înainte de a utiliza în siguranță jQuery pentru a realiza orice pe pagină, trebuie să vă asigurați că pagina este într-o stare în care este pregătită pentru manipulare. Cu jQuery, trebuie să punem codul într-o funcție și apoi această funcție în $ (document) .ready (). După cum puteți vedea, folosim o funcție anonimă.
Odată ce documentul este gata, funcția pe care am trecut-o .ready () va fi executată. Ce se întâmplă aici? Utilizăm $ (document) pentru a crea un obiect document jQuery. și apoi apelați funcția .ready () pentru acest obiect, trecând funcția pe care dorim să o efectuăm.
Deoarece acest lucru se întâmplă adesea, puteți folosi metoda abreviată dacă doriți - funcția $ () face o dublă activitate ca un alias pentru $ (document) .ready (). dacă treceți funcția:
Mai departe, în acest ghid, înțelegem că codul în cauză este inclus în $ (document) .ready (function ()). dar pentru scurt timp, această parte nu este indicată.
Avem câteva elemente
Cel mai simplu lucru pe care îl putem face cu jQuery este de a obține niște elemente și de a face ceva despre ele. Dacă sunteți familiarizați cu selectorii CSS, este foarte ușor să obțineți elemente arbitrare: pur și simplu treceți selectorul corespunzător la $ ().
Este important să înțelegeți că orice eșantion de eșantion va conține numai acele elemente care au existat pe pagină în momentul selecției. Cu alte cuvinte, dacă scrieți var anchors = $ ('a'). și apoi adăugați un element mai târziu pe pagina dvs., ancorele variabile nu vor conține acest element nou.
Alte modalități de a crea un obiect jQuery
În plus față de trecerea unui simplu selector la $ (). puteți crea obiecte jQuery în alte moduri:
Eșantionul meu conține ceva?
Uneori trebuie să faceți ceva, numai atunci când alegerea dvs. corespunde mai multor elemente. Deoarece funcția $ () întoarce întotdeauna un obiect jQuery și este întotdeauna adevărat. ar trebui să verificați conținutul eșantionului pentru a determina dacă a fost găsit ceva.
Atenție vă rog! Cod nevalid
Putem reduce testul chiar mai mult dacă ne amintim că 0 este o valoare falsă:
Obținerea elementelor individuale dintr-un eșantion
Dacă trebuie să lucrați cu elementul DOM original din selecție, trebuie să accesați elementul din obiectul jQuery. De exemplu, dacă doriți să accesați direct proprietatea de proprietate a elementului . atunci trebuie să lucrați cu elementul DOM original.
Rețineți că nu puteți apela metodele jQuery pentru elementele DOM originale. Prin urmare, exemplul următor nu va funcționa:
Dacă trebuie să lucrați cu un element din selecție și doriți să utilizați metodele jQuery pentru acest element, puteți obține un nou obiect jQuery care conține un singur element prin .eq (). trecând indexul elementului la acesta.
Crearea de elemente noi
Funcția $ are de asemenea ultimul rol: crearea de elemente noi. Dacă un fragment HTML este trecut la $ (), acesta va crea un element nou în memorie - cu alte cuvinte, elementul va fi creat, dar nu va fi adăugat la pagină până când nu faceți acest lucru.
De asemenea, puteți crea un element prin transmiterea unui obiect cu informații despre crearea acestuia:
Vom analiza modul de adăugare a articolelor create într-o pagină din secțiunea următoare, care vă va indica modul de deplasare și manipulare a documentului.
Lucrați cu eșantion
După crearea unui obiect jQuery care conține selecția, probabil că doriți să faceți ceva cu el. Dar înainte de aceasta, ia în considerare câteva principii care sunt esențiale pentru a înțelege ce face jQuery.
Verificarea eșantionului
Putem determina dacă selecția corespunde unui anumit criteriu folosind metoda .is (). Această metodă este folosită cel mai adesea pentru a furniza selectorul ca un singur argument. Se întoarce adevărat sau fals, în funcție de selectorul care se potrivește cu selectorul:
De asemenea, puteți trece un obiect jQuery, un element DOM sursă sau chiar o funcție la metoda .is (), dacă aveți nevoie de o verificare complexă. Consultați documentația pentru mai multe informații.
Primirea, instalarea și căutarea implicită
O căutare implicită înseamnă că jQuery enumeră automat toate elementele din selecție atunci când apelați metoda determinantă pentru selecție. Aceasta înseamnă că dacă doriți să faceți ceva pentru toate elementele din eșantion, nu trebuie să apelați o metodă pentru fiecare element din selecția dvs. - trebuie doar să apelați metoda selecției în sine și jQuery va procesa elementele pentru dvs.
Să presupunem că doriți să modificați codul HTML al tuturor elementelor din listă din pagină. Pentru a face acest lucru, trebuie să folosim metoda .html (), care va modifica codul HTML pentru toate elementele listate selectate.
De asemenea, puteți trece funcția la metoda de instalare jQuery. Valoarea returnată a acestei funcții este folosită ca valoare nouă și primește două argumente: indicele elementului din eșantion și vechea valoare pe care încercați să o modificați. Acest lucru este util când aveți nevoie de informații despre starea curentă a unui element pentru a seta corect o stare nouă.
Căutarea explicită
Uneori, sarcina pe care încercați să o rezolvați nu se încadrează în niciuna dintre metodele jQuery existente și apoi trebuie să efectuați o căutare explicită a eșantionului folosind metoda .each (). În următorul cod, în partea de sus a elementului din listă, adăugăm o etichetă conținând indexul elementului din listă.
Una dintre părțile cele mai benefice ale jQuery este abilitatea de a "cupla" împreună. Aceasta înseamnă că putem numi un set de metode pentru eșantion, fără a le repeta sau pentru a salva eșantionul într-o variabilă. Putem chiar face noi mostre bazate pe cele anterioare și toate fără a sparge lanțul.
Lanțurile sunt posibile deoarece fiecare metodă de setare din jQuery returnează selecția din care a fost apelată. Aceasta este o caracteristică extrem de puternică și multe biblioteci au pus în funcțiune. Cu toate acestea, trebuie utilizat cu prudență. Lanțurile mari pot face codul extrem de dificil de citit, modificat și depanat. Nu există reguli stricte cu privire la durata lanțului, dar chiar și pentru un lanț simplu de mai sus, ar trebui probabil să fii refactor pentru lizibilitate.
Avem o imagine de ansamblu excelentă asupra modului în care prăjește jQuery. În următoarea secțiune, vom examina cum să începem să facem lucruri diferite cu el!
Articole similare
Trimiteți-le prietenilor: