ï
• 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="#"><<</a>
<a id="reset" href="#">reset</a>
<a id="prawo" href="#">>></a>
</div>
</body>
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
.