jquery. poradnik programisty scan.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

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,

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: