jQuery dla zaawansowanych

Zasadniczą rolą, jaką pełni JavaScript na stronach internetowych, jest obsługa zdarzeń i wywoływanie przypisanych do nich akcji. Jest to podstawowe rozszerzenie statycznych dokumentów HTML o elementy dynamiczne, umożliwiające nawiązywanie interakcji z użytkownikami. Zdarzeniem może być np. kliknięcie, aktywacja pola formularza czy naciśnięcie klawisza na klawiaturze.

Jako webmaster masz kontrolę nad tym, co dzieje się po wystąpieniu danej akcji - definiując odpowiednie reguły. Możesz to zrobić, dodając do elementów HTML atrybuty odpowiedzialne za zdarzenia, np. w ten sposób:

1. <div class="pk">
2. <p onclick="this.style.color='red'">Kliknij na mnie!</p>
3. <p onclick="this.style.color='red'">
4. Albo na mnie!</p>
5. </div>

Listing zwinięty - 5 linii

Powyższy kod spowoduje zmianę koloru tekstu zawartego w akapitach na czerwony po ich kliknięciu. Zdecydowanie lepszym sposobem będzie jednak nie dołączanie do kodu HTML atrybutów odnoszących się do zdarzeń (jak tutaj "onclick"), a zamiast tego umieszczenie odpowiedniej reguły w zewnętrznym kodzie JavaScript.

Jest to właściwy sposób na separację struktury dokumentu od warstwy zachowania. O ile w "czystym" JavaScripcie osiągnięcie tego nie jest zbyt proste (z uwagi na różnice w obsłudze odpowiednich funkcji przez przeglądarki), o tyle korzystając z jQuery, możemy dojść do tego w bardzo łatwy sposób:

 1. $(document).ready(function() {
 2. $('.pk p').click(function() {
 3. $(this).css('color', 'red');
 4. });
 5. });
 6. ----------------------------
 7. <div class="pk">
 8. <p>Kliknij na mnie!</p>
 9. <p>Albo na mnie!</p>
10. </div>

Listing zwinięty - 10 linii

Zamiast umieszczać akcje wewnątrz elementów "p" w kodzie HTML, sprawiliśmy, że po kliknięciu na dowolny akapit będący potomkiem elementu o klasie "pk", wywołana zostanie metoda css(), ustalająca kolor akapitu na czerwony. Zamiennikiem atrybutu "onclick" jest tutaj metoda click() skojarzona ze zdarzeniem "click" - jednym z wielu zdarzeń, które obsługuje jQuery.

Zwróć uwagę na użycie nowego obiektu "this" - jest to odwołanie do elementu, który wywołał dane zdarzenie. Załóżmy, że chcemy, aby tym razem kolor akapitów został zmieniony po ich dwukrotnym kliknięciu (tzw. dwukliku). Wszystko, czego potrzebujemy, to zastąpienie obecnej metody click() inną metodą dblclick(), powiązaną ze zdarzeniem "dblclick":

1. $(document).ready(function() {
2. $('.pk p').dblclick(function() {
3. $(this).css('color', 'red');
4. });
5. });

Listing zwinięty - 5 linii

Przykładem ciekawej metody powiązanej ze zdarzeniem może być toggle(), która daje w naszym przypadku możliwość przełączania koloru tekstu akapitu w zależności od kolejności kliknięcia na niego. W ten sposób możemy ustalić, że po pierwszym kliknięciu tekst akapitu będzie czerwony, a po kolejnym wróci do czarnego, po czym następne kliknięcie znowu będzie skutkowało ustawieniem koloru czerwonego:

1. $(document).ready(function() {
2. $('.pk p').toggle(function() {
3. $(this).css('color', 'red');
4. }, function() {
5. $(this).css('color', 'black');
6. });
7. });

Listing zwinięty - 7 linii

W tym przypadku musimy dodać po przecinku drugą funkcję, która spowoduje ustawienie dla akapitu koloru czarnego. Sprawdzając działanie tego kodu w przeglądarce, zwróć uwagę na to, że dla każdego z dwóch akapitów ich stany zapamiętywane są oddzielnie. Chcąc osiągnąć identyczny efekt w czystym JavaScripcie, nie ucieklibyśmy od perspektywy napisania znacznej ilości kodu. W jQuery możemy to osiągnąć praktycznie bez żadnego wysiłku.

Przy okazji warto wspomnieć o kolejnej metodzie: hover(), która może zastąpić znane ci na pewno zdarzenia "mouseover" i "mouseout". Jej użycie jest równie proste:

1. $(document).ready(function() {
2. $('.pk p').hover(function() {
3. $(this).css('color', 'red');
4. }, function() {
5. $(this).css('color', 'black');
6. });
7. });

Listing zwinięty - 7 linii

Tutaj również korzystamy z dwóch funkcji. Pierwsza odpowiada za stan po najechaniu kursorem na dany element, a drugi za stan po jego opuszczeniu. Możemy użyć metody hover() na dowolnym elemencie jako zamiennika pseudoklasy ":hover" w CSS, która nie jest w pełni obsługiwana przez Internet Explorera.

Oczywiście nie musimy się ograniczać do samych modyfikacji wizualnych, możliwych do uzyskania w CSS. Spróbujmy za pomocą metody hover() osiągnąć efekt pojawiania się i znikania dodatkowego akapitu, który domyślnie będzie ukryty, a stanie się widoczny po najechaniu na jeden z dwóch pozostałych.

Najpierw dodajmy dodatkowy element do kodu HTML:

1. <div class="pk">
2. <p>Najedź na mnie!</p>
3. <p>Albo na mnie!</p>
4. </div>
5. <p id="poj">Wtedy ja się pojawię!</p>

Listing zwinięty - 5 linii

W kodzie JavaScript powinniśmy na początku ukryć ów nowy akapit, a potem dodać do metody hover() nowe funkcje, odkrywające i ukrywające go. Skorzystamy z dwóch nowych metod: show() oraz hide().

Rys. 1. Dzięki wykorzystaniu metod show() i hide(), po najechaniu na jeden z akapitów pojawia się pod nimi kolejny

Umożliwiają one, jak same nazwy wskazują, ukrycie lub odkrycie danego elementu (rysunek 1). Kod przedstawia się następująco:

 1. $(document).ready(function() {
 2. $('#poj').hide();
 3. $('.pk p').hover(function() {
 4. $(this).css('color', 'red');
 5. $('#poj').show();
 6. }, function() {
 7. $(this).css('color', 'black');
 8. $('#poj').hide();
 9. });
10. });

Listing zwinięty - 10 linii

Wywołanie metody hide() na elemencie "#poj" sprawi, że ten zostanie ukryty zaraz po tym, jak zostanie załadowany model DOM dokumentu i w praktyce będzie on od razu niewidoczny.

Rys. 2. Inspekcja drzewa dokumentu (DOM) wykaże, że metody show() oraz hide() dodają do naszego akapitu nowy atrybut stylu wewnętrznego („style”) z właściwością „display” i odpowiednią wartością („none” lub „block”)