Menu







jQuery

PL
Data dodania: 2011-10-08, Autor: kartofelek, Dodał: Karol, Wyświetleń: 693

jQuery

jQuery to jedna z najbardziej popularnych bibliotek/frameworków do javascript. Jej popularność oczywiście znikąd się nie bierze. Dzięki tej bibliotece jesteśmy w stanie o wiele szybciej i sprawniej pisać nasze skrypty, nie martwiąc się przy tym o kompatybilność z różnymi przeglądarkami.

Główne zalety tej biblioteki:

  • Mała objętość skryptów, prosta składnia
  • Mała objętość samej biblioteki
  • Bardzo dużo dodatkowych pluginów

Minusy? Pisanie z wykorzystaniem jQuery rozleniwiają ^^.

Zaczynamy

Aby zacząć używać jQuery, będziemy musieli standardowo dołączyć jej plik do naszej strony. Możemy albo ściągnąć plik z biblioteką na dysk, albo odwołać się np do zewnętrznych zasobów, które udostępniają zawsze najnowszą wersję tego pliku:

<script type="text/javascript" src="jquery.js"></script> //dla lokalnego pliku   
//lub   
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Możemy też połączyć oba sposoby, co jest najbezpieczniejszym sposobem. Jeżeli jquery nie zostanie pobrane z zewnętrzengo adresu, wówczas uruchomimy ją lokalnie poprzez utworzenie skryptu z src wskazującym na lokalny zasób:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>!window.jQuery && document.write('<script src="jquery.min.js"><\/script>')</script>

Osobiście polecam właśnie tą metodę. Pobieranie jQuery z zewnątrz nie obciążą naszego łącza plus udostępnia zawsze najnowszą wersję tej biblioteki. Dodatkowe informacje znajdziesz tutaj

Znak $ i składnia łańcuchowa

jQuery ma bardzo zwięzłą konstrukcję skryptów, do której wykorzystuje składnię łańcuchową. Każdy taki łańcuch rozpoczyna się znakiem $, a poszczególne polecenia są łączone w łańcuchy za pomocą kropki. Poniższy przykład ilustruje zastosowanie jquery:

$('#pierwszy').css('color','red').hide('slow').show(3000);

Powyższe polecenie wystarczy podzielić względem kropek:

  1. Pobieramy obiekt #pierwszy, po czym wykonujemy na nim kilka operacji:
    1. Ustawiamy mu kolor na czerwony
    2. Ukrywamy go (wolno)
    3. Po czym z wolna pokazujemy (3 sekundy)
Kliknij mnie

Banalna sprawa - prawda?. Ileż kodu trzeba by było napisać w czystym JS żeby uzyskać podobne efekt. Dodatkowo trzeba by było obsłużyć kilka wersji przeglądarek...

Poniżej zamieszczam kilka przykładów dla pobierania elementów ze strony:

$('*')                       //pobranie wszystkich elementów na stronie
    $(div)                      //pobranie wszystkich divów na stronie
    $('div.czerwony')           //pobranie div o klasie czerwony
    $('div.czerwony#duzy')      //pobranie div o klasie czerwony i id duzy
    $('div p')                  //wszystkie p zawierające się w div
    $("div#cont > p")            //wszystkie p mieszczące się bezpośrednio w div o id cont
    $('p,span , div.czerwoy')   //pobranie wszystkich p, span oraz divów o klasie czerwony
    $('ul li.wyroznione')       //pobranie li o klasie wyroznione
    $('p:first')                //pobranie pierwszego p
    $('img[width=100])          //pobranie wszystkich img, które mają width=100
    $("label + input")          //wszystkie inputy, które bezpośrednio przed sobą mają label
    $("div#pierwszy ~ div")     //wszystkie divy, które następują po div#pierwszy

Jak widać, w większości przypadków wystarczy wykorzystać prostą składnię CSS.

JQuery udostępnia także sporo metod dodatkowych, które możemy wykorzystać do pobrania obiektów. Wśród nich możemy wymienić takie jak:

  • eq(index) - czyli pobierz z listy pobranych elementów element z danym indeksie,
  • lt(index) - pobierz elementy o indeksie mniejszym od danego,
  • gt(index) - pobierz elementy o indeksie większym itp.
$('*') //pobranie wszystkich elementów na stronie
    $('div.czerwony p').eq(2) //pobranie trzeciego p w div.czerwony
    $('p span').gt(1).css({color:red,fontWeight:bold}) //wszystkie spany w p z pominięciem pierwszego ustawione mają kolor czerwony i są przekreślone

Podobnych pobrań można wymieniać w nieskończoność... Nie ma sensu wymieniać ich wszystkich w tym miejscu. Wystarczy odwiedzić stronę http://jqapi.com/ po czym przejść do zakładki Selectors > Basic filters (okazyjnie przeglądając i inne zakładki).

document ready

Aby operować na elemetach strony powinniśmy je pobrać. Aby mieć pewność że takie elementy już istnieją (czyli, że dokument DOM został utworzony), skorzystamy z instrukcji $(document).ready, która wywoła wewnętrzny kod dopiero po załadowaniu całego dokumentu strony.

$(document).ready(function() {
    //...
        tutaj nasze skrypty jquery
    //...
    })

W praktyce 99% skryptów jQuery wstawiane jest wewnątrz tej konstrukcji, dlatego musimy ją znać jak paciorek.

Aby się nie powtarzać w nieskończoność, w poniższych przykładach będę zamieszczał tylko omawiane części kodu. W praktyce każdy z nich powinien zawierać stosowne tagi oraz część $(document).ready(). Mam nadzieję, że czytając poniższy kod będziesz w stanie spokojnie sobie go przerobić dla własnych celów.

Eventy w jquery

Obsługa zdarzeń w jquery jest dziecinnie prosta. Wystarczy przypiąć zdarzenie do pobranego obiektu bezpośrednio, lub skorzystać z metody bind().

$('input#guzik').click(function() {
        console.log('test');
    })
    
    //lub
    
    $('input#guzik').bind('click', function() {
        console.log('test');
    })
    
    //lub w wersji > 1.4
    
    $('input#guzik').bind({
        'click' : function() {
            console.log('test');
        }
    })

Dla przycisku #guzik przypisaliśmy zdarzenie click, w którym wykonujemy anonimową funkcję. Wypisuje ona w konsoli firebuga tekst "test" (jeżeli nie masz FF wraz z tym dodatkiem, zamień tą linijkę na inną komendę typu alert() albo podobną). Nie ma znaczenia którą metodę przypisania użyjemy - wszystkie działają identycznie. Ostatnia metoda wydaje się nieco długa, jest ona jednak bardzo czytelna, jeżeli chcemy podpiąć pod dany obiekt kilka zdarzeń na raz.

Aby odwołać się do obiektu wywołującego, wskazujemy go instrukcją this. To już wiemy z rozdziału o zdarzeniach. Nas jednak nie interesuje "czysty" obiekt js, a jego jquerowy odpowiednik. Aby taki obiekt uzyskać, wystarczy nasz "this" podstawić pod jquery, stosując konstrukcję $(this). Dzięki temu uzyskujemy obiekt jquery wskazujący na wywołujący element.

$('a.link').click(function() {
        alert($(this).attr('href'));
        return false;
    })

    <a class="link" href="http://jakis_adres.com">Pokaż href</a>
    <a class="link" href="http://jakis_inny_adres.com">Pokaż href</a>

Pokaż href   Pokaż href

$('p').each(function() {
        var $t = $(this);
        $t.css({
            "color" : "blue",
            "text-decoration" : "underline"
        });
        $t.click(function() {
            alert('Link prowadzi do: ' + $(this).attr('href'))
        })
    })

Dla każdego (each) pobranego p wykonujemy funkcję, w której ustawiamy dla p kolor niebieski wraz z podkreśleniem, oraz ustawiamy zdarzenie click, w którym wykonujemy funkcję wyświetlającą okienko alert z atrybutem href danego p. Znak $ przy nazwie zmiennej $t to tylko ułatwienie dla nas. Dzięki temu wiemy, że dana zmienna jest obiektem jquery, i możemy dla niej wywoływać wszystkie metody tej biblioteki.

Oczywiście uniwersalnosć jQuery sprawia, że powyższy kod możemy nieco "spakować":

$('p').css({color:blue,textDecoration:underline})
          .click(function() {
                alert('Link prowadzi do: ' + $(this).attr('href'))
          })

Animacja w jQuery

jQuery udostępnia kilka ciekwych efektów gotowych do użycia:

  • show(szybkosc, funkcja_zwrotna) - pokazanie obiektu. Parametry są opcjonalne. Szybkość możemy podać zarówno słownie: "slow", "normal", "fast", lub liczbowo. Parametr f wskazuje nazwę funkcji która zostanie wywołana po zakończeniu animacji. Można tutaj zastosować funkcję anonimową:
  • hide(szybkosc, funkcja_zwrotna) - ukrywa obiekt: 
    $("div#ukryty").click(function() {
            $(this).hide('slow', function() {
                console.log('obiekt został ukryty');
            });
        });
  • fadeIn(szybkość, funkcja_zwrotna) - płynne pojawianie się obiektu. 
    $("a").click(function () {
            $("div").fadeIn(3000);
            return false;
        });
  • toggle() - funkcja pokazuje lub ukrywa obiekt w zależności od danego stanu
  • fadeOut(szybkość, funkcja_zwrotna) - płynne ukrywanie obiektu.
  • fadeTo(szybkość, przezroczystość, funkcja_zwrotna) - płynne ustawienie przezroczystości do poziomu z parametru "przezroczystość": 
    $("a").click(function() {
            $("div#pierwszy").fadeTo(2000, 0.32);
        });
  • slideDown(szybkość, funkcja_zwrotna) - płynne "wysunięcie" obiektu w dół
  • slideUp(szybkość, funkcja_zwrotna) - płynne "zsunięcie" obiektu w górę
  • slideToggle(szybkość, funkcja_zwrotna) - płynne "zsunięcie" obiektu w górę lub dół - w zależności od aktualnego stanu

Są to standardowe efekty jQuery i w większości przypadków wystarczają do naszych zastosowań. Są jednak przypadki, że chcielibyśmy stworzyć własną animację.

Możemy to zrobić za pomocą metody animate(animowane_wlasciwosci, czas, rodzaj_animacji, funkcja_zwrotna). Najbardziej interesującymi nas parametrami są "animowane_wlasciwosci", w których podajemy atrybuty css, oraz czas w którym wykona się animacja:

$("#go").click(function(){
        $("#block").animate({ 
            width: "500px",
            opacity: 0.4,
            marginLeft: "0.6in",
            fontSize: "3em", 
            borderWidth: "10px"
        }, 1500 );
    });

DIV

Parametr funkcja_zwrotna jak w przypadku pozostałych efektów wywołuje funkcję, która wykona się po zakończeniu animacji.

Parametr rodzaj_animacji określa przebieg animacji. jQuery posiada wbudowane dwa rodzaje przebiegu animacji: "linear" i "swing". Aby skorzystać z innych rodzajów, powinniśmy skorzystać z dodatkowych pluginów do jQuery, np. tego: http://gsgd.co.uk/sandbox/jquery/easing/.

$("p#nty").click(function() {
            $(this).animate({
                height:200,
                width:400,
                opacity: 0.5
                }, 1000, 'linear', function(){ alert("koniec animacji");
            });
        });

Kliknij tutaj

W powyższych przykładach animowane właściwości ustawiłem na sztywno.

W jQuery od wersji 1.2 można zastosować konstrukcję -= lub += która odejmie lub doda odpowiednią wielkość od aktualnej:

$("#go2").click(function(){
            $("#block2").animate({
                width: "+= 300",
                height: "+= 50",
                opacity: "-= 0.5",
                duration : 1000 //<- inny sposób deklaracji czasu trwania animacji
            });
        });

DIV

Na zakończenie tego działu przyjżyjmy się pewnej sytuacji. Mamy blok, po najechaniu na który chcemy płynnie zmienić jego rozmiary w zależności od tego czy kursor na nim jest czy nie.

$('#balonik_test')
            .mouseover(function() {
                $(this).animate({width:300}, 500);
            })
            .mouseout(function() {
                $(this).animate({width:200}, 500);
            });
Pomęcz mnie

Jeżeli mamy drewno zamiast palcy, a nasza obsługa komputera powoduje, że nasi znajomi wydają dziwne dźwięki, nie zauważymy żadnego problemu. Wystaczy jednak kilka razy szybko kliknąć na powyższy blok, aby zobaczyć jak nasza animacja zaczyna szaleć.

Spowodowane jest to tym, że nasza animacja nie zdąży się do końca wykonać, a my chcemy odpalić ją ponownie (click, click, click).

Aby temu zapobiec musimy posiłkować się dowolną z dwuch technik. Pierwsza z nich polega na wykorzystaniu metody stop(), która zatrzyma odpaloną animację.

Druga metoda polega na odpalaniu kolejnej animacji dopiero po skończeniu działania poprzedniej. Wykorzystamy do tego warunek .is(':animated') lub .not(':animated'). Pierwszy odfiltruje elementy, które są animowane, a drugi te, które animowane nie są. Poniższe przykłady demonstrują obie metody:

$("#balonik_stop")
            .mouseover(function() {
                $(this).stop().animate({width:300}, 500);
            })
            .mouseout(function() {
                $(this).stop().animate({width:200}, 500);
            });
Najedź na mnie 
$("#balonik_not").toggle(
            function(){
                $(this).not(':animated').animate({width:300}, 500);
            },
            function(){
                $(this).not(':animated').animate({width:200}, 500);
            }
        );
        
        //lub 
        
        $("#balonik_not").toggle(
            function(){
                if (!$(this).is(':animated')) $(this).animate({width:300}, 500);
            },
            function(){
                if (!$(this).is(':animated')) $(this).animate({width:200}, 500);
            }
        );
Kliknij na mnie kilka razy :)

W praktyce powyższe dwa sposoby sprawdzają się w innych zastosowaniach. Metoda stop() lepiej sprawdza się w zdarzeniach mouseover i mouseout, natomiat sprawdzanie czy obiekt jest animowany lepiej stosować przy zdarzeniach click.

Dodatkowe linki

Przykładów wykorzystania jQuery jest w internecie tysiące. Poniżej zamieszczam kilka linków które warto "przewertować":

Źródło:

  • [url]http://doman.art.pl/kursjs/kurs/jquery/jquery.html[/ur;]
Oceń ten artykuł:

 

Aby dodawać komentarze musisz być zalogowany!


Polecane
Czytelnia
Kontakt

Jeśli chcesz się z nami skontaktować napisz na adres: info(at)binboy.org lub odwiedź nasz profil na Facebooku!

O Nas

Serwis binboy.org to kopalnia wiedzy dla wszystkich z branży IT, w szczególności dla programistów i webmasterów. To duży zbiór kursów programowania, tutoriali, darmowych ebooków, setki kodów źródłowych itp.

Bądź w kontakcie

Panel użytkownika

Zaloguj się do panelu użytkownika.
Nie masz konta? Zarejestruj się!
Zapomniałeś hasła?