Reklama
Wizyt
Dzisiaj: 312Wszystkich: 520589

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

 

Reklama