Najnowsze tutoriale tworzenie stron internetowych
 

jQuery Metody Event

❮ Poprzedni Następny Rozdział ❯

jQuery jest dostosowane do reagowania na zdarzenia na stronie HTML.

Jakie wydarzenia?

Wszystkie działania różnych odwiedzającego, że strona internetowa może reagować na zdarzenia są nazywane.

Zdarzenie reprezentuje dokładnie w chwili, gdy coś się dzieje.

Przykłady:

  • przesunięcie myszy nad elementem
  • Wybierając opcję
  • kliknięcie na element

Określenie "fires/fired" jest często stosowany w zdarzeń. Przykład: "The keypress zdarzenie jest zwolniony, w momencie naciśnięcia klawisza".

Oto kilka typowych zdarzeń DOM:

Zdarzenia myszy Zdarzenia klawiaturowe Forma Wydarzenia Dokument / okienne Wydarzenia
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

Składnia dla metod jQuery zdarzeń

W jQuery, większość zdarzeń DOM mają równoważną metodę jQuery.

Aby przypisać zdarzenia click dla wszystkich akapitów na stronie, można to zrobić:

$("p").click();

Następnym krokiem jest określenie, co powinno się zdarzyć, gdy zdarzenie pożary. Musisz przekazać funkcję do zdarzenia:

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

Powszechnie stosowane metody jQuery zdarzeń

$(document).ready()

$(document).ready() metoda ta pozwala nam na wykonywanie funkcji, gdy dokument jest w pełni załadowany. To wydarzenie jest już wyjaśnione w jQuery składni rozdziału.

click()

click() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

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

Poniższy przykład mówi: kiedy pożary zdarzeń kliknięcia na <p> elementu; ukrycie bieżącego <p> elementu:

Przykład

$("p").click(function(){
    $(this).hide();
});
Spróbuj sam "

dblclick()

dblclick() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

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

Przykład

$("p").dblclick(function(){
    $(this).hide();
});
Spróbuj sam "

mouseenter()

mouseenter() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

Funkcja ta jest wykonywana, gdy wskaźnik myszy wejdzie elementu HTML:

Przykład

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

mouseleave()

mouseleave() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

Funkcja ta jest wykonywana, gdy wskaźnik myszy opuści element HTML:

Przykład

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

mousedown()

mousedown() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

Funkcja jest wykonywana, gdy lewy, środkowy lub prawy przycisk myszy jest wciśnięty, gdy wskaźnik myszy znajduje się nad elementem HTML:

Przykład

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

mouseup()

mouseup() Metoda przywiązuje funkcję obsługi zdarzenia do elementu HTML.

Funkcja jest wykonywana, gdy lewy, środkowy lub prawy przycisk myszy zostanie zwolniony, gdy wskaźnik myszy znajduje się nad elementem HTML:

Przykład

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

hover()

hover() Metoda ta dwie funkcje i kombinacja mouseenter() i mouseleave() metod.

Pierwsza funkcja jest wykonywana, gdy mysz wchodzi do elementu HTML, a druga funkcja jest wykonywana, gdy opuszcza mysz elementu HTML:

Przykład

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

focus()

focus() Metoda przywiązuje funkcję obsługi zdarzenia dla pola formularza HTML.

Funkcja ta jest wykonywana, gdy pole formularza dostaje skupić:

Przykład

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

blur()

blur() Metoda przywiązuje funkcję obsługi zdarzenia dla pola formularza HTML.

Funkcja ta jest wykonywana, gdy pole formularza traci fokus:

Przykład

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

on() Metoda

on() Sposób przykłada jeden lub więcej programów obsługi zdarzeń dla wybranych elementów.

Dołączanie zdarzenie click do <p> element:

Przykład

$("p").on("click", function(){
    $(this).hide();
});
Spróbuj sam "

Dołączanie wielu obsługi zdarzeń do <p> element:

Przykład

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

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »

jQuery Metody zdarzeń

Dla pełnego odniesienia zdarzenia jQuery, przejdź do naszej jQuery zdarzenia Reference .


❮ Poprzedni Następny Rozdział ❯