jQuery

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ę do wystawionej w necie wersji.
Najłatwiej przejść na stronę https://cdnjs.com/, wpisać jquery i po wyszukaniu skopiować sobie adres.

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);

//wcale nie musisz wszystkiego pisać w jednej linii
$('#pierwszy')
    .css({background : 'red'})
    .hide('slow')
    .show(3000);

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

  1. Pobieramy obiekt #pierwszy (tak jak za pomocą querySelectorAll), po czym wykonujemy na nim kilka operacji:
    1. Ustawiamy mu kolor na czerwony
    2. Ukrywamy go (slow - wolno)
    3. Po czym pokazujemy (3000ms = 3 sekundy)
Kliknij mnie

Aby pobrać element ze strony, tak samo jak w przypadku querySelectorAll() korzystamy ze składni CSS:


$('div.czerwony') //pobranie divów o klasie czerwony
$('div p') //wszystkie p zawierające się w div
$('div#cnt > p') //wszystkie p mieszczące się bezpośrednio w div #cnt
$('p:first-of-type') //pobranie pierwszego p
$('img[width=100]') //pobranie wszystkich img, które mają width=100
$(':checkbox ~ label') //wszystkie labele, które następują po checkboxach

JQuery udostępnia też sporo metod dodatkowych, które są odpowiednikami selektorów CSS3.
Wśród nich najczęściej używanymi są:

  • eq(index) - zwraca z listy element o danym indexie
  • first() - zwraca pierwszy element z listy elementów
  • last() - zwraca ostatni element z listy elementów
  • lt(index) - zwraca elementy o indeksie mniejszym od danego
  • gt(index) - zwraca elementy o indeksie większym od danego
  • not() - zwraca element, jeżeli nie jest on ...
  • is() - zwraca element, jeżeli jest on ...
  • filter() - filtruje listę elementów przez zadane kryterium

$('div.czerwony p').eq(2)
//lub
$('div.czerwony p:eq(2)')
//lub
$('div.czerwony p:nth-of-type(2)')

$('p').gt(2).addClass('with-border')
//lub
$('p:gt(2)').addClass('with-border')
//lub
$('p:nth-of-type(n+2)').addClass('with-border')

$('div').not('.red')
//lub
$('div:not(.red)')

$('div').is(':visible'); //wszystkie divy widoczne
$('div').not(':animated'); //wszystkie divy które nie są obecnie animowane

Szczególnie metoda filter(parametr) ma bardzo ciekawe zastosowanie. Jako parametr może ona dostać tekst będący selektorem, lub funkcję która zwraca prawdę lub fałsz. Jeżeli zostanie zwrócona prawda, oznacza to, że dany element tablicy pasuje i zostanie on zwrócony.


    var $div = $('div');
    $div.filter(':visible').hide() //ukrywa divy, które są widoczne

    var $inputs = $('input');
    $inputs.filter(':not(:checkbox)') //wszystkie inputy nie będące checboxami

    var $div = $('div');
    $div.filter(function() {
        return ($(this).children('span').length > 2)? true : false
    }) //filtruje te divy, które zawierają min 3 spany

Jeżeli chcesz się dowiedzieć więcej na temat selektorów jquery, odwiedź stronę http://jqapi.com/#p=class-selector po czym przejść do zakładki Selectors > Basic filters (okazyjnie przeglądając i inne zakładki).

document ready

Aby mieć pewność, że DOM został już wczytany), korzystaliśmy do tej pory ze zdarzenia DOMContentLoaded.
jQuery upraszcza tamten zapis:


$(document).ready(function() {
    ...
})

//lub to samo w skróconej wersji

$(function() {
    ...
})

Zdarzenia w jquery

Obsługa zdarzeń w jquery jest dziecinnie prosta. Wystarczy przypiąć zdarzenie do pobranego obiektu korzystając z metody będącej nazwą danego zdarzenia, lub skorzystać z metody on().


//starsza wersja podpinania
$('input#guzik').click(function() {
    console.log('test');
})

//lub

//zalecana wersja podpinania zdarzeń
$('input#guzik').on('click', function() {
    console.log('test');
})

Kilka zdarzeń możemy podpinać w następujący sposób:


$('input#guzik').on({
    'click', function() {
        ...
    },
    'mouseover' : function() {
        ...
    }
});

Aby odwołać się do obiektu wywołującego, wskazujemy go instrukcją this. To już wiemy z rozdziału o zdarzeniach. Aby na takim obiekcie wykonywać operacje za pomocą jQuery, wystarczy nasze "this" podstawić pod jquery, stosując konstrukcję $(this). Dzięki temu uzyskujemy obiekt jquery wskazujący na wywołujący element.


$('a.link').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    alert( $this.attr('href') ); //pobieramy atrybut href
})

<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

Znak $ przy nazwie zmiennej $this 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.

Aby odpiąć dane zdarzenie, skorzystamy z metody off(). Działa ona praktycznie tak samo jak removeEventListener, czyli jeżeli chcemy odpiąć jakąś funkcję, powinniśmy przekazać ją jako parametr:


function showSomething() {
    console.log('Kliknięto');
}

$('a.link').on('click', showSomething);
$('a.link').off('click', showSomething);

W jQuery możemy też odpinać funkcje anonimowe. Wystarczy przy ich podpinaniu podać dla zdarzenia nazwę:


$('a.link').on('click.superEvent', function() {
    console.log('Kliknięto');
});

$('a.link').off('click.superEvent');

Pokazywanie i ukrywanie obiektów w jQuery

jQuery udostępnia nam kilka metod służących do pokazywania i ukrywania elementów na stronie.

Pierwszymi z nich są show(szybkosc, funkcja_zwrotna) która pokazuje i hide(szybkosc, funkcja_zwrotna) która ukrywa dany element. Parametry tych metod są opcjonalne (i w praktyce mało kiedy używane). Szybkość możemy podać zarówno słownie: "slow", "normal", "fast", lub liczbowo w milisekundach.
Parametr funkcja_zwrotna wskazuje nazwę funkcji która zostanie wywołana po zakończeniu animacji. W praktyce prawie zawsze metody te wywołuje się bez parametrów.


    $('#someDiv').show();
    $('#someDiv').hide();

Aby płynnie pokazywać lub ukrywać elementy, skorzystamy z metod: fadeIn(szybkość, funkcja_zwrotna) lub fadeIn(szybkość, funkcja_zwrotna). Parametry są takie same jak w przypadku powyższych metod. W tym przypadku parametry te są praktycznie zawsze wykorzystywane:


$("a").on('click', function (e) {
    e.preventDefault();
    $("div").fadeIn(3000, function() {
        console.log('Element został pokazany');
    });
    return false;
});

Kolejną udostępnianą nam funkcją jest toggle(), która działa jak przełącznik - pokazuje / ukrywa dany element.


$("a").on('click', function(e) {
    e.preventDefault();
    $('div').toggle();
});

Animacje w jQuery

W bardzo wielu przypadkach będziemy chcieli dane elementy strony animować. Możemy to zrobić za pomocą metody animate(animowane_wlasciwosci, czas, rodzaj_animacji, funkcja_zwrotna). Najbardziej interesującymi nas parametrami są "animowane_wlasciwosci", do których przekazujemy obiekt składający się z właściwości i ich nowych wielkości:


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

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").on('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 można także zastosować konstrukcję -= lub += która odejmie lub doda odpowiednią wielkość od aktualnej:


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

Przyjrzyjmy się teraz 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').on({
        'mouseover' : function() {
            $(this).animate({width:300}, 500);
        },
        'mouseout' : function() {
            $(this).animate({width:200}, 500);
        }
    });
Pomęcz mnie

Jeżeli mamy drewno zamiast palców, a nasza obsługa komputera powoduje, że nasi znajomi wydają dziwne dźwięki, nie zauważymy żadnego problemu. Wystarczy 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 dwóch 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").on({
        '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 :)

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