JQuery. Poradnik programisty

Transkrypt

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¿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 treci
Cz I
Abecado ....................................................................... 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, wygld i zachowanie .... 15
Rozdzia 3. Selektory CSS i zdarzenia XHTML ................................................... 21
Rozdzia 4. Modyfikacja wygldu elementów .................................................... 29
Rozdzia 5. Odczyt i modyfikacja treci elementów ........................................... 39
Rozdzia 6. Odczyt i modyfikacja atrybutów ...................................................... 47
Rozdzia 7. Dodawanie i usuwanie wzów drzewa DOM .................................... 59
Rozdzia 8. Wdrówka po drzewie DOM ............................................................ 79
Rozdzia 9. Zbiory wzów ................................................................................ 95
Rozdzia 10. Ajax ............................................................................................. 109
Rozdzia 11. Efekty specjalne .......................................................................... 129
Rozdzia 12. Co powiniene zapamita z pierwszej czci? .............................. 139
Cz II
Interfejs API biblioteki jQuery ..................................... 143
Rozdzia 13. Funkcja jQuery() — w skrócie $() ................................................. 145
Wywoanie $(funkcja) .................................................................................................. 145
Wywoanie $(kod XHTML) ......................................................................................... 146
Wywoanie $(selektor) ................................................................................................. 150
Wywoanie $(element DOM) ....................................................................................... 154
Wynik funkcji $ ............................................................................................................ 156
Tworzenie wzów tekstowych ..................................................................................... 159
Funkcje i metody statyczne .......................................................................................... 159
Rozdzia 14. Selektory ..................................................................................... 163
Zestawienie selektorów filtrujcych ............................................................................. 164
Uycie selektorów ........................................................................................................ 167
Wystpowanie selektorów ............................................................................................ 169
4
jQuery. Poradnik programisty
Rozdzia 15. Odczyt i modyfikacja wzów drzewa DOM .................................... 173
Rozszerzona skadnia metod dostpu do wzów ......................................................... 176
Pene zestawienie metod dostpu do wzów ............................................................... 178
Rozdzia 16. Tworzenie i usuwanie wzów w drzewie DOM ............................... 185
Klonowanie wzów ..................................................................................................... 189
Usuwanie wzów ......................................................................................................... 190
Wymiana wzów ......................................................................................................... 191
Zawijanie wzów ......................................................................................................... 194
Rozdzia 17. Operacje przeksztacajce zbiór elementów ................................... 197
Dodawanie wzów do zbioru ...................................................................................... 197
Operacja „cofnij” .......................................................................................................... 201
Filtrowanie .................................................................................................................... 203
Zliczanie elementów zbioru .......................................................................................... 204
Przodkowie, potomkowie i rodzestwo ........................................................................ 205
Przetwarzanie wzów tekstowych ............................................................................... 208
Rozdzia 18. Co powiniene zapamita z drugiej czci? .................................. 215
Cz III Wtyczki ..................................................................... 217
Rozdzia 19. Pierwsza wtyczka ......................................................................... 219
Wywoanie wtyczki ...................................................................................................... 221
czenie biblioteki jQuery z innymi bibliotekami JavaScript ...................................... 224
Definiowanie kilku wtyczek w jednym pliku .js ........................................................... 226
Rozdzia 20. Parametry wtyczek ....................................................................... 231
Badanie obecnoci 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 zapamita z trzeciej czci? ................................. 271
Skorowidz .................................................................................... 273
Rozdzia 11.
Efekty specjalne
Biblioteka jQuery zawiera kilka metod sucych do wykonywania prostych animacji.
Nale do nich: slideDown() i slideUp(), fadeIn() i fadeOut() oraz animate().
Metody slideDown() i slideUp() pozwalaj na pynne rozwijanie i zwijanie elementu.
Efekt graficzny polega na animacji elementu poprzez zwikszenie lub zmniejszenie jego
wysokoci. Jeli na ukrytym akapicie:
$('p#info').hide();
wywoamy metod slideDown():
$('p#info').slideDown();
to akapit ten pojawi si na stronie w sposób animowany. Jego wysoko bdzie pynnie
zwikszana od 0 do odpowiedniej wartoci. Wywoanie metody slideUp() spowoduje
ponowne ukrycie akapitu:
$('p#info').slideUp();
Tym razem jego wysoko bdzie zmniejszana do 0. Domylnie animacja trwa 400 milisekund, lecz moemy to zmieni, przekazujc do metod slideDown() oraz slideUp()
parametr okrelajcy czas trwania animacji. Parametrem tym moe by liczba okrelajca, ile milisekund ma trwa animacja, np.:
$('p#info').slideUp(1200);
$('p#info').slideDown(2500);
bd jeden z napisów: slow lub fast. Napis slow ustala czas trwania animacji na 200 milisekund, a fast — na 600. Drugim, równie opcjonalnym, parametrem funkcji slideUp()
i slideDown() jest funkcja anonimowa, wywoywana po zakoczeniu animacji. Jeli
chcesz, by po zakoczeniu rozwijania akapitu kolor jego ta sta si czerwony, uyj kodu:
$('p#info').slideDown(2500, function(){
$('p#info').css('background', 'red');
});
Cz I i Abecado
130
Zwró uwag, e rozwizanie niewykorzystujce funkcji anonimowej:
$('p#info').slideDown(2500);
$('p#info').css('background', 'red');
jest bdne. Wywoanie funkcji slideDown() nie powoduje wstrzymania wykonywania
skryptu. Metoda css() w powyszym kodzie bdzie wywoana natychmiast po uruchomieniu animacji, a nie po jej zakoczeniu.
Kolejne dwie funkcje dotyczce efektów, czyli fadeIn() oraz fadeOut(), powoduj
pokazanie i ukrycie elementu przez zwikszanie i zmniejszanie jego przezroczystoci.
Maj one identyczne parametry jak slideDown() i slideUp(). Po wywoaniu:
$('p#info').fadeIn();
akapit p#info pojawi si na stronie, za instrukcja:
$('p#info').fadeOut();
spowoduje ukrycie go. Tempo pojawiania si i znikania ustalamy, przekazujc liczb lub
napisy slow albo fast:
$('p#info').fadeIn(1500);
$('p#info').fadeIn('fast');
$('p#info').fadeIn('slow');
Funkcja automatyczna przekazana jako drugi parametr bdzie wywoana po zakoczeniu efektu:
$('p#info').fadeIn(1000, function(){
//funkcja wywoywana po zakoczeniu animacji
});
Ostatnia z wymienionych na wstpie funkcji, animate(), pozwala na pynne modyfikowanie dowolnej waciwoci CSS. Instrukcja:
$('p#info').animate({
font-size: '200%',
left: '200px',
borderWidth: '10px'
});
spowoduje pynn zmian rozmiaru czcionki do 200%. Jeli czcionka bya wiksza, to
bdzie zmniejszona, a jeli bya mniejsza — to bdzie zwikszona. Waciwo left
bdzie pynnie dya do wartoci 200px, za grubo obramowania — do 10px. Pierwszym parametrem metody animate() jest tablica asocjacyjna waciwoci CSS, do
których animacja ma pynnie dy. 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 zakoczeniu:
$('p#info').animate(
{
font-size: '200%',
left: '200px',
borderWidth: '10px'
},
5000,
Rozdzia 11. i Efekty specjalne
131
function() {
//funkcja wywoywana po zakoczeniu animacji
}
);
wiczenie 11.1. ________________________________________________
Zmodyfikuj kod kontrolki +/- wykonanej w wiczeniu 8.1 w taki sposób, by pokazywanie
i ukrywanie treci odbywao si w sposób pynny — z wykorzystaniem metod slide
´Down() oraz slideUp(). Kod XHTML kontrolki zawiera hipercze a, w którym
umieszczamy znak + bd –, oraz akapit p z treci. Akapit naley ukry lub pokaza.
Zarys kodu XHTML z wiczenia jest przedstawiony na listingu 11.1. Rozwizaniem
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. Rozwizanie 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 postpujemy identycznie jak w wiczeniu 8.1. W odpowiedzi na
kliknicie hipercza a, w zalenoci od tego, czy zawiera ono znak, + czy –, rozwijamy
bd zwijamy akapit. Do akapitu docieramy od kliknitego hipercza (tj. od $(this)),
wywoujc metody parent() oraz next(). W celu pokazania akapitu wywoujemy —
zamiast metody show() — metod slideDown():
$(this).parent().next().slideDown();
Natomiast ukrycie akapitu wymaga wywoania — zamiast metody hide() — metody
slideUp():
$(this).parent().next().slideUp();
Cz I i Abecado
132
wiczenie 11.2. ________________________________________________
Dany jest plik menu.html oraz kilka plików, których nazwa rozpoczyna si od sowa
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 dziaanie menu w taki sposób, by kliknicie opcji
menu powodowao przeadowanie elementu div#tresc. Do elementu tego naley zaadowa zawarto pliku, którego nazwa jest zawarta w kliknitym hiperczu. Zadanie
rozwi w taki sposób, by przeadowanie byo pynne — z wykorzystaniem efektów
fadeIn() oraz fadeOut(). Skrypt powinien dziaa w taki sposób, by podczas animacji
opcje menu byy nieczynne. Rozwizaniem zadania jest skrypt z listingu 11.4.
Listing 11.3. Plik menu.html z wiczenia 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. Rozwizanie wiczenia 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(){
}
);
}
function wlacz_hiperlacza()
{
trwa = 0;
$('a').
hover(
function(){
$(this).css('text-decoration', 'underline');
},
function(){
}
133
);
}
$(function(){
wylacz_hiperlacza();
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});
$('a').click(function(){
if (trwa == 0) {
var url = $(this).attr('href');
$('#tresc').fadeOut(2000, function(){
$('#tresc').load(url);
wlacz_hiperlacza();
});
});
}
return false;
});
});
</script>
W skrypcie z listingu 11.4 najpierw definiujemy zmienn trwa. Zmienna ta bdzie
flag, informujc o tym, e animacja jest w trakcie wykonywania. Jeli warto zmiennej trwa wynosi 1, to animacja wanie jest wykonywana i hipercza nie powinny
dziaa. W przeciwnym razie, czyli gdy warto zmiennej trwa wynosi 0, animacja nie
jest wykonywana i hipercza powinny dziaa.
Za wczanie i wyczanie dziaania hiperczy odpowiadaj funkcje wlacz_hiperlacza()
oraz wylacz_hiperlacza(). Ustalaj one warto zmiennej trwa oraz modyfikuj style
CSS hiperczy. Wewntrz tych funkcji wybieramy wszystkie hipercza:
$('a').
ustalamy ich style CSS:
i modyfikujemy efekt rollover:
hover(
function(){
},
function(){
}
);
Cz I i Abecado
134
Metoda hover() przypisuje obsug dwóch zdarze: onmouseenter oraz onmouseleave1.
Powysza instrukcja jest równowana dwóm instrukcjom:
mouseenter(function(){
}).mouseleave(function(){
});
Dziaanie skryptu z listingu 11.4 rozpoczynamy od wyczenia hiperczy, ukrycia
elementu #tresc, zaadowania do elementu #tresc pliku fragment-ulica-dominikanska.
html oraz animowanego wywietlenia elementu #tresc:
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
wlacz_hiperlacza();
});
Animacja bdzie trwaa 2 sekundy (tj. 2000 milisekund). Po zakoczeniu animacji hipercza zostan wczone, za co odpowiada wywoanie funkcji wlacz_hiperlacza().
Zasadnicz czci skryptu jest przypisanie obsugi zdarzenia onclick do hiperczy.
Hipercza bd dziaay wycznie wtedy, gdy warto zmiennej trwa wynosi 0:
$('a').click(function(){
if (trwa == 0) {
...
}
return false;
});
W ten sposób wyczamy dziaanie hiperczy w trakcie trwania animacji. Zdarzenie
onclick bdzie generowane, jednak dziki powyszej instrukcji if nie spowoduje ono
wykonania adnych akcji.
Jeli animacja nie jest wykonywana, wówczas obsuga kliknicia przebiega nastpujco:
najpierw wyczamy dziaanie hiperczy:
Nastpnie z atrybutu href kliknitego hipercza do zmiennej url pobieramy nazw pliku:
var url = $(this).attr('href');
1
Zdarzenia mouseeneter oraz mouseleave nie wystpuj w drzewie DOM. S one emulowane przez
bibliotek jQuery. Pierwotnie zdarzenia te pojawiy si w przegldarce Internet Explorer. Zdarzenia
mouseeneter i mouseleave róni si od zdarze mouseover i mouseout tym, e s generowane dokadnie
jeden raz, dopóki kursor myszki nie opuci wybranego elementu. Podczas jednokrotnego wskazania
elementu wskanikiem myszki zdarzenia te zostan wygenerowane dokadnie jeden raz. Zdarzenia
mouseover oraz mouseout mog by wygenerowane kilkukrotnie.
135
Teraz wyczamy 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 wczamy widoczno elementu #tresc:
//kod wykonywany, gdy element #tresc jest ju widoczny
});
Element ten pojawi si stopniowo na ekranie. Gdy element #tresc jest ju widoczny,
ponownie wczamy dziaanie hiperczy:
wlacz_hiperlacza();
wiczenie 11.3. ________________________________________________
Dokument index.html zawiera znacznik img, który umieszcza na stronie WWW zdjcie zawarte w pliku fotka.jpg. Poniej zdjcia znajduj si trzy hipercza. Jedno jako
etykiet ma strzak w lewo, drugie — napis reset, a trzecie — strzak w prawo. Zarys
kodu XHTML jest przedstawiony na listingu 11.5. Napisz skrypt jQuery, który zmodyfikuje dziaanie hiperczy. Strzaka w lewo ma powodowa, e obraz pynnym ruchem
wyjedzie poza lew krawd nadrzdnego elementu div, strzaka w prawo ma powodowa pynne wyjechanie zdjcia poza praw krawd elementu div, za napis reset
ma powodowa powrót zdjcia do rodka elementu div. Rozwizaniem zadania jest
skrypt przedstawiony na listingu 11.6.
Listing 11.5. Plik index.html z wiczenia 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>
Cz I i Abecado
136
Listing 11.6. Skrypt z wiczenia 11.3
$(document).ready(function(){
$("#lewo").click(function(){
$('#element img').animate({
'left' : "-100px"
});
return false;
});
$("#prawo").click(function(){
'left' : "200px"
});
return false;
});
$("#reset").click(function(){
'left' : "60px"
});
return false;
});
});
Skrypt z listingu 11.6 zawiera instrukcje, które przypisz procedury obsugi zdarzenia
onclick trzem hiperczom zawartym w dokumencie. Sednem rozwizania jest pynne
przesuwanie zdjcia w trzy róne miejsca. W celu przesunicia fotografii poza lew krawd elementu div modyfikujemy waciwo CSS left, nadajc jej warto –100 pikseli:
'left' : "-100px"
});
Przesunicie elementu img poza praw krawd elementu div wykonuje instrukcja:
'left' : "200px"
});
Natomiast powrót do pozycji startowej polega na przypisaniu waciwoci left wartoci
60 pikseli:
'left' : "60px"
});
Funkcja animate() spowoduje pynn zmian waciwoci left od wartoci biecej
do jednej z podanych liczb, czyli –100px, 60px lub 200px.
137
W rozwizaniu tym wan rol odgrywaj style CSS. Element img jest pozycjonowany
bezwzgldnie wewntrz zawierajcego go elementu div:
#element {
position: relative;
overflow: hidden;
}
#element img {
display: block;
width: 80px;
height: 60px;
position: absolute;
top: 10px;
left: 60px;
}
Nie utrudniaj sobie życia — skorzystaj z biblioteki jQuery!
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ę z niej, 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!
• Trzy warstwy dokumentu XHTML:
struktura, wygląd i zachowanie
• Zbiory węzłów, tworzenie i usuwanie
węzłów w drzewie DOM
• Korzystanie z biblioteki jQuery
• Efekty specjalne
• Selektory CSS i zdarzenia XHTML
• Funkcja jQuery() — w skrócie $()
• Modyfikacja wyglądu, odczyt
i modyfikacja treści elementów
• Odczyt i modyfikacja węzłów
drzewa DOM
• Odczyt i modyfikacja atrybutów
• Operacje przekształcające zbiór elementów
• Dodawanie i usuwanie węzłów drzewa
DOM, wędrówka po drzewie DOM
• Parametry wtyczek, ich tworzenie,
minimalizacja i kompresja
Wykorzystaj szanse, jakie daje Ci biblioteka jQuery!
Cena: 39,00 zł
5455
JQUEPP.indd 1
• Nie u
• Abec
• Inter
• Wtyc

JQuery. Poradnik programisty

Transkrypt

Podobne dokumenty

PAutomatyczne_cz1_po poprawkachx.p65

Wygeneruj PDF dla tej strony

ZAPOMNIANE I NOWE UTWORY NA KLARNET

Żywot św. Stefana króla Węgier czyli Kronika węgiersko

Front-end