jquery Learning
Learning Jquery. evenimente simple,
comutator de stil simplu
Pentru a ilustra o tehnologie de procesare eveniment, imaginați-vă că avem nevoie de o pagină care arată o în trei stiluri diferite, în funcție de datele introduse de utilizator:
- vedere normală
- Text închis într-o coloană îngustă
- mare de imprimare pe întreaga pagină
Pe pagina, vom face cele trei butoane, făcând clic pe care utilizatorul va schimba stilul paginii afișate.
HTML markup este foarte simplu:
Adăugați unele CSS-stiluri și pagina noastră se va arăta astfel:
Să începem cu faptul că funcția de comutare pentru a adăuga un font mare, pentru aceasta trebuie să ne înregistreze în stilul CSS adecvat:
Acum trebuie să se aplice această clasă pentru organism. astfel încât pagina întregul font va crește, după cum știm din articolele anterioare, trebuie să scrie următoarele:
Acum, când apăsați pe butonul «Mare», codul nostru este executat, iar pagina va schimba stilul:
bind) metoda (poate fi numită mnogkratno, și atribuie un număr de acțiuni diferite pe același eveniment.
Prezenta metodă nu este soluția cea mai elegantă pentru această problemă, iar apoi vom continua să-l îmbunătățească.
Includerea celelalte butoane
Acum avem un buton de lucru «Mare», mărind dimensiunea fontului de pe pagina, stânga atribuie funcțiile corespunzătoare pentru alte butoane. Este foarte simplu, vom folosi metoda bind (). pentru a adăuga un handler clic eveniment al fiecărui buton, eliminarea și adăugarea claselor după cum este necesar. Noul cod va fi ca acest lucru:
Acesta combină css-regula pentru a restrânge clasa
Acum, după apăsarea «îngust pe coloană», acest stil se va aplica, iar pagina va arata astfel:
Eveniment Handler Context
Stilul nostru de comutare funcționează corect, dar nu putem spune utilizatorul despre care buton este apăsat acum. Vom remedia această problemă prin adăugarea unei clase selectată. să apăsați butonul, și eliminarea clasei în alte două butoane. Clasa selectată va fi diferit de text îngroșat:
Am putea folosi această clasă așa cum am făcut-o înainte, referindu-se la fiecare buton prin ID-ul său, aplicarea și îndepărtarea de clasă, respectiv, dar de data aceasta vom folosi o decizie mai elegant și masshatbiruemoe.
Când srabayvaet handler caz, acest cuvânt cheie returnează elementul DOM la care a fost aplicat acțiunea specificată. Mai devreme am spus că funcția $ () este disponibil pentru orice element DOM ca argument.
Prin urmare, dacă vom scrie $ (aceasta), cu o tratare a evenimentului, vom crea un obiect Jquery care corespunde elementului, și poate interacționa cu el la fel de bine ca și în cazul în care v-ar fi primit cu CSS-selectorului.
Gândire acest lucru, puteți scrie:
Prin plasarea acestei linii în fiecare dintre cele trei procesoare, vom adăuga o clasă de fiecare dată când apăsați butonul. Pentru a elimina o clasă selectată. celelalte două butoane, vom folosi Jquery avantaj ocupa implicit lista de articole:
Această linie de clasă udalayaet «selectat» pentru toate butoanele situate în interiorul stilului switcher. Deci, după efectuarea de modificări în codul nostru, va arata astfel:
Aici, asigurați-vă că să acorde o atenție la faptul că, în primul rând, eliminăm clasa selectată, și apoi aplicați-l la butonul curent. Dacă modificați ultimele două rânduri, în unele locuri, acesta nu va funcționa.
Acum, utilizatorul poate vedea în mod clar buton care este activ în prezent:
Iar în încheierea articolului de astăzi, vom efectua ultima optimizare a codului. Deoarece funcția butonului de iluminare din spate activă abolyutno aceeași pentru toate cele trei butoane, putem combina toate cele șase linii într-o singură funcție, după cum urmează:
Am realizat optimizare are trei avantaje:
- Abilitatea de a desemna un handler eveniment trei butoane simultan printr-un singur apel pentru a lega ()
- Abilitatea de a desemna executarea funcții multiple cu un singur apel bind ()
- JQuery posibilitatea de a adăuga și elimina clase într-o singură linie.
În următorul articol, ne vom uita la optimizarea dalneyschih cod JQuery, adăugarea de noi caracteristici pentru exemplul prezentat.