jQuery - lomilowka.pl

jQuery
jQuery – lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie z
JavaScriptu (w tym manipulację drzewem DOM). Kosztem niewielkiego spadku wydajności w
stosunku do profesjonalnie napisanego kodu w niewspomaganym JavaScripcie pozwala osiągnąć
interesujące efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX.
Większość wtyczek i skryptów opartych na jQuery działa na stronach nie wymagając zmian w
kodzie HTML (np. zamienia klasyczne galerie złożone z miniatur linkujących do obrazków w
dynamiczną galerię).
Funkcjonalność
jQuery pozwala w wygodny i zrozumiały sposób korzystać z następujących funkcjonalności:
selektory – umożliwiają wybranie dowolnego podzbioru węzłów modelu DOM
atrybuty – jQuery pozwala przetwarzać atrybuty węzłów dokumentu
manipulowanie modelem DOM
zmiana i przypisywanie stylu do elementów
rozbudowana obsługa zdarzeń, możliwość definiowania własnych
efekty – animacje
AJAX – prosty interfejs realizujący asynchroniczne zapytania
Podstawowe cechy
Niezależność od przeglądarki – eliminuje konieczność dostosowywania kodu do różnych
przeglądarek WWW
pełna funkcjonalność w: IE 6.0+ (oprócz interfejsu AJAX), Firefox 2+, Safari 3.0+, Opera
9.0+, Chrome
Obsługa selektorów zgodna z CSS3
Małe rozmiary – produkcyjna wersja to tylko ok 80 kB
Wygoda tworzenia wtyczek
Użycie
Z biblioteki jQuery można korzystać na dwa sposoby:
Użyć funkcji $ lub jQuery ($ jest standardowym aliasem obiektu jQuery). Funkcja ta i inne
metody zwracają obiekt jQuery, co oznacza, że można łatwo łączyć je w łańcuch wywołań.
Używać $. lub jQuery. jako swoistego prefiksu. Czyli korzystać z metod narzędziowych nie
operujących na obiekcie jQuery jako takim.
Zaczynamy
Aby zacząć używać jQuery, będziemy musieli standardowo dołączyć jej plik do naszej strony.
Możemy albo ściągnąć na dysk albo odwołać się np do zewnętrznych zasobów np:
<script type="text/javascript" src="sciezka-do-pliku/jquery.js"></script> //gdy
ściągniemy sobie plik
/* lub */
<script src="http://code.jquery.com/jquery-latest.min.js"></script> /* najnowsza
wersja jquery */
/* lub */
//https://developers.google.com/speed/libraries/devguide#jquery
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> /*
konkretna wersja jquery */
Osobiście polecam ostatnią wersję. Z najnowszymi wersjami jQuery czasami trzeba uważać. Np
przy przejściu z v.1 na v.2 kilka funkcji zostało usuniętych i niektóre pluginy przestały działać.
Jednym z lepszych sposobów wrzucania tej bilioteki na stronę jest poniższa, która w razie
niemozności ściągnięcia jquery z zewnetrznego zasobu spróbuje ją pobraź z lokalnego pliku:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="sciezka-dopliku/jquery.js"><\/script>')</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
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:
$('*')
$(div)
$('div.czerwony')
$('div.czerwony#duzy')
$('div p')
$('div#cont > p')
id cont
$('p,span , div.czerwoy')
czerwony
$('ul li.wyroznione')
$('p:first')
$('img[width=100]')
$('label + input')
mają label
$('div#pierwszy ~ div')
//pobranie wszystkich elementów na stronie
//pobranie wszystkich divów na stronie
//pobranie div o klasie czerwony
//pobranie div o klasie czerwony i id duży
//wszystkie p zawierające się w div
//wszystkie p mieszczące się bezpośrednio w div o
//pobranie wszystkich p, span oraz divów o klasie
//pobranie li o klasie wyróżnione
//pobranie pierwszego p
//pobranie wszystkich img, które mają width=100
//wszystkie inputy, które bezpośrednio przed sobą
//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ł już wczytany), 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
})
//lub ekwiwalent
$(function() {
//tutaj nasze skrypty
})
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ęść $
(function() {....})
Mam nadzieję, że czytając poniższy kody będziesz w stanie spokojnie sobie je przerobić dla
własnych celów.
Eventy w jquery
Obł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 );
});
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");
});
});
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);
});
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 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")
.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);
}
);
W praktyce 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.