ï

• 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: 158u235, 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¿liwoœci

Biblioteka jQuery, zarówno w wersji pe³nej, jak i zminimalizowanej, pozwala programiœcie
znacz¹co uproœciæ pracê i stopieñ skomplikowania kodu tworzonego w jêzyku
JavaScript. Korzystaj¹c z jej mo¿liwoœ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 funkcjonalnoœæ 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 okreœ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æ. Jeœli interesuje Ciê programowanie z wykorzystaniem
mo¿liwoœci oferowanych przez JavaScript, a nie chcesz spêdzaæ wielu godzin na
bezpoœrednim wpisywaniu skomplikowanego kodu, biblioteka jQuery jest w³aœ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 treœ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,dC 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,dC

–

, 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 +/–

<div class="element">
<h3><a href="#">+</a>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<div class="clearing"></div>
</div>

Listing 11.2. Rozwi7zanie 8wiczenia 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,dC 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 8wiczenia 11.2

<div id="pojemnik">
<ul id="menu">
<li><a href="fragment-ulica-bramowa.html">ulica bramowa</a></li>
<li><a href="fragment-plac-po-farze.html">plac po farze</a></li>
...
</ul>
<div id="tresc"></div>
</div>

Listing 11.4. Rozwi7zanie 8wiczenia 11.2

<script type="text/javascript">
trwa = 0;
function wylacz_hiperlacza()
{
trwa = 1;
$('a').
css('text-decoration', 'none').
hover(
function(){
$(this).css('text-decoration', 'none');
},
function(){
$(this).css('text-decoration', 'none');
}
);
}

function wlacz_hiperlacza()
{
trwa = 0;
$('a').
css('text-decoration', 'none').
hover(
function(){
$(this).css('text-decoration', 'underline');
},
function(){
$(this).css('text-decoration', 'none');
}

Rozdzia$ 11. Efekty specjalne

133

);
}

$(function(){
wylacz_hiperlacza();
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});

$('a').click(function(){
if (trwa == 0) {
wylacz_hiperlacza();
var url = $(this).attr('href');
$('#tresc').fadeOut(2000, function(){
$('#tresc').load(url);
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});
});
}
return false;
});
});
</script>

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

onmouseleave

1

.

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 wskaCnikiem 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 juB 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 juB 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*dC nadrz*dnego elementu

div

, strza&ka w prawo ma powo-

dowa! p&ynne wyjechanie zdj*cia poza praw, kraw*dC 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 8wiczenia 11.3

<body>
<div id="element">
<img src="fotka.jpg" alt="" />
</div>
<div>
<a id="lewo" href="#">&lt;&lt;</a>
<a id="reset" href="#">reset</a>
<a id="prawo" href="#">&gt;&gt;</a>
</div>
</body>

Czytaj dalej...

136

Cz !" I Abecad$o

Listing 11.6. Skrypt z 8wiczenia 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*dC 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*dC 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

.