Acest tutorial nu este un ghid complet, dar include elementele de bază, care sunt necesare pentru a scrie cele mai multe script-uri. Pentru a pune în aplicare ideile, s-ar putea nevoie de o listă completă de metode de evenimente jQuery.
Următoarele subiecte vor fi acoperite în acest tutorial:
- Care este evenimentul?
- Lucrul cu evenimente
- Un simplu eveniment handler
- comenzi rapide pentru evenimente comune cu caracter obligatoriu
- Accesul la elementele de tratare a evenimentelor
- Obținerea de mai multe informații despre un eveniment
- acțiuni implicite oprire și propagarea evenimentului
- tratare a evenimentului de resetare
- declanşarea evenimente
Care este evenimentul?
click este generat atunci când utilizatorul face clic pe elementului dblclick butonul mouse-ului generat atunci când un utilizator dublu-clic pe elementul mouseover generat atunci când utilizatorul deplasează cursorul mouse-ului peste o sarcină generată atunci când elementul este, de exemplu, imaginea este complet încărcată pentru a formula generată atunci când formularul de depunere are loc (acest eveniment este generat numai sub formă de elemente)
Lucrăm cu evenimente
Pentru a lucra cu evenimente în jQuery aveți nevoie pentru a crea o funcție numită de tratare a evenimentului. care va lucra cu evenimentul, atunci când se întâmplă. Apoi apelează metoda bind jQuery. care se leagă la funcția unui handler eveniment pentru un eveniment specific al elementului selectat (sau elemente).
Există mai multe metode de jQuery pentru a lega evenimente la Handler, dar bind () metoda este cel principal. Este nevoie de un nume de eveniment și un nume de funcție ca argument și atașează o tratare a evenimentului pentru elementul selectat (e):
Apoi, atunci când are loc un eveniment, funcția handler pornește automat, iar evenimentul este procesat după cum este necesar.
Un exemplu simplu
Următorul exemplu arată cum să creați un handler eveniment simplu si leaga-l la eveniment clic pe butonul formular:
Dacă apăsați butonul de pe pagina, o casetă de mesaj va apărea cu cuvintele „toate -! Salut“.
comenzi rapide pentru evenimente comune cu caracter obligatoriu
Pentru a face viața mai ușoară pentru jQuery are multe comenzi rapide pentru conectarea manipulare eveniment utilizate în mod obișnuit cu funktsiyami-. Iată câteva dintre ele:
click (functionName) se leagă de apel echivalent ( 'clic', functionName) dblclick (functionName) se leagă de apel echivalent ( 'dblclick', functionName) de sarcină (functionName) se leagă de apel echivalent ( 'încărcare', functionName)
De exemplu, puteți rescrie apelul pentru a lega () metoda din exemplul de mai sus, după cum urmează:
Accesul la elementele de tratare a evenimentelor
Atunci când un eveniment determină funcția de tratare, puteți obține acces la elementul DOM ca obiect al handler folosind cuvântul cheie acest lucru. Acest lucru înseamnă că puteți obține mai multe informații despre elementul care a generat evenimentul, puteți manipula elementul de date, și așa mai departe.
Următorul exemplu creează un buton de unda (dezintegrări lin și se potrivește perfect afișat din nou), făcând clic pe ea. Pentru a finaliza sarcina, handler eveniment are acces la un obiect apăsând pe butoanele cu ajutorul acestui. Acesta împachetări jQuery obiect, și apoi invocă metode jQuery fadeOut () și fadeIn () pentru organizarea butonului pulsând:
Obținerea de mai multe informații despre un eveniment
De multe ori handler-ul nu are nevoie de mai multe informații despre un eveniment care l-au lansat. Dar, dacă aveți nevoie de mai multe detalii despre elementul care au generat evenimentul, puteți utiliza acest cuvânt cheie așa cum a fost descris anterior. Cu toate acestea, jQuery vă poate oferi mai multe informații despre eveniment, dacă este necesar.
Pentru a obține mai multe informații despre eveniment, handler-ul trebuie să accepte jQuery obiect eveniment ca argument. În acest caz, o tratare a evenimentului poate avea acces la informațiile suplimentare prin utilizarea diferitelor metode și proprietăți ale obiectului.
Următorul exemplu este afișează nu numai un mesaj atunci când este apăsat butonul, dar, de asemenea, indică data și ora exactă când a avut loc evenimentul, iar ieșirile coordonatele X și Y ale cursorului la momentul respectiv:
Script-ul de mai sus folosește trei proprietăți 3 proprietăți eveniment de mai sus.
timp, atunci când evenimentul timeStamp a avut loc PaginaX coordonata X indicatorul mouse-ului atunci când apăsați butonul din colțul din stânga sus al documentului PaginaY coordonata Y cursorul mouse-ului către când apăsați butonul din colțul din stânga sus al documentului spre
Puteți găsi mai multe informații despre eveniment obiect. inclusiv toate proprietățile și metodele sale. în documentația jQuery (din păcate, rețeaua nu este tradus complet în limba română în această secțiune, informațiile parte pot fi găsite aici, în limba rusă).
acțiuni implicite oprire și propagarea evenimentului
- Acțiunea implicită. Multe evenimente au o acțiune implicită. De exemplu, dacă un utilizator face clic pe link-ul, evenimentul implicit click pentru link-ul se deschide link-ul.
- Distribuția evenimentelor. De asemenea, este cunoscut sub numele de „barbotare“ evenimente care apare atunci când se leagă un handler la același eveniment pentru elementul și societatea mamă. De exemplu, puteți lega un handler la eveniment click pentru link-uri, și legat un alt handler la eveniment click pentru paragraful care conține link-ul. Atunci când utilizatorul face clic pe link-ul, este pornit faceți clic pe referința de tratare a evenimentului în primul rând, și apoi evenimentul „apare“ la paragraful părinte, declanșând handler clic cu eveniment.
De multe ori necesitatea de a preveni lansarea acțiunii implicite, și / sau evenimente de diseminare. De exemplu, dacă setați handler eveniment clic pentru link-ul, care este necesară pentru a verifica corectitudinea completării formularelor înainte de a părăsi această pagină, trebuie să împiedice transferul de link-ul, care este implicit.
Sau, în cazul în care elementul părinte și descendenții săi sunt stabilite în același handler eveniment clic poate fi necesar pentru a preveni lansarea tuturor funcțiilor, în același timp.
jQuery obiect eveniment vă oferă câteva metode pentru a opri un astfel de comportament al programului:
preventDefault () Oprește acțiunea implicită stopPropagation () Oprește „ascensiune“ a evenimentului la elementul părinte
Următorul exemplu se deschide linkul într-o fereastră nouă atunci când este apăsat, și folosește preventDefault () metoda pentru a opri deschiderea link-urile din fereastra curentă:
Puteți opri, de asemenea, acțiunea implicită și difuzarea de evenimente pur și simplu, prin returnarea fals de tratare a evenimentului.
tratare a evenimentului de resetare
Dacă doriți să eliminați de tratare a evenimentelor de la un element, apelați UNBIND metoda (). Pentru a elimina toate manipulare eveniment:
Pentru a elimina un handler eveniment specificat:
declanşarea evenimente
Uneori, trebuie să rulați evenimentul pentru elementele direct din codul. De exemplu, trebuie să prezinte în mod automat un formular atunci când utilizatorul face clic pe link-ul.
jQuery de declanșare () metodă generează un anumit eveniment pentru un element selectat (sau elemente). Numele evenimentului pe care doriți să transferați de declanșare () pentru a declanșa un argument.
În exemplul există o trimitere de formulare atunci când un utilizator face clic pe un link de pe pagina:
Puteți genera, de asemenea, un eveniment cu aceleași metode de comenzi rapide care au fost folosite pentru a lega evenimente (așa cum este descris mai devreme în acest tutorial). Doar o metodă de apel scurt, fără nici un argument. De exemplu:
În această lecție, ne-am uitat la modul de a lucra cu evenimente în jQuery:
- Care este evenimentul?
- Lucrul cu evenimente
- Un simplu eveniment handler
- comenzi rapide pentru evenimente comune cu caracter obligatoriu
- Accesul la elementele de tratare a evenimentelor
- Obținerea de mai multe informații despre un eveniment
- acțiuni implicite oprire și propagarea evenimentului
- tratare a evenimentului de resetare
- declanşarea evenimente
Evenimentele sunt un instrument foarte puternic și util, dar în jQuery mult a fost făcut pentru a facilita lucrul cu ei.
5 lecții coloana ultima „jQuery“
Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.
jQuery plug-in pentru a crea o cronologie.
jQuery plugin pentru a crea o diagramă Gantt.
Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.
postaltomsk
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!