Cum se adaugă evenimentele în obiectele jQuery pentru programarea HTML5 și CSS3 - juxtapuri

Biblioteca jQuery adaugă o altă capacitate extrem de puternică pentru JavaScript. Acesta permite programatorilor HTML5 și CSS3 să atașeze cu ușurință un eveniment la orice obiect jQuery. Aruncă o privire la hover. html.

Când mutați cursorul peste orice element de listă, în jurul elementului apare o margine. Acest lucru nu este un efect dificil de realizat în CSS obișnuit, dar este chiar mai ușor în jQuery.

Cum se adaugă un eveniment de hover

Uită-te la cod pentru a vedea cum funcționează:

hover. html $ (init); funcția init () {$ ("li"). hover (frontieră, noBorder);} // end border funcția init () {$ (this). css ("frontieră", "1px solid negru");} funcția noBorder () {$ (aceasta). css ("border", "0px none black");}

Hover Demo

alfa
beta
gamma
delta

HTML nu poate fi mai simplu. Este pur și simplu o listă neordonată. JavaScript nu este mult mai complex. Se compune din trei funcții cu o singură linie:

• init () este apelat când documentul este gata. Face obiecte jQuery din toate elementele listate și le atribuie evenimentul. Funcția hover () acceptă doi parametri:

  • Prima este o funcție care trebuie apelată atunci când cursorul se află peste obiect.

  • A doua este o funcție care trebuie apelată atunci când cursorul părăsește obiectul.

• border () trasează o margine în jurul elementului curent. ID-ul $ (acest) este folosit pentru a specifica obiectul curent.

• noborder () este o funcție foarte asemănătoare cu funcția (), dar elimină o margine din obiectul curent.

În acest exemplu au fost folosite trei funcții diferite. Mulți programatori jQuery preferă să utilizeze funcții anonime (uneori numite funcții lambda ) pentru a închide întreaga funcționalitate într-o singură linie lungă:

$ ("li"). css ("border", "0px none black");}), funcția () {$ (aceasta);

Rețineți că acest lucru este încă din punct de vedere tehnic o singură linie de cod. În loc să faceți referire la două funcții care au fost deja create, puteți construi funcțiile imediat unde sunt necesare. Fiecare definiție a funcției este un parametru al metodei hover ().

Dacă sunteți un om de știință în domeniul informaticii, ați putea susține că acest lucru nu este un exemplu perfect al unei funcții lambda și ați fi corecte. Cel mai important lucru este să observați că unele idei de programare funcțională (cum ar fi funcțiile lambda) se încadrează în programele AJAX de masă și aceasta este o dezvoltare interesantă.

Schimbarea claselor în zbor

jQuery susține o altă caracteristică minunată.Puteți să definiți un stil CSS și apoi să adăugați sau să eliminați respectivul stil dintr-un element dinamic.

Codul arată cât de ușor este de adăugat o astfel de caracteristică: clasa

. html. margine {graniță: 1px solid negru;} $ (init); funcția init () {$ ("li"). faceți clic (toggleBorder); // // funcția end init comutațiBorder () {$ (aceasta).

alfa
beta
gamma

delta

1. Cum se face acest program:

   Începeți cu o pagină HTML de bază.

2. Toate lucrurile interesante se întâmplă în CSS și JavaScript, astfel încât conținutul real al paginii nu este atât de critic.

   Creați o clasă pe care doriți să o adăugați și să o eliminați.

3. Aveți posibilitatea să construiți o clasă CSS numită pur și simplu care atrage o margine în jurul elementului. Desigur, puteți face o clasă CSS mult mai sofisticată, cu toate tipurile de formatare, dacă preferați.

   Conectați o metodă init ().

4. Pe măsură ce începeți să vedeți, majoritatea aplicațiilor jQuery necesită un fel de inițializare. Puteți apela prima funcție. init ()

   Apelați funcția toggleBorder () ori de câte ori utilizatorul face clic pe un element de listă.

   Metoda init () stabilește pur și simplu un handler de evenimente. Ori de câte ori un element de listă primește evenimentul clic (adică se face clic), funcția toggleBorder () ar trebui activată. Funcția toggleBorder (), bine, comută marginea.

   • jQuery are mai multe metode pentru manipularea clasei unui element:

   • addClass () atribuie o clasă elementului.

   • removeClass () elimină o definiție de clasă dintr-un element.

toggleClass () comută clasa (adaugă-o dacă nu este în prezent atașată sau o elimină altfel).