Latest web development tutorials

Zdarzenie jQuery

jQuery jest specjalnie zaprojektowany do obsługi zdarzeń.

Co to jest zdarzenie?

Odpowiedź stronę do różnych użytkowników o nazwie wydarzenia.

Metoda obsługi zdarzeń oznacza, że ​​gdy pewne zdarzenia HTML przy wywołaniu.

Przykład:

  • Przesuń kursor myszy nad elementem.
  • Wybierz przycisk radiowy
  • Kliknij element,

Termin ten jest często stosowany w przypadku "trigger" (lub "wzbudzenia"), na przykład: "wydarzenia przyciśnięcie spustu podczas naciskania klawiszy."

Najczęstsze zdarzenia DOM:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload  

jQuery metoda zdarzenia Składnia

W jQuery, większość zdarzeń DOM posiadać równowartość metod jQuery.

Strona określ zdarzenie click:

. $ ( "P") click ();

Następnym krokiem jest określenie zdarzenia wyzwalające jakim czasie. Można zaimplementować funkcję zdarzenia:

$ ( "P"). Click (function () {
Po wyzwoleniu kod !! // Działanie
});

Powszechnie stosowana metoda zdarzenia jQuery

$ (Document) .ready ()

Metoda $ (document) .ready () pozwala nam w pełni załadować dokument po wykonaniu funkcji. Metoda wydarzeniem w składni jQuery części zostały wymienione.

click ()

kliknij metodę (), gdy zdarzenie jest wyzwalany kliknięcie przycisku wywołuje funkcję.

Funkcja ta jest wykonywana, gdy użytkownik kliknie na elemencie HTML.

W poniższym przykładzie, po kliknięciu na <p> element zdarzeń wyzwalanych ukryć bieżący <p> element:

Przykłady

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

Spróbuj »

dblclick natomiast ()

Po dwukrotnym kliknięciu elementu, dblclick natomiast zdarzenie.

dblclick natomiast () zdarzenia Metoda dblclick natomiast spust, czy określona funkcja uruchomić, gdy wystąpi dblclick natomiast zdarzenie:

Przykłady

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

Spróbuj »

mouseenter ()

Gdy wskaźnik myszy w poprzek elementu, występuje mouseenter zdarzenia.

mouseenter () Metoda mouseenter wyzwalania zdarzeń lub z góry określoną funkcję uruchomić, gdy zdarzenie mouseenter:

Przykłady

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

Spróbuj »

mouseLeave ()

Gdy wskaźnik myszy opuszcza element, mouseLeave zdarzenie.

mouseLeave () Metoda mouseLeave wyzwalania zdarzeń, lub gdy określona funkcja uruchomić, gdy zdarzenie mouseLeave:

Przykłady

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

Spróbuj »

mouseDown ()

Gdy wskaźnik myszy przesuwa się nad elementem i naciskając przycisk myszy, mouseDown zdarzenie.

mouseDown () metoda wywołuje zdarzenie mouseDown lub funkcji w przypadku wystąpienia określonego zdarzenia mouseDown działa:

Przykłady

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

Spróbuj »

mouseUp ()

Po zwolnieniu przycisku myszy nad elementem, mouseUp zdarzenie.

mouseUp () Metoda mouseUp Zdarzenie wyzwalania lub z góry określonej funkcji, aby uruchomić, gdy zdarzenie MouseUp:

Przykłady

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

Spróbuj »

unoszą się ()

Sposób aktywowania () służy do symulacji kursor znajdzie się nad tym wydarzeniu.

Kiedy mysz porusza się do elementów, będzie to powodować pierwszy określonej funkcji (mouseenter), a gdy mysz porusza się poza elementu, będzie to wywołać drugą określoną funkcję (mouseLeave).

Przykłady

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

Spróbuj »

skupić się ()

Gdy element uzyskuje fokus, fokus zdarzenia występują.

Kiedy myszy na wybranym elemencie lub elementach poprzez ukierunkowanie klawisza Tab, element będzie się skupiać.

ostrości () metoda wywołuje zdarzenie ostrości lub określoną funkcję uruchamiania, gdy zdarzenie skupienia:

Przykłady

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

Spróbuj »

blur ()

Gdy element traci ostrość, rozmycie wystąpi zdarzenie.

blur () metoda wywołuje zdarzenie rozmycia lub funkcję uruchomić, gdy określona zdarzenie rozmycia:

Przykłady

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

Spróbuj »