jQuery Metode Eveniment

jQuery este croitor-a făcut pentru a răspunde la evenimente într-o pagină HTML.

Care sunt evenimente?

Toate acțiunile diferite vizitatorilor că o pagină web poate răspunde la evenimente sunt numite.

Un eveniment reprezintă momentul precis când se întâmplă ceva.

Exemple:

mutarea unui mouse-ul peste un element
selectarea unui buton radio
clic pe un element

Termenul "fires/fired" este adesea folosit cu evenimente. Exemplu: „The keypress eveniment este activat, în momentul în care apăsați o tastă“.

Iată câteva evenimente comune DOM:

mouse-ul Evenimente	tastatură Evenimente	Formular Evenimente	Document / fereastra Evenimente
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery Sintaxa Metode Eveniment

În jQuery, cele mai multe evenimente DOM au o metoda jQuery echivalentă.

Pentru a aloca un eveniment click pentru toate punctele de pe o pagină, puteți face acest lucru:

$("p") . click() ;

Următorul pas este de a defini ceea ce ar trebui să se întâmple atunci când incendiile eveniment. Tu trebuie să treacă o funcție la eveniment:

$("p") . click(function() {
// action goes here!!
});

jQuery Metode utilizate în mod obișnuit Eveniment

$(document). ready()

$(document). ready() $(document). ready() metoda ne permite să execute o funcție în cazul în care documentul este complet încărcată. Acest eveniment este deja explicat în jQuery Sintaxa capitol.

click()

click() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executată atunci când utilizatorul face clic pe elementul HTML.

Exemplul următor spune: atunci când un clic pe un eveniment incendii <p> Element; ascunde curent <p> elementul:

Exemplu

$("p").click(function(){
$(this).hide();
});

Încearcă - l singur »

dblclick()

dblclick() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executată atunci când utilizatorul face dublu-clic pe elementul HTML:

Exemplu

$("p").dblclick(function(){
$(this).hide();
});

Încearcă - l singur »

mouseenter()

mouseenter() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executată atunci când indicatorul mouse-ului intră în elementul HTML:

Exemplu

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Încearcă - l singur »

mouseleave()

mouseleave() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executată atunci când cursorul mouse-ului părăsește elementul HTML:

Exemplu

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

Încearcă - l singur »

mousedown()

mousedown() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executat, atunci când stânga, butonul din mijloc sau dreapta al mouse-ului este apăsat în jos, în timp ce mouse-ul este de peste elementul HTML:

Exemplu

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

Încearcă - l singur »

mouseup()

mouseup() Metoda se atașează o funcție de tratare a evenimentului la un element HTML.

Funcția este executat, atunci când stânga, butonul din mijloc sau dreapta al mouse-ului este eliberat, în timp ce mouse-ul este de peste elementul HTML:

Exemplu

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

Încearcă - l singur »

hover()

hover() Metoda are două funcții și este o combinație a mouseenter() și mouseleave() metode.

Prima funcție este executată atunci când mouse-ul intră în elementul HTML, iar a doua funcție este executată atunci când mouse-ul părăsește elementul HTML:

Exemplu

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Încearcă - l singur »

focus()

De focus() Metoda se atașează o funcție de tratare a evenimentului la un câmp de formular HTML.

Funcția este executată atunci când câmpul de formular devine se concentreze:

Exemplu

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

Încearcă - l singur »

blur()

blur() Metoda se atașează o funcție de tratare a evenimentului la un câmp de formular HTML.

Funcția este executată atunci când câmpul de formular pierde se concentreze:

Exemplu

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Încearcă - l singur »

on() Metoda

on() metoda atașează unul sau mai multe evenimente pentru manipulare elementele selectate.

Atașați un eveniment clic pentru un <p> Element:

Exemplu

$("p").on("click", function(){
$(this).hide();
});

Încearcă - l singur »

Atașați mai multe stivuitoare eveniment într - un <p> Element:

Exemplu

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »