Jak działa jQuery

19 kwietnia 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Spis treści

  1. 1. jQuery: Podstawy
  2. 2. Uruchamianie kodu, gdy dokument jest gotowy do użytku
  3. 3. Kompletny przykład
  4. 4. Dodawanie i usuwanie klas HTML
  5. 5. Efekty specjalne
  6. 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. 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://learn.jquery.com/about-jquery/how-jquery-works/

Tłumaczenie: Łukasz Piwko

6 komentarzy

  1. Istnieje cos takiego jeszcze dla funkcji jak arguments ;)
    Nie musisz podawac na sztywno zmiennych tylko odczytac przez obiekt arguments. Tak jakbys zasymulowal przeciazenie metod w objekcie.

    Odpowiedz
  2. Zastrzelil bym cie jakbys uczyl mnie tego:

    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().

    Bo wystraczy dac:

    $.get(’myhtmlpage.html’, mojaFunkcjaZwrotna(param1, param2){

    });

    i patrz cholera zadziala. Radze autorowi poczytac:

    http://api.jquery.com/jQuery.get/

    Odpowiedz
  3. Albo to:

    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.

    Przeciez to herezja. $.get to skrocony zapis ajaxa ($.ajax) bezposredni dla moetody typu get. Funkcja podana nie zadziała gdy z ajax nie zwroci sie kod 202 (czyli odwolanie do nieistniejącej strony na aktualnym serwerze). Poza tym dla $.get przekazuje sie dodatkowe argumemnty.
    A tak ogolnie funkcja przyjmuje argumenty, ktore mozna podac w odwolanej nazwie lub nie.

    Odpowiedz
  4. Bo sa bzdety napisane, np: 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:

    Po onload jest wszytsko wczytane reazem z dokumentem. Ale trwa to dluzej bo tez trzeba czekac az zostana wczytane zasoby (pliki zewnetrzne). Prosta instrukcja jquery to wlasnie moment samego wczytania dom. Moge podac prosta instrukcje:

    $(window).bind(’load’, function(){

    })

    tez tak mozna to opisac. Autor chyba do konca nie wie o czym pisze. Ciekawe czy rozumie pojecie, ze:

    window.onload = function(){}

    jest przestarzale. Bo wczesniej np. dodane zdarzenia onload dla window zostanal napdpisane.

    Odpowiedz
  5. zdarzenie ready a onload jest czymś innym. Onl;oad jest w momencie kompletnego załadowania strony (obrazki, zewnętrzne pliki css itp.), natomiast ready jest wykonany w momencie załadaowania całego domu html (bez obrazków i zew. plików).

    Odpowiedz

Dyskusja

Twój adres e-mail nie zostanie opublikowany.