Zdarzenia biblioteki jQuery
Technikum » PAI » Biblioteka jQuery » Zdarzenia biblioteki jQuery
Zdarzenia biblioteki jQuery 4.2.1. Opis zdarzeń
Obsługa zdarzeń to jedno z podstawowych działań wykonywanych na stronie interne-towej. Biblioteka jQuery umożliwia użycie
wszystkich zdarzeń języka JayaScript. Jedyna różnica polega na tym, że z nazw zdarzeń został usunięty prefiks on.
Podstawowym sposobem obsługi zdarzeń jest wykorzystanie metody bind ( ) . Jest to tak zwane do-wiązanie do zdarzenia
programu jego obsługi (tworzymy powiązanie między obiektem DOM a zdarzeniem). Metoda bind ( ) ma postać:
Wse/ektor').bind(typ zdarzenia, program obsługi_zdarzenia)
Przykład 4.9
$(document).ready(function()(
$('.blok').bind(click, function0{ alert("Uwaga!");
});
Istnieje również wersja skrótowa zapisu obsługi zdarzeń. Przykład 4.10
$(document).ready(function(){ $(..blok').click(function()( alert("Uwaga!");
Działanie tak zapisanego kodu jest takie samo jak działanie metody bind ( ) . Jego zaletą jest krótszy kod.
Wybrane zdarzenia biblioteki jQuery zostały przedstawione w tabeli 4.4.
Tabela 4.4. Zdarzenia biblioteki jQuery Nazwa zdarzenia Opis
ready występuje po załadowaniu dokumentu HTML
click występuje po kliknięciu przycisku myszy
mouseout występuje po usunięciu kursora myszy z wybranego elementu
mouseover występuje po umieszczeniu kursora myszy w obrębie wybranego
elementu
hover występuje po ustawieniu kursora myszy nad wybranym elementem
4.2.2. Zdarzenia myszy
Przy użyciu zdarzeń obsługiwanych przez bibliotekę jQuery można animować menu utworzone na stronie internetowej, np. przez
podświetlanie elementu, nad którym po¬jawi się kursor myszy (rysunek 4.4). Po usunięciu kursora myszy przywrócony zostanie
poprzedni sposób wyświetlania elementu. Do tego celu można wykorzystać zdarzenie hover . Po najechaniu myszą na element
listy nastąpi dodanie klasy (addClass 0 ) do elementu, a po przesunięciu myszy poza element nastąpi jej usunięcie z
elementu (removeClass 0 ).
Menu
• Pierwszy element gi element
• Trzeci element
• Czwarty element
Rysunek 4.4. Podświetlanie elementu, nad którym pojawia się kursor myszy
Przed przygotowaniem skryptu, który będzie powodował podświetlenie wybranego elementu, w dokumencie HTML w arkuszu stylów
należy zdefiniować nową klasę (np. li . wybor). Po najechaniu myszą na element klasa li . wybor zostanie do niego dodana,
a po odsunięciu myszy zostanie usunięta.
Przykład 4.11 Kod HTML:
Menu
Menu
- Drugi element
- Trzeci element
- Czwarty element
Kod j Query:
$(document).ready(function()
$("ul#menu li").hover(
function()(
$(this).addClass('wybor');
function(){
$(this).removeClass('wybor');
) ;
ł ) ;
Pierwsza funkcja w podanym wyżej kodzie dodaje klasę do elementu, druga usuwa ją. Użyte w kodzie słowo kluczowe this
stanowi odwołanie do bieżącego obiektu ("ul#menu li") wykonywanej funkcji.
4.2.3. Zdarzenia formularza
Biblioteka jQuery oferuje grupę zdarzeń, które są związane z obsługą formularza. Mogą one zostać wykorzystane np. do
sprawdzania poprawności wypełnienia formularza, do powiadomienia użytkownika o jakimś działaniu lub do określonego
działania, gdy użytkownik opuści pole. Zdarzenia formularza biblioteki jQuery zostały przedstawione w tabeli 4.5.
Tabela 4.5. Zdarzenia formularza