" Nie utrudniaj sobie ycia  skorzystaj z biblioteki jQuery!
" Abecad o, czyli jak korzysta z dobrodziejstw biblioteki jQuery
" Interfejs API biblioteki jQuery, czyli gdzie szuka zaawansowanych rozwi za
" Wtyczki, czyli o co jeszcze warto rozszerzy dost pne mo liwo ci
JQuery. Poradnik
programisty
Autor: WÅ‚odzimierz Gajda
ISBN: 978-83-246-2518-5
Format: 158×235, stron: 288
Nie utrudniaj sobie życia  skorzystaj z biblioteki jQuery!
" Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jQuery
" Interfejs API biblioteki jQuery, czyli gdzie szukać zaawansowanych rozwiązań
" Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwoS
ci
Biblioteka jQuery, zarówno w wersji pełnej, jak i zminimalizowanej, pozwala programiS
cie
znaczÄ…co uproS
cić pracę i stopień skomplikowania kodu tworzonego w języku
JavaScript. Korzystając z jej możliwoS
ci, programista może zmieniać atrybuty,
modyfikować wygląd poszczególnych elementów strony, dodawać lub usuwać elementy
drzewa DOM. Może też wykonać zapytania Ajax, stosować efekty specjalne, obsłużyć
typowe i nietypowe zdarzenia, a także posłużyć się różnymi wtyczkami, często
znaczÄ…co rozszerzajÄ…cymi funkcjonalnoS
ć kodu.
Książka  jQuery. Poradnik programisty to doskonałe kompendium wiedzy na temat tej
biblioteki. Dowiesz się stąd, jak rozpocząć pracę z jQuery, jak obchodzić się z selektorami
i atrybutami, manipulować modelem DOM czy przypisywać wybrany styl do okreS
lonych
elementów strony. Nauczysz się stosować funkcję jQuery, filtry i operacje na zbiorach
elementów. Poznasz także rodzaje i sposób działania wtyczek, sam zaczniesz je tworzyć,
minimalizować i kompresować. JeS
li interesuje CiÄ™ programowanie z wykorzystaniem
możliwoS
ci oferowanych przez JavaScript, a nie chcesz spędzać wielu godzin na
bezpoS
rednim wpisywaniu skomplikowanego kodu, biblioteka jQuery jest właS
nie
dla Ciebie!
" Korzystanie z biblioteki jQuery
" Trzy warstwy dokumentu XHTML: struktura, wyglÄ…d i zachowanie
" Selektory CSS i zdarzenia XHTML
" Modyfikacja wyglÄ…du, odczyt i modyfikacja treS
ci elementów
" Odczyt i modyfikacja atrybutów
" Dodawanie i usuwanie węzłów drzewa DOM, wędrówka po drzewie DOM
" Zbiory węzłów, tworzenie i usuwanie węzłów w drzewie DOM
" Efekty specjalne
" Funkcja jQuery()  w skrócie $()
" Odczyt i modyfikacja węzłów drzewa DOM
" Operacje przekształcające zbiór elementów
" Parametry wtyczek, ich tworzenie, minimalizacja i kompresja
Wykorzystaj szanse, jakie daje Ci biblioteka jQuery!
Spis tre ci
Cz I Abecad o ....................................................................... 5
Rozdzia 1. Korzystanie z biblioteki jQuery .......................................................... 7
Poprawno osadzania kodu JavaScript w dokumentach HTML i XHTML .................. 13
Rozdzia 2. Trzy warstwy dokumentu XHTML: struktura, wygl d i zachowanie .... 15
Rozdzia 3. Selektory CSS i zdarzenia XHTML ................................................... 21
Rozdzia 4. Modyfikacja wygl du elementów .................................................... 29
Rozdzia 5. Odczyt i modyfikacja tre ci elementów ........................................... 39
Rozdzia 6. Odczyt i modyfikacja atrybutów ...................................................... 47
Rozdzia 7. Dodawanie i usuwanie w z ów drzewa DOM .................................... 59
Rozdzia 8. W drówka po drzewie DOM ............................................................ 79
Rozdzia 9. Zbiory w z ów ................................................................................ 95
Rozdzia 10. Ajax ............................................................................................. 109
Rozdzia 11. Efekty specjalne .......................................................................... 129
Rozdzia 12. Co powiniene zapami ta z pierwszej cz ci? .............................. 139
Cz II Interfejs API biblioteki jQuery ..................................... 143
Rozdzia 13. Funkcja jQuery()  w skrócie $() ................................................. 145
Wywo anie $(funkcja) .................................................................................................. 145
Wywo anie $(kod XHTML) ......................................................................................... 146
Wywo anie $(selektor) ................................................................................................. 150
Wywo anie $(element DOM) ....................................................................................... 154
Wynik funkcji $ ............................................................................................................ 156
Tworzenie w z ów tekstowych ..................................................................................... 159
Funkcje i metody statyczne .......................................................................................... 159
Rozdzia 14. Selektory ..................................................................................... 163
Zestawienie selektorów filtruj cych ............................................................................. 164
U ycie selektorów ........................................................................................................ 167
Wyst powanie selektorów ............................................................................................ 169
4 jQuery. Poradnik programisty
Rozdzia 15. Odczyt i modyfikacja w z ów drzewa DOM .................................... 173
Rozszerzona sk adnia metod dost pu do w z ów ......................................................... 176
Pe ne zestawienie metod dost pu do w z ów ............................................................... 178
Rozdzia 16. Tworzenie i usuwanie w z ów w drzewie DOM ............................... 185
Klonowanie w z ów ..................................................................................................... 189
Usuwanie w z ów ......................................................................................................... 190
Wymiana w z ów ......................................................................................................... 191
Zawijanie w z ów ......................................................................................................... 194
Rozdzia 17. Operacje przekszta caj ce zbiór elementów ................................... 197
Dodawanie w z ów do zbioru ...................................................................................... 197
Operacja  cofnij .......................................................................................................... 201
Filtrowanie .................................................................................................................... 203
Zliczanie elementów zbioru .......................................................................................... 204
Przodkowie, potomkowie i rodze stwo ........................................................................ 205
Przetwarzanie w z ów tekstowych ............................................................................... 208
Rozdzia 18. Co powiniene zapami ta z drugiej cz ci? .................................. 215
Cz III Wtyczki ..................................................................... 217
Rozdzia 19. Pierwsza wtyczka ......................................................................... 219
Wywo anie wtyczki ...................................................................................................... 221
czenie biblioteki jQuery z innymi bibliotekami JavaScript ...................................... 224
Definiowanie kilku wtyczek w jednym pliku .js ........................................................... 226
Rozdzia 20. Parametry wtyczek ....................................................................... 231
Badanie obecno ci parametru ....................................................................................... 232
Obiekty w roli parametrów ........................................................................................... 233
Badanie typu parametrów ............................................................................................. 235
Zmienna liczba parametrów funkcji ............................................................................. 238
Rozdzia 21. Tworzenie wtyczek ....................................................................... 241
Rozdzia 22. Minimalizacja i kompresja wtyczek ............................................... 265
Kompresja .................................................................................................................... 266
Rozdzia 23. Co powiniene zapami ta z trzeciej cz ci? ................................. 271
Skorowidz .................................................................................... 273
Rozdzia 11.
Efekty specjalne
Biblioteka jQuery zawiera kilka metod s u cych do wykonywania prostych animacji.
Nale do nich: slideDown() i slideUp(), fadeIn() i fadeOut() oraz animate().
Metody slideDown() i slideUp() pozwalaj na p ynne rozwijanie i zwijanie elementu.
Efekt graficzny polega na animacji elementu poprzez zwi kszenie lub zmniejszenie jego
wysoko ci. Je li na ukrytym akapicie:
$('p#info').hide();
wywo amy metod slideDown():
$('p#info').slideDown();
to akapit ten pojawi si na stronie w sposób animowany. Jego wysoko b dzie p ynnie
zwi kszana od 0 do odpowiedniej warto ci. Wywo anie metody slideUp() spowoduje
ponowne ukrycie akapitu:
$('p#info').slideUp();
Tym razem jego wysoko b dzie zmniejszana do 0. Domy lnie animacja trwa 400 mili-
sekund, lecz mo emy to zmieni , przekazuj c do metod slideDown() oraz slideUp()
parametr okre laj cy czas trwania animacji. Parametrem tym mo e by liczba okre la-
j ca, ile milisekund ma trwa animacja, np.:
$('p#info').slideUp(1200);
$('p#info').slideDown(2500);
b d jeden z napisów: slow lub fast. Napis slow ustala czas trwania animacji na 200 mili-
sekund, a fast  na 600. Drugim, równie opcjonalnym, parametrem funkcji slideUp()
i slideDown() jest funkcja anonimowa, wywo ywana po zako czeniu animacji. Je li
chcesz, by po zako czeniu rozwijania akapitu kolor jego t a sta si czerwony, u yj kodu:
$('p#info').slideDown(2500, function(){
$('p#info').css('background', 'red');
});
130 Cz I Abecad o
Zwró uwag , e rozwi zanie niewykorzystuj ce funkcji anonimowej:
$('p#info').slideDown(2500);
$('p#info').css('background', 'red');
jest b dne. Wywo anie funkcji slideDown() nie powoduje wstrzymania wykonywania
skryptu. Metoda css() w powy szym kodzie b dzie wywo ana natychmiast po urucho-
mieniu animacji, a nie po jej zako czeniu.
Kolejne dwie funkcje dotycz ce efektów, czyli fadeIn() oraz fadeOut(), powoduj
pokazanie i ukrycie elementu przez zwi kszanie i zmniejszanie jego przezroczysto ci.
Maj one identyczne parametry jak slideDown() i slideUp(). Po wywo aniu:
$('p#info').fadeIn();
akapit p#info pojawi si na stronie, za instrukcja:
$('p#info').fadeOut();
spowoduje ukrycie go. Tempo pojawiania si i znikania ustalamy, przekazuj c liczb lub
napisy slow albo fast:
$('p#info').fadeIn(1500);
$('p#info').fadeIn('fast');
$('p#info').fadeIn('slow');
Funkcja automatyczna przekazana jako drugi parametr b dzie wywo ana po zako cze-
niu efektu:
$('p#info').fadeIn(1000, function(){
//funkcja wywo ywana po zako czeniu animacji
});
Ostatnia z wymienionych na wst pie funkcji, animate(), pozwala na p ynne modyfiko-
wanie dowolnej w a ciwo ci CSS. Instrukcja:
$('p#info').animate({
font-size: '200%',
left: '200px',
borderWidth: '10px'
});
spowoduje p ynn zmian rozmiaru czcionki do 200%. Je li czcionka by a wi ksza, to
b dzie zmniejszona, a je li by a mniejsza  to b dzie zwi kszona. W a ciwo left
b dzie p ynnie d y a do warto ci 200px, za grubo obramowania  do 10px. Pierw-
szym parametrem metody animate() jest tablica asocjacyjna w a ciwo ci CSS, do
których animacja ma p ynnie d y . Zwró uwag , e atrybuty pisane w kodzie CSS
z dywizem, np. border-width, s w jQuery zapisywane w notacji borderWidth. Dwa
opcjonalne parametry metody animate() ustalaj czas trwania animacji oraz pozwalaj
na wykonanie dowolnych akcji po jej zako czeniu:
$('p#info').animate(
{
font-size: '200%',
left: '200px',
borderWidth: '10px'
},
5000,
Rozdzia 11. Efekty specjalne 131
function() {
//funkcja wywo ywana po zako czeniu animacji
}
);
wiczenie 11.1. ________________________________________________
Zmodyfikuj kod kontrolki +/- wykonanej w wiczeniu 8.1 w taki sposób, by pokazywanie
i ukrywanie tre ci odbywa o si w sposób p ynny  z wykorzystaniem metod slide
Down() oraz slideUp(). Kod XHTML kontrolki zawiera hiper cze a, w którym
umieszczamy znak + b d  , oraz akapit p z tre ci . Akapit nale y ukry lub pokaza .
Zarys kodu XHTML z wiczenia jest przedstawiony na listingu 11.1. Rozwi zaniem
wiczenia jest skrypt jQuery przedstawiony na listingu 11.2.
Listing 11.1. Zarys kodu XHTML kontrolki +/

+Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Listing 11.2. Rozwi zanie wiczenia 11.1
$(function(){
$('.element p').hide();
$('.element a').click(function(){
if ($(this).html() == '+') {
$(this).html('-');
$(this).parent().next().slideDown();
} else {
$(this).html('+');
$(this).parent().next().slideUp();
}
});
});
W skrypcie jQuery post pujemy identycznie jak w wiczeniu 8.1. W odpowiedzi na
klikni cie hiper cza a, w zale no ci od tego, czy zawiera ono znak, + czy  , rozwijamy
b d zwijamy akapit. Do akapitu docieramy od klikni tego hiper cza (tj. od $(this)),
wywo uj c metody parent() oraz next(). W celu pokazania akapitu wywo ujemy 
zamiast metody show()  metod slideDown():
$(this).parent().next().slideDown();
Natomiast ukrycie akapitu wymaga wywo ania  zamiast metody hide()  metody
slideUp():
$(this).parent().next().slideUp();
132 Cz I Abecad o
wiczenie 11.2. ________________________________________________
Dany jest plik menu.html oraz kilka plików, których nazwa rozpoczyna si od s owa
fragment, np. fragment-ulica-bramowa.html. W pliku menu.html znajduje si menu
g ówne oraz element div#tresc. Zarys pliku menu.html jest przedstawiony na listingu 11.3.
Napisz skrypt, który zmodyfikuje dzia anie menu w taki sposób, by klikni cie opcji
menu powodowa o prze adowanie elementu div#tresc. Do elementu tego nale y za a-
dowa zawarto pliku, którego nazwa jest zawarta w klikni tym hiper czu. Zadanie
rozwi w taki sposób, by prze adowanie by o p ynne  z wykorzystaniem efektów
fadeIn() oraz fadeOut(). Skrypt powinien dzia a w taki sposób, by podczas animacji
opcje menu by y nieczynne. Rozwi zaniem zadania jest skrypt z listingu 11.4.
Listing 11.3. Plik menu.html z wiczenia 11.2

• ulica bramowa


• plac po farze

...

Listing 11.4. Rozwi zanie wiczenia 11.2

W skrypcie z listingu 11.4 najpierw definiujemy zmienn trwa. Zmienna ta b dzie
flag , informuj c o tym, e animacja jest w trakcie wykonywania. Je li warto zmien-
nej trwa wynosi 1, to animacja w a nie jest wykonywana i hiper cza nie powinny
dzia a . W przeciwnym razie, czyli gdy warto zmiennej trwa wynosi 0, animacja nie
jest wykonywana i hiper cza powinny dzia a .
Za w czanie i wy czanie dzia ania hiper czy odpowiadaj funkcje wlacz_hiperlacza()
oraz wylacz_hiperlacza(). Ustalaj one warto zmiennej trwa oraz modyfikuj style
CSS hiper czy. Wewn trz tych funkcji wybieramy wszystkie hiper cza:
$('a').
ustalamy ich style CSS:
css('text-decoration', 'none').
i modyfikujemy efekt rollover:
hover(
function(){
$(this).css('text-decoration', 'none');
},
function(){
$(this).css('text-decoration', 'none');
}
);
134 Cz I Abecad o
Metoda hover() przypisuje obs ug dwóch zdarze : onmouseenter oraz onmouseleave1.
Powy sza instrukcja jest równowa na dwóm instrukcjom:
mouseenter(function(){
$(this).css('text-decoration', 'none');
}).mouseleave(function(){
$(this).css('text-decoration', 'none');
});
Dzia anie skryptu z listingu 11.4 rozpoczynamy od wy czenia hiper czy, ukrycia
elementu #tresc, za adowania do elementu #tresc pliku fragment-ulica-dominikanska.
html oraz animowanego wy wietlenia elementu #tresc:
wylacz_hiperlacza();
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});
Animacja b dzie trwa a 2 sekundy (tj. 2000 milisekund). Po zako czeniu animacji hiper-
cza zostan w czone, za co odpowiada wywo anie funkcji wlacz_hiperlacza().
Zasadnicz cz ci skryptu jest przypisanie obs ugi zdarzenia onclick do hiper czy.
Hiper cza b d dzia a y wy cznie wtedy, gdy warto zmiennej trwa wynosi 0:
$('a').click(function(){
if (trwa == 0) {
...
}
return false;
});
W ten sposób wy czamy dzia anie hiper czy w trakcie trwania animacji. Zdarzenie
onclick b dzie generowane, jednak dzi ki powy szej instrukcji if nie spowoduje ono
wykonania adnych akcji.
Je li animacja nie jest wykonywana, wówczas obs uga klikni cia przebiega nast puj co:
najpierw wy czamy dzia anie hiper czy:
wylacz_hiperlacza();
Nast pnie z atrybutu href klikni tego hiper cza do zmiennej url pobieramy nazw pliku:
var url = $(this).attr('href');
1
Zdarzenia mouseeneter oraz mouseleave nie wyst puj w drzewie DOM. S one emulowane przez
bibliotek jQuery. Pierwotnie zdarzenia te pojawi y si w przegl darce Internet Explorer. Zdarzenia
mouseeneter i mouseleave ró ni si od zdarze mouseover i mouseout tym, e s generowane dok adnie
jeden raz, dopóki kursor myszki nie opu ci wybranego elementu. Podczas jednokrotnego wskazania
elementu wska nikiem myszki zdarzenia te zostan wygenerowane dok adnie jeden raz. Zdarzenia
mouseover oraz mouseout mog by wygenerowane kilkukrotnie.
Rozdzia 11. Efekty specjalne 135
Teraz wy czamy widoczno elementu #tresc. Element ten stopniowo zniknie z ekranu:
$('#tresc').fadeOut(2000, function(){
//kod wykonywany, gdy element #tresc jest ju niewidoczny
});
Gdy element #tresc jest niewidoczny, adujemy do niego zawarto pliku, którego nazwa
znajduje si w zmiennej url:
$('#tresc').load(url);
po czym w czamy widoczno elementu #tresc:
$('#tresc').fadeIn(2000, function(){
//kod wykonywany, gdy element #tresc jest ju widoczny
});
Element ten pojawi si stopniowo na ekranie. Gdy element #tresc jest ju widoczny,
ponownie w czamy dzia anie hiper czy:
wlacz_hiperlacza();
wiczenie 11.3. ________________________________________________
Dokument index.html zawiera znacznik img, który umieszcza na stronie WWW zdj -
cie zawarte w pliku fotka.jpg. Poni ej zdj cia znajduj si trzy hiper cza. Jedno jako
etykiet ma strza k w lewo, drugie  napis reset, a trzecie  strza k w prawo. Zarys
kodu XHTML jest przedstawiony na listingu 11.5. Napisz skrypt jQuery, który zmody-
fikuje dzia anie hiper czy. Strza ka w lewo ma powodowa , e obraz p ynnym ruchem
wyjedzie poza lew kraw d nadrz dnego elementu div, strza ka w prawo ma powo-
dowa p ynne wyjechanie zdj cia poza praw kraw d elementu div, za napis reset
ma powodowa powrót zdj cia do rodka elementu div. Rozwi zaniem zadania jest
skrypt przedstawiony na listingu 11.6.
Listing 11.5. Plik index.html z wiczenia 11.3

<<
reset
>>

136 Cz I Abecad o
Listing 11.6. Skrypt z wiczenia 11.3
$(document).ready(function(){
$("#lewo").click(function(){
$('#element img').animate({
'left' : "-100px"
});
return false;
});
$("#prawo").click(function(){
$('#element img').animate({
'left' : "200px"
});
return false;
});
$("#reset").click(function(){
$('#element img').animate({
'left' : "60px"
});
return false;
});
});
Skrypt z listingu 11.6 zawiera instrukcje, które przypisz procedury obs ugi zdarzenia
onclick trzem hiper czom zawartym w dokumencie. Sednem rozwi zania jest p ynne
przesuwanie zdj cia w trzy ró ne miejsca. W celu przesuni cia fotografii poza lew kra-
w d elementu div modyfikujemy w a ciwo CSS left, nadaj c jej warto  100 pikseli:
$('#element img').animate({
'left' : "-100px"
});
Przesuni cie elementu img poza praw kraw d elementu div wykonuje instrukcja:
$('#element img').animate({
'left' : "200px"
});
Natomiast powrót do pozycji startowej polega na przypisaniu w a ciwo ci left warto ci
60 pikseli:
$('#element img').animate({
'left' : "60px"
});
Funkcja animate() spowoduje p ynn zmian w a ciwo ci left od warto ci bie cej
do jednej z podanych liczb, czyli  100px, 60px lub 200px.
Czytaj dalej...