1. după () / înainte ()
Uneori trebuie să inserați ceva în DOM, dar nu aveți cârligele bune cu care să puteți face acest lucru; append () sau prepend () nu se lasă drept, și nu doriți să adăugați un element suplimentar sau id. Aceste două funcții ar putea fi ceea ce aveți nevoie. Acestea vă permit să introduceți elemente în DOM chiar înainte sau după elementul selectat astfel încât noul element să fie plasat pe același nivel.
De asemenea, puteți face acest lucru dacă lucrați direct cu elementul pe care doriți să îl inserați; utilizați doar funcțiile insertAfter () sau insertBefore.
2. change ()
Metoda de schimbare () - Această tratare a evenimentului, la fel ca clic () sau Hover (). schimba eveniment - pentru câmpuri de text, câmpuri de introducere și selectarea ferestrelor, și va funcționa, atunci când pentru a schimba valoarea celulei țintă; Rețineți că acest lucru nu este aceeași cu cea Manipulatorii focusOut () sau neclaritate () evenimente care sunt declanșate atunci când un element pierde se concentreze, fie modificate sau nu valoarea sa.
Evenimentul change () este perfect pentru validarea datelor de pe partea clientului; aceasta este mult mai bună decât estomparea () pentru că nu veți re-verifica câmpurile dacă utilizatorul nu modifică valoarea.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
3. Contextul
Contextul este atât un parametru cât și o proprietate în jQuery. Când procesați elementele, puteți să le transmiteți funcției jQuery ca al doilea parametru. Acest parametru este un context, de obicei un element DOM, și limitează elementele care sunt cartografiate selectorului dvs., copiii din context. Poate că ești puțin confuz, deci uitați-vă la acest exemplu:
Deci, unde poate fi util acest lucru? O astfel de situație poate apărea în cadrul funcției de gestionare a evenimentului. Dacă aveți nevoie să obțineți un element copil în interiorul sursei evenimentului, puteți trece această proprietate ca un context:
4. date () / removeData ()
Ați trebuit vreodată să stocați informații suplimentare despre un element? Cu metoda data (), puteți face acest lucru cu ușurință. Pentru a seta o valoare, puteți trece doi parametri (cheie și valoare) sau doar unul (obiect).
Pentru a vă întoarce datele, trebuie doar să apelați metoda cu ajutorul cheii de valoare de care aveți nevoie.
Pentru a obține toate datele referitoare la un element, apelați metoda data () fără parametri; veți primi un obiect care conține toate cheile și valorile atribuite acestui element.
Dacă doriți să ștergeți perechea cheie / valoare după ce ați adăugat-o la element, pur și simplu apelați removeData (), trecând cheia corectă.
5. coada () / dequeue ()
Funcțiile de coadă () și dequeue () se referă la animație. O coadă este o listă a animației care este efectuată pe un element; implicit, coada elementului este numită "fx." Să analizăm situația:
Deci, iată ce se întâmplă: în funcția animateBox, am creat coada de animație; Rețineți că ultima intrare se referă din nou la funcție, astfel încât aceasta să repete în mod constant coada de așteptare. Când facem clic pe li # start, această funcție este apelată și coada începe să funcționeze. Când facem clic pe li # reset, animația curentă se termină și trebuie să oprim animația div. Pentru a face acest lucru pe jQuery, coada cu numele "fx" (amintiți-vă, coada implicită) este setată la o matrice goală; În esență, ștergem coada. Și ce se întâmplă atunci când facem clic pe li # add? În primul rând, numim funcția de coadă () pe div; această proprietate, folosită în funcție, este trecută împreună cu ea până la sfârșitul coada de așteptare; deoarece nu am specificat coada ca primul parametru, se folosește numele standard "fx". În interiorul acestei funcții animăm div și apoi apelăm dequeue () pe div, pentru a elimina acest pas din coadă și a continua procesarea; Astfel, coada va fi repetată, dar această funcție nu va mai face parte din ea.
6. delay ()
În timpul lanțului de animație, puteți utiliza metoda delay () pentru a întrerupe temporar animația; timpul este trecut ca parametru în milisecunde.
7. bind (), unbind (), live () și mor ()
Știați că atunci când adăugați un handler pentru clicuri la un element ca acesta.
folosiți cu adevărat shell-ul pentru metoda bind ()? Pentru a utiliza metoda bind () în sine, puteți trece tipul de eveniment ca primul parametru, iar apoi funcția ca al doilea.
De asemenea, puteți atribui aceeași funcție mai multor evenimente simultan, separându-le numele de spații. Deci, dacă doriți să faceți efectul de hover, puteți începe astfel:
Este, de asemenea, posibilă transmiterea acestor funcții prin adăugarea unui al treilea parametru (în a doua poziție).
Mai devreme sau mai târziu se dovedește că introduceți un element în DOM de la dispozitivul de gestionare a evenimentelor; Cu toate acestea, veți găsi în curând faptul că agenții de procesare a evenimentului pe care l-ați efectuat deja cu funcția de legare sau cu coaja nu funcționează pentru elementele nou introduse. În astfel de cazuri, va trebui să utilizați metoda live () (sau delegată); Aceasta vă va permite să adăugați agenți de procesare a evenimentelor la elementele inserate corespunzătoare.
Pentru a elimina dispozitivele de tratare a evenimentului create cu bind (), utilizați metoda de dezbinare (). Dacă nu treceți la parametri, veți șterge toți utilizatorii; Puteți să transmiteți un tip de eveniment pentru a șterge numai manageri de evenimente de acest tip; Pentru a elimina evenimentele dintr-un anumit spațiu de nume, adăugați un spațiu de nume sau îl utilizați separat. Dacă doriți doar să ștergeți o anumită funcție, treceți numele în consecință ca al doilea parametru.
Rețineți că puteți atribui / șterge agenți de procesare a evenimentelor în funcțiile anonime; aceste metode funcționează numai cu numele funcțiilor.
Dacă încercați să eliminați un handler de evenimente dintr-o funcție cauzată de un eveniment, pur și simplu treceți referința unbind () la obiectul evenimentului.
Nu puteți utiliza unbind () pentru gestionarea evenimentelor create de funcția live (); pentru aceasta, funcția die () este utilizată. În absența parametrilor, acesta șterge toți operatorii de evenimente live din întreaga colecție de articole; De asemenea, poate fi trecut tipul de eveniment sau tipul evenimentului și numele funcției de manipulare.
Acum dețineți puterea și flexibilitatea motorului evenimentului jQuery!
De asemenea, ar trebui să studiați metoda delegate (), deoarece poate avea avantaje semnificative de performanță față de metoda live ().
Dacă căutați un element specific într-un set de elemente, puteți trece indexul său la metoda eq () și puteți obține un element jQuery unic. Trimiterea unui indice negativ înseamnă numărarea în direcția opusă de la sfârșitul setului.
De asemenea, puteți utiliza: eq () în selectorii dvs.; astfel încât exemplul anterior ar putea arăta astfel:
Obținerea unei colecții de elemente, jQuery le returnează ca obiect jQuery, astfel încât să aveți acces la toate metodele. Dacă doriți doar elemente DOM prețioase, puteți utiliza metoda get ().
Puteți seta un index pentru a obține un singur element.
10. grep ()
Dacă nu sunteți familiarizat cu shell-urile Unix / Linux, este posibil să nu fi auzit termenul grep. În terminal este un utilitar de căutare text; dar aici, în jQuery, îl folosim pentru a filtra o serie de elemente. Aceasta nu este o metodă de colectare jQuery; treceți matricele ca primul parametru, iar funcția de filtru este al doilea parametru. Funcția de filtrare are doi parametri: un element din matrice și indexul său. Trebuie să-și facă treaba și să se întoarcă adevărat sau fals. În mod implicit, toate elementele care au fost returnate la adevărat vor fi incluse în rezultatele filtrului. De asemenea, puteți adăuga un al treilea parametru, o expresie booleană, pentru a inversa rezultatele și pentru a selecta elementele pentru care funcția de filtrare a revenit false.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
11. Pseudo-selectori
Sizzle, motorul selector CSS din jQuery, oferă mai mulți pseudo-selectori pentru a ușura selectarea elementelor de care aveți nevoie. Uite, acest lucru este interesant:
Desigur, există și altele, dar acestea sunt unice.
12. esteArray () / isEmptyObject () / isFunction () / isPlainObject ()
Uneori trebuie să vă asigurați că parametrul transmis funcției a fost de tipul corect; aceste funcții facilitează acest lucru. Primele trei se explică într-o măsură suficientă:
Următorul exemplu nu este atât de clar; isPlainObject () va reveni la adevărat dacă parametrul trecut a fost creat ca o constantă obiect sau cu Object nou ().
13. makeArray ()
Când creați o colecție de elemente DOM cu jQuery, primiți un obiect jQuery; în unele situații, ați prefera să fie o matrice sau elemente regulate DOM; funcția makeArray () face exact acest lucru.
Metoda hartă () este la fel de asemănătoare cu metoda grep (). După cum vă puteți imagina, este nevoie de un parametru, o funcție. Această funcție poate avea doi parametri: indicele elementului curent și elementul însuși. Iată ce se întâmplă: funcția pe care o parcurgeți va fi executată o dată pentru fiecare element din colecție; și fiecare valoare returnată de această funcție va înlocui elementul colecției, care este transmisă ca argument.
15. parseJSON ()
Dacă folosiți $ .post sau $ .get - și în alte situații când lucrați cu șiruri JSON - veți găsi funcția parseJSON utilă. Deși, bineînțeles, este mai bine dacă funcția dvs. utilizează parserul JSON încorporat în browsere atunci când este (ceea ce evident va fi mai rapid).
16. proxy ()
Dacă aveți o funcție - o proprietate obiect și folosiți alte proprietăți ale obiectului, nu puteți apela o astfel de funcție din cadrul altor funcții și obțineți rezultatele corecte. Știu că acest lucru este confuz, așa că haideți să ne uităm la un exemplu plin de înțelepciune:
Prin aceasta, person.meet () va imprima datele corecte; dar când este apelat de către managerul evenimentului, acesta va produce "Hi! Numele meu este nedefinit. ". Acest lucru se întâmplă deoarece funcția nu este apelată în contextul corect. Pentru a remedia acest lucru, puteți utiliza funcția proxy ():
Primul parametru al funcției proxy este metoda care trebuie pornit; al doilea este contextul în care trebuie să-l lansăm. Într-un alt caz, putem trece mai întâi parametrul de context și numele metodei ca șir - al doilea. Acum veți descoperi că funcția noastră dă alerte corect.
17. replaceAll () / replaceWith ()
Dacă trebuie să înlocuiți unele elemente DOM cu alții, iată cum să faceți acest lucru. Putem apela replaceAll () pentru elementele de colecție sau pentru elementele nou create, indicând selectorul elementelor pe care am dori să le înlocuim. În acest exemplu, toate elementele erorii de clasă vor fi înlocuite de intervalul creat.
Metoda replaceWith () schimbă pur și simplu selectorii în locații; și anume mai întâi căutăm ceea ce vrem să înlocuim:
De asemenea, puteți transmite funcții acestor două metode ca argumente care vor returna elemente sau șiruri HTML.
18. serialize () / serializeArray ()
Metoda serialize () este ceea ce aveți nevoie pentru a codifica valorile în formele dintr-un șir.
De asemenea, puteți utiliza serializeArray () pentru a converti valorile în formulare într-o serie de obiecte în loc de un șir.
19. frați ()
Poate că puteți ghici ce face metoda de la frații (); acesta returnează o colecție de elemente de același nivel cu fiecare element din colecția sursă:
20. wrap () / wrapAll () / wrapInner ()
Aceste trei funcții facilitează înfășurarea unor elemente în altele. În primul rând, voi menționa că toate cele trei metode acceptă același parametru: fie un element (care poate fi specificat de un șir HTML, selector CSS, obiect jQuery sau element DOM) sau o funcție care returnează un element.
Metoda wrap () împachetează fiecare element al colecției în elementul specificat:
WrapAll () împachetează toate elementele colecției într-un element; Aceasta înseamnă că elementele de colectare vor fi mutate în noua locație din DOM; Acestea vor fi colectate împreună cu primul element din colecție și vor fi încheiate în continuare:
În cele din urmă, funcția wrapInner împachetează întregul conținut al fiecărui element de colectare cu elementul specificat în parametru:
concluzie
Ei bine, acum aveți mai mult de douăzeci de metode jQuery noi pe care le puteți juca în următorul proiect; Distrează-te!
Traducere și editare: Rog Victor și Andrei Bernatsky. Comanda de tip web.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
