Wydarzenia jQuery | Wyjaśnione
JQuery ma również na celu radzenie sobie z wydarzeniami na stronie internetowej, zdarzenia (jeśli nie jesteś jeszcze znany) to działania użytkownika, które powodują reakcję strony internetowej. Aby lepiej wyjaśnić zdarzenia, możemy powiedzieć, że każde działanie, na przykład, na przykład, jest znana jako zdarzenie strony internetowej myszy, kliknij, dokumentuj ładowanie.
Wydarzenia jQuery | Metody składni i zdarzeń
Składnia zdarzeń jQuery to użycie Operator kropki Po funkcji fabrycznej $ () który zawiera selektory.
$ („p”).Kliknij();
Z powyższym wierszem powstaje słuchacz zdarzeń, następnym krokiem jest zdefiniowanie, co zrobić, gdy to konkretne wydarzenie wykonuje. Aby to zrobić, zdefiniuj funkcję wewnątrz nawiasu zdarzenia, takiego jak:
$ („p”).kliknij (funkcja ()
// Ciało funkcji
);
Wydarzenia jQuery | Przykłady
Aby zademonstrować działanie wydarzeń jQuery i obsługi wydarzeń, zamierzamy skonfigurować stronę HTML z Google CDN hosted jQuery zawartą w jego znaczniku skryptu:
Strona internetowa HTML zawiera te linie do konfiguracji naszej strony internetowej testowania:
Zmieniam kolor na obciążeniu
Cześć! Jestem LinuxBot
Kliknij mnie dwukrotnie!
Kliknij, aby mnie ukryć!
Jeśli uruchomisz plik HTML, otrzymasz następujący wynik w przeglądarce:
Pierwsze wydarzenie To, że zamierzamy przejść, to Dokument-on-gotowy wydarzenie. To zdarzenie jest automatycznie wykonywane, gdy Dom sprawdza, czy strona internetowa została całkowicie załadowana i nie czeka na dalsze działania lub odpowiedzi. Więc zmienimy tło Zagaduj po ładowaniu dokumentu z następującymi wierszami kodu:
$ (dokument).gotowy (funkcja ()
$ („h1”).CSS („tło”, „czerwony”);
);
Otrzymasz następujące dane wyjściowe:
Jak widać, byliśmy w stanie zmienić kolor tła H1 z wydarzeniami jQuery.
Następnie nawett będzie przycisk Naciśnij, Zamierzamy zachęcić użytkownika do jego nazwiska po naciśnięciu przycisku. Użyj kodu:
$ („przycisk”).kliknij (funkcja ()
var xyz = monit („wprowadź swoją pełną nazwę”);
);
Otrzymujesz następujące dane wyjściowe na naciśnięciu przycisku:
Jak widać, po kliknięciu przycisku z napisem „Kliknij mnie!”, Wyświetlono szybkie okno dialogowe z prośbą o pełną nazwę użytkownika.
Wydarzenia kliknięcia myszy są dość powszechne, ale coś, co jest szeroko używane, to zdarzenie podwójnego kliknięcia. Aby to zademonstrować, wyświetlimy komunikat na ekranie jako ostrzeżenie, gdy użytkownik dwukrotnie kliknie akapit za pomocą identyfikatora „DBLCLICK”Z następującymi wierszami kodu:
$ („#dblclick”).dblClick (function ()
alarm („Miłego dnia!");
)
Z powyższymi liniami wyjście jest jako
Po dwukrotnym kliknięciu tekstu użytkownikowi pokazano nowe okno dialogowe Alert z powitaniem.
Możemy nawet użyć „Ten„Odniesienie podczas pracy z wydarzeniami jQuery, aby pokazać, że ukryjemy tekst za pomocą identyfikatora”ukrywać”Po kliknięciu. Robimy to za pomocą następujących wierszy kodu:
$ („#Hide”).kliknij (funkcja ()
$ (to).ukrywać();
);
Po kliknięciu tekstu z napisem otrzymujesz następujące dane wyjściowe „Kliknij, aby mnie ukryć!”:
Tekst był ukryty po kliknięciu raz.
Wniosek
Biblioteka JQuery zapewnia funkcjonalność do zarządzania i reagowania na zdarzenia strony internetowej, który jest powodem, dla którego JQuery jest określane jako „Dostosowane„Do obsługi wydarzeń. Wydarzenia jQuery są dodawane do funkcji wyboru jQuery ($ ()) Korzystając z operatora DOT, tworzy to słuchacz zdarzeń w tym elemencie, który słucha konkretnego zdarzenia. Aby wykonać akcję na podstawie tego wydarzenia, musisz utworzyć funkcję, która informuje stronę internetową, co zrobić dla tego konkretnego wydarzenia. Ta funkcja jest powszechnie zapisywana w nawiasie słuchacza zdarzenia.