jquery. poradnik programisty helion, ebooki
[ Pobierz całość w formacie PDF ]
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 mili-
sekund, lecz moemy to zmieni, przekazujc do metod
slideDown()
oraz
slideUp()
parametr okrelajcy czas trwania animacji. Parametrem tym moe by liczba okrela-
jca, 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 mili-
sekund, 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');
});
130
Cz I
Abecado
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 urucho-
mieniu 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 zakocze-
niu efektu:
$('p#info').fadeIn(1000, function(){
//funkcja wywoywana po zakoczeniu animacji
});
Ostatnia z wymienionych na wstpie funkcji,
animate()
, pozwala na pynne modyfiko-
wanie 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
. Pierw-
szym 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,
[ Pobierz całość w formacie PDF ]