Jak działa jQuery

Spis treści

1. jQuery: Podstawy
2. Uruchamianie kodu, gdy dokument jest gotowy do użytku
3. Kompletny przykład
4. Dodawanie i usuwanie klas HTML
5. Efekty specjalne
6. Funkcje i funkcje zwrotne
1. 6.1. Funkcje zwrotne bez argumentów
2. 6.2. Funkcje zwrotne z argumentami
  1. 6.2.1. Rozwiązanie nieprawidłowe
  2. 6.2.2. Poprawne rozwiązanie
7. Literatura dodatkowa

1. jQuery: Podstawy

Poradnik ten zawiera podstawowe informacje na temat tego, jak rozpocząć korzystanie z biblioteki jQuery. Na początek utworzyć prosty testowy dokument HTML o następującej treści:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
    </script>
  </body>
</html>

W atrybucie src elementu <script> wpisz adres swojej kopii pliku jquery.js. Jeśli na przykład plik ten znajduje się w tym samym katalogu, co plik HTML, możesz użyć następującego elementu script:

<script src="jquery.js"></script>

Plik biblioteki jQuery można pobrać na stronie Pobieranie biblioteki jQuery.

2. Uruchamianie kodu, gdy dokument jest gotowy do użytku

Pierwszą czynnością wykonywaną przez większość programistów używających języka JavaScript jest napisanie kodu podobnego do pokazanego poniżej:

 window.onload = function(){ alert("Witaj"); }

Program ten zostanie wykonany po wczytaniu strony przez przeglądarkę internetową. Niestety kod JavaScript zacznie działać dopiero po zakończeniu wczytywania przez przeglądarkę wszystkich obrazów (wliczając banery reklamowe). Powodem użycia instrukcji window.onload jest to, że dokument HTML nie jest jeszcze w całości wczytany, gdy po raz pierwszy próbujemy uruchomić nasz kod.

Problemy można rozwiązać poprzez użycie prostej instrukcji jQuery, która sprawdza stan dokumentu i czeka, aż będzie on gotowy do użycia. Instrukcja, o której mowa to zdarzenie ready:

 $(document).ready(function(){
   // Miejsce na nasz kod
 });
W zdarzeniu ready można zdefiniować procedurę obsługi kliknięć odnośnika: 
 $(document).ready(function(){
   $("a").click(function(event){
     alert("Dzięki za wizytę!");
   });
 });

Zapisz zmiany w pliku HTML i odśwież stronę w przeglądarce. Kliknięcie odnośnika powinno powodować pojawienie się okienka przed przejściem na stronę główną serwisu jQuery.

Domyślne zachowanie przeglądarki w odpowiedzi na kliknięcie i większość innych zdarzeń można wyłączyć za pomocą wywołania funkcji event.preventDefault() w procedurze obsługi tych zdarzeń. Poniżej znajduje się przykład zablokowania przejścia na stronę jquery.com:

 
 $(document).ready(function(){
   $("a").click(function(event){
     alert("Jak widać, teraz kliknięcie odnośnika nie powoduje przejścia na stronę jquery.com");
     event.preventDefault();
   });
 });

3. Kompletny przykład

Poniżej znajduje się przykładowy kompletny plik HTML, w którym użyto przedstawionego powyżej skryptu. Zwróć uwagę, że plik główny jQuery jest w nim dołączony z serwisu CDN Google. Ponadto należy zaznaczyć, że mimo iż w tym przykładzie skrypt został umieszczony w elemencie <head>, lepiej jest wszystkie skrypty zapisywać w osobnym pliku i dołączać je za pomocą atrybutu src elementu <script>.

 <!DOCTYPE html>
 <html lang="pl">
 <head>
   <meta charset="utf-8">
   <title>Demo jQuery</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("Jak widać, teraz kliknięcie odnośnika nie powoduje przejścia na stronę jquery.com");
         event.preventDefault();
       });
     });
   </script>
 </body>
 </html>

4. Dodawanie i usuwanie klas HTML

Ważne: wszystkie przedstawione poniżej przykłady kodu jQuery należy umieścić w zdarzeniu ready, aby zostały wykonane dopiero wtedy, gdy dokument będzie gotowy do użytku. Zobacz część Uruchamianie kodu, gdy dokument jest gotowy do użytku.

Kolejną często wykonywaną czynnością jest dodawanie (i usuwanie) klas. Zaczniemy od zdefiniowania kilku arkuszy stylów w nagłówku naszego dokumentu HTML:

 <style>
    a.test { font-weight: bold; }
 </style>

Następnie wywołamy funkcję addClass w skrypcie:

  $("a").addClass("test");

Dzięki temu tekst wszystkich elementów a będzie pogrubiony. Aby usunąć klasę, należy użyć funkcji removeClass.

 $("a").removeClass("test");

Każdy element języka HTML można przypisać do kilku klas.

5. Efekty specjalne

Biblioteka jQuery zawiera kilka ciekawych efektów, których użycie może sprawić, że Twoja strona będzie się wyróżniać na tle innych stron. W ramach przykładu zmodyfikujemy używane wcześniej zdarzenie kliknięcia:

 
 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Teraz kliknięcie odnośnika powinno spowodować jego powolne zniknięcie.

6. Funkcje i funkcje zwrotne

Funkcja zwrotna to funkcja przekazywana jako argument do innej funkcji i wykonywana, gdy działanie zakończy jej funkcja nadrzędna. Tym, co wyróżnia funkcje zwrotne jest to, że funkcje znajdujące się za ?rodzicem? mogą zostać wykonane przed funkcją zwrotną. Ważne jest też, aby wiedzieć, jak poprawnie przekazywać funkcje zwrotne. Sam często zapominałem poprawnej składni.

6.1. Funkcje zwrotne bez argumentów

Funkcję zwrotną bez argumentów przekazuje się następująco:

 $.get('myhtmlpage.html', mojaFunkcjaZwrotna);

Uwaga: drugi parametr w powyższym wywołaniu to nazwa funkcji (ale nie będąca łańcuchem i bez towarzyszącego nawiasu). W języku JavaScript funkcje są ?pełnoprawnymi obywatelami?, a więc można je przekazywać, jak zmienne i wykonywać w późniejszym czasie.

6.2. Funkcje zwrotne z argumentami

Może nurtuje Cię pytanie: ?Jak w takim razie przekazywać argumenty?”.

6.2.1. Rozwiązanie nieprawidłowe

Niepoprawne rozwiązanie (nie zadziała!)

 $.get('myhtmlpage.html', mojaFunkcjaZwrotna(param1, param2));

Ten kod nie zadziała, ponieważ wykonuje wywołanie mojaFunkcjaZwrotna(param1, param2), a następnie przekazuje zwróconą wartość jako drugi parametr do funkcji $.get().

6.2.2. Poprawne rozwiązanie

Błąd w poprzednim przykładzie polega na tym, że wartość wywołania funkcji myCallBack(param1, param2) jest obliczana przed przekazaniem jej w ogóle jako funkcji. W takich przypadkach w języku JavaScript, a więc także i w bibliotece jQuery, wymagany jest wskaźnik na funkcję.

W poniższym przykładzie utworzono funkcję anonimową (czyli po prostu blok instrukcji), którą zarejestrowano jako funkcję zwrotną. Zwróć uwagę na zapis function(){. Ta funkcja anonimowa ma tylko jedno zadanie: wywoływać funkcję mojaFunkcjaZwrotna z wartościami parametrów param1 i param2 w zewnętrznym zakresie.

 
$.get('mojastronahtml.html', function(){
  mojaFunkcjaZwrotna(param1, param2);
});

Wartości param1 i param2 są obliczane, gdy funkcja $.get zakończy pobieranie strony.

7. Literatura dodatkowa

Warto przeczytać całą Dokumentację, która jest bardzo obszerna i zawiera informacje o wszystkich właściwościach jQuery. Jeśli masz jakieś pytania, możesz je zadać na forach jQuery.

Autor: John Resig
Źródło: http://docs.jquery.com/Tutorials:How_jQuery_Works
Tłumaczenie: Łukasz Piwko (19 kwietnia 2012)