jQuery 1.3.
Wprowadzenie
Autorzy: Jonathan Chaffer, Karl Swedberg, John Resig
TÅ‚umaczenie: Anna Trojan
ISBN: 978-83-246-2641-0
Tytuł oryginału: Learning jQuery 1.3
Format: 170×230, stron: 424
Język JavaScript po blisko piętnastu latach na rynku dalej ma się dobrze. Interaktywne
strony, interesujące efekty oraz technologia AJAX sprawiają, że wciąż jest bardzo
atrakcyjnym narzędziem, a aplikacje internetowe z każdym rokiem coraz bardziej
zaczynają przypominać te znane z codziennej pracy. Biblioteka jQuery pozwala na jeszcze
więcej przy zdecydowanie mniejszym nakładzie pracy! Niemożliwe? Przekonaj się sam!
W trakcie lektury tej książki poznasz tajniki biblioteki jQuery oraz atuty, dzięki którym
zyskała ona taką rzeszę fanów. Autorzy omawiają wszystkie zagadnienia związane z tą
biblioteką. Na samym początku nauczysz się korzystać z selektorów oraz zdarzeń, aby
następnie przejS
ć do zaawansowanych tematów związanych z AJAX-em oraz edycją
drzewa DOM. Rozdział poS
więcony efektom specjalnym będzie jednym z tych, które
pozwolą Ci wykrzesać jeszcze więcej porywających efektów z Twojego kodu.
OlS
niewające galerie, pokazy slajdów, interaktywne formularze są w zasięgu Twoich
możliwoS
ci! Pod koniec książki dowiesz się, jak wykorzystywać dodatki oraz tworzyć
własne. Trzymasz w rękach długo oczekiwaną na polskim rynku pozycję, poS
więconą
niezwykłej bibliotece!
" Przeznaczenie biblioteki jQuery
" Wykorzystanie selektorów
" Wykorzystanie mechanizmu zdarzeń
" Zdarzenia złożone
" Użycie efektów specjalnych
" Modyfikowanie arkuszy CSS  w locie
" Edycja drzewa DOM
" Metody na Å‚atwiejsze wykorzystanie technologii AJAX
" Operacje na tabelach
" Praca z formularzami
" Instalowanie oraz wykorzystanie dodatków
" Tworzenie własnych dodatków dla jQuery
Uzyskaj jeszcze więcej z języka JavaScript!
Spis tre ci
Przedmowa 11
O autorach 13
O korektorach 15
Wprowadzenie 17
Rozdzia 1. Pocz tki 23
Co robi jQuery 23
Dlaczego jQuery dzia a dobrze 25
Historia projektu jQuery 26
Nasza pierwsza strona z jQuery 27
Pobranie jQuery 27
Utworzenie dokumentu HTML 27
Dodanie jQuery 30
Gotowy produkt 33
Podsumowanie 33
Rozdzia 2. Selektory 35
DOM 35
Funkcja fabryczna $() 36
Selektory CSS 37
Stylizacja poziomów zagnie d enia listy 38
Selektory atrybutów 40
Stylizacja odno ników 40
W asne selektory 42
Stylizacja co drugiego wiersza 42
Selektory formularzy 45
 Spis tre ci
Metody przechodzenia drzewa DOM 45
Stylizacja wybranych komórek 46
czenie w a cuch 48
Dost p do elementów DOM 48
Podsumowanie 49
Rozdzia 3. Zdarzenia 51
Wykonywanie zada w momencie za adowania strony 51
Czas wykonania kodu 51
Wiele skryptów na jednej stronie 52
Skróty poprawiaj ce zwi z o kodu 53
Wspó istnienie z innymi bibliotekami 54
Proste zdarzenia 55
Prosty prze cznik stylów 55
Skrótowa obs uga zdarze 63
Zdarzenia z o one 64
Pokazywanie i ukrywanie zaawansowanych opcji 64
Wyró nianie elementów, które mo na klikn 66
Podró zdarzenia 67
Efekty uboczne propagacji zdarze 69
Zmiana podró y  obiekt zdarzenia 70
Element docelowy zdarzenia 71
Zatrzymanie propagacji zdarze 71
Dzia ania domy lne 72
Delegacja zdarze 72
Usuwanie programu obs ugi zdarze 75
Przestrzenie nazw zdarze 75
Ponowne dowi zanie zdarzenia 76
Symulacja interakcji z u ytkownikiem 78
Zdarzenia klawiatury 79
Podsumowanie 81
Rozdzia 4. Efekty 83
Modyfikacja CSS w locie 83
Proste ukrywanie i pokazywanie 87
Efekty a szybko 90
Przyspieszanie 90
Pojawianie si i znikanie 91
Efekty z o one 91
Tworzenie w asnych animacji 93
Prze czanie znikania 94
Animacja z u yciem wielu w a ciwo ci 94
Efekty jednoczesne a kolejkowane 97
Praca z jednym zbiorem elementów 97
Praca z wieloma zbiorami elementów 100
Funkcje zwrotne 102
W skrócie 104
Podsumowanie 104
4
 Spis tre ci
Rozdzia 5. Edycja drzewa DOM 105
Edycja atrybutów 105
Atrybuty inne od klas 106
Jeszcze raz funkcja fabryczna $() 108
Wstawianie nowych elementów 110
Przenoszenie elementów 111
Oznaczenie, ponumerowanie i utworzenie odno nika do kontekstu 115
Dodanie przypisów dolnych 117
Opakowanie elementów 119
Kopiowanie elementów 120
Klonowanie ze zdarzeniami 121
Klonowanie cytatów wyrzuconych 121
Nieco o CSS 122
Powrót do kodu 122
Upi kszenie cytatów wyrzuconych 125
Metody edycji drzewa DOM w skrócie 126
Podsumowanie 128
Rozdzia 6. Ajax 129
adowanie danych na danie 130
Dodawanie kodu HTML 131
Praca z obiektami JavaScriptu 134
adowanie dokumentu XML 141
Wybór formatu danych 144
Przekazywanie danych do serwera 145
Wykonanie dania GET 146
Wykonanie dania POST 149
Serializacja formularza 150
ledzenie dania 152
Ajax a zdarzenia 155
Ograniczenia w zakresie bezpiecze stwa 156
Wykorzystanie JSONP dla danych zewn trznych 157
Dodatkowe opcje 158
Niskopoziomowa metoda Ajaksa 159
Modyfikacja opcji domy lnych 159
adowanie cz ci strony HTML 160
Podsumowanie 162
Rozdzia 7. Przetwarzanie tabel 165
Sortowanie i podzia na strony 166
Sortowanie po stronie serwera 166
Sortowanie za pomoc JavaScriptu 167
Paginacja po stronie serwera 183
Paginacja w JavaScripcie 185
Gotowy kod 190
5
 Spis tre ci
Modyfikacja wygl du tabeli 192
Wyró nianie wierszy 192
Podpowiedzi 199
Zwijanie i rozwijanie cz ci tabeli 205
Filtrowanie 207
Gotowy kod 212
Podsumowanie 215
Rozdzia 8. Formularze i ich funkcje 217
Ulepszenie prostego formularza 217
Progresywne ulepszanie stylu formularzy 218
Pola wy wietlane warunkowo 224
Sprawdzanie poprawno ci formularza 227
Edycja pól wyboru 234
Gotowy kod 237
Zwi z e formularze 239
Tekst pojemnika na pola formularza 239
Autouzupe nianie oparte na Ajaksie 242
Gotowy kod 250
Praca z danymi liczbowymi formularza 253
Struktura tabeli koszyka z zakupami 253
Odrzucanie danych nieliczbowych 256
Obliczenia arytmetyczne 256
Usuwanie elementów 263
Edycja informacji o wysy ce 267
Gotowy kod 270
Podsumowanie 272
Rozdzia 9. Rotacja i przesuwanie elementów 273
Rotacja wiadomo ci 274
Konfiguracja strony 274
Pobieranie wiadomo ci z kana u RSS 276
Konfiguracja rotacji elementów 279
Funkcja rotacji wiadomo ci 280
Pauza po najechaniu mysz 282
Pobieranie wiadomo ci RSS z innej domeny 285
Gradientowy efekt blakni cia 286
Gotowy kod 289
Karuzela obrazków 290
Konfiguracja strony 291
Przesuwanie obrazków po klikni ciu 294
Powi kszanie obrazków 301
Gotowy kod 313
Podsumowanie 316
6
 Spis tre ci
Rozdzia 10. Wykorzystywanie dodatków 317
Znalezienie dodatku i uzyskanie pomocy 317
Jak korzysta z dodatku 318
Dodatek Form 319
Wskazówki i sztuczki 320
Biblioteka dodatków jQuery UI 321
Efekty 322
Komponenty interakcji 324
Wid ety 326
ThemeRoller w jQuery UI 329
Inne polecane dodatki 330
Formularze 330
Tabele 332
Obrazki 334
Ramki z obrazkami i okna dialogowe 335
Wykresy 338
Zdarzenia 339
Podsumowanie 340
Rozdzia 11. Tworzenie dodatków 341
Dodawanie nowych funkcji globalnych 341
Dodanie wi kszej liczby funkcji 342
Jaki to ma sens? 343
Tworzenie nowej metody pomocniczej 344
Dodawanie metod obiektu jQuery 345
Kontekst metody obiektu 346
czenie metod w a cuchy 348
Metody przechodzenia drzewa DOM 349
Dodawanie nowych metod skrótów 353
Parametry metod 356
Proste parametry 358
Tablice asocjacyjne parametrów 359
Domy lne warto ci parametrów 360
Funkcje zwrotne 361
Dostosowywanie warto ci domy lnych 362
Dodanie wyra enia selektora 364
Podzielenie si dodatkiem ze wiatem 367
Konwencje nazewnictwa 367
U ycie aliasu $ 367
Interfejsy metod 368
Styl dokumentacji 368
Podsumowanie 368
Dodatek A ród a internetowe 369
Dokumentacja jQuery 369
Wiki jQuery 369
jQuery API 369
7
 Spis tre ci
Przegl darka jQuery API 370
Visual jQuery 370
Przegl darka jQuery API w formacie Adobe AIR 370
Informacje o JavaScripcie 370
Mozilla developer center 370
Dev.opera 370
MSDN JScript Reference 371
Quirksmode 371
JavaScript Toolbox 371
Kompresory kodu w JavaScripcie 371
YUI Compressor 371
JSMin 372
Pretty printer 372
Informacje o (X)HTML 372
Strona hipertekstowego j zyka znaczników W3C 372
Informacje o CSS 372
Strona kaskadowych arkuszy stylów W3C 373
ci gawka CSS Mezzoblue 373
Position is everything 373
Przydatne blogi 373
Blog jQuery 373
Learning jQuery 374
Ajaxian 374
John Resig 374
JavaScript 374
Robert s talk 374
Web standards with imagination 374
Snook 375
Strona Matta Snidera o JavaScripcie 375
I can t 375
DOM scripting 375
As days pass by 375
A List Apart 375
Platformy do programowania internetowego korzystaj ce z jQuery 376
Dodatek B Narz dzia programistyczne 377
Narz dzia dla przegl darki Firefox 377
Firebug 377
Pasek narz dzi Web Developer 378
Venkman 378
Regular Expressions Tester 378
Narz dzia dla przegl darki Internet Explorer 378
Microsoft Internet Explorer Developer Toolbar 379
Microsoft Visual Web Developer 379
DebugBar 379
Drip 379
8
 Spis tre ci
Narz dzia dla przegl darki Safari 380
Programowanie Menu 380
Inspektor www 380
Narz dzia dla przegl darki Opera 380
Dragonfly 380
Inne narz dzia 381
Firebug Lite 381
NitobiBug 381
Pakiet jQuery dla edytora TextMate 381
Charles 381
Fiddler 382
Aptana 382
Dodatek C Domkni cia w JavaScripcie 383
Funkcje wewn trzne 384
Wielka ucieczka 385
Zakresy zmiennych 386
Interakcje mi dzy domkni ciami 388
Domkni cia w jQuery 389
Argumenty $(document).ready() 389
Programy obs ugi zdarze 390
Zagro enia wynikaj ce z wycieku pami ci 392
Przypadkowe p tle odwo ania 393
Problem z wyciekiem pami ci w przegl darce Internet Explorer 394
Dobra wiadomo 395
Podsumowanie 395
Dodatek D Podr czne informacje 397
Wyra enia selektorów 397
Metody przechodzenia drzewa DOM 399
Metody zdarze 400
Metody efektów 403
Metody edycji drzewa DOM 404
Metody Ajaksa 406
Pozosta e metody 407
Skorowidz 409
9
1
Pocz tki
Dzisiejszy Internet to dynamiczne rodowisko, a jego u ytkownicy wysoko stawiaj poprzeczk ,
zarówno je li chodzi o styl, jak i o funkcje stron internetowych. By móc tworzy interesuj ce
i interaktywne witryny, programi ci si gaj po biblioteki JavaScriptu, takie jak jQuery, które
pomagaj im automatyzowa cz sto wykonywane zadania i upraszcza te bardziej skompliko-
wane. Jednym z powodów, dla których biblioteka jQuery cieszy si takim powodzeniem, jest
to, e jest w stanie wspomóc programist w wielu ró nych zadaniach.
W a ciwie trudno jest zadecydowa , od czego zacz , poniewa jQuery ma tyle ró nych funkcji.
Mimo to struktura biblioteki jest bardzo spójna i symetryczna  wi kszo jej koncepcji za-
po yczono z projektów takich, jak HTML i kaskadowe arkusze stylów (CSS). Sama struktura
biblioteki u atwia zacz cie pracy projektantom z niewielkim do wiadczeniem programistycznym,
poniewa wielu twórców stron internetowych ma o wiele wi ksze do wiadczenie z HTML
i CSS ni z JavaScriptem. Ju w pierwszym rozdziale ksi ki napiszemy zreszt w jQuery
dzia aj cy program sk adaj cy si z trzech wierszy kodu. Z drugiej strony równie do wiad-
czeni programi ci skorzystaj na tej konceptualnej spójno ci, o czym przekonamy si w dal-
szych, bardziej zaawansowanych rozdzia ach.
Przyjrzyjmy si zatem temu, co mo e dla nas zrobi jQuery.
Co robi jQuery
Biblioteka jQuery udost pnia ogólny poziom abstrakcji s u cy do tworzenia skryptów na potrze-
by cz sto spotykanych zada , dzi ki czemu przydatna jest w niemal ka dej sytuacji wymaga-
j cej napisania skryptu. Rozszerzalna natura biblioteki oznacza, e nigdy nie uda oby nam si
opisa wszystkich jej mo liwych zastosowa i funkcji w jednej ksi ce, poniewa dodatki ci -
gle s tworzone, dok adaj c nowe mo liwo ci. Najwa niejsze funkcje j dra biblioteki s jed-
nak nast puj ce:
jQuery 1.3. Wprowadzenie
Uzyskanie dost pu do elementów dokumentu. Bez biblioteki JavaScriptu
przej cie drzewa DOM (ang. Document Object Model) i lokalizacja wybranych
cz ci struktury dokumentu HTML wymaga napisania wielu wierszy kodu. jQuery
oferuje rozbudowany i wydajny mechanizm selektorów s u cy do pobierania
fragmentu dokumentu, który ma by przejrzany lub zmodyfikowany.
Modyfikowanie wygl du strony internetowej. CSS oferuje metod wp ywania
na sposób wy wietlania dokumentu, jednak na niewiele si przydaje, kiedy nie
wszystkie przegl darki obs uguj te same standardy. Dzi ki jQuery programi ci s
w stanie wype ni t luk , polegaj c na obs udze tych samych standardów we
wszystkich przegl darkach. Dodatkowo jQuery jest w stanie modyfikowa klasy
lub pojedyncze w a ciwo ci stylu zastosowane do cz ci dokumentu nawet
po wygenerowaniu strony.
Zmiana zawarto ci dokumentu. jQuery nie ogranicza si jednak do zmian czysto
kosmetycznych  jest w stanie zmodyfikowa zawarto samego dokumentu
za pomoc kilku naci ni klawiatury. Mo na zmienia tekst, wstawia lub podmienia
obrazki, zmienia kolejno list lub przepisa b d rozszerzy ca struktur HTML
 wszystko za pomoc jednego, atwego w u yciu API (ang. Application
Programming Interface).
Reagowanie na interakcj z u ytkownikiem. Nawet najbardziej wyszukane dzia ania
nie s szczególnie przydatne, je li nie mo emy kontrolowa tego, kiedy nast puj .
Biblioteka jQuery oferuje elegancki sposób przechwytywania ró nego rodzaju
zdarze  takich jak klikni cie odno nika przez u ytkownika  bez konieczno ci
za miecania kodu HTML programami obs ugi zdarze . Jednocze nie API s u ce
do obs ugi zdarze likwiduje niezgodno ci mi dzy przegl darkami, które s
dla programistów internetowych prawdziw katorg .
Animacja zmian wprowadzanych do dokumentu. By efektywnie implementowa
tego typu dzia ania interaktywne, projektant musi da u ytkownikowi jakie wizualne
informacje zwrotne. Biblioteka jQuery umo liwia to, udost pniaj c wiele efektów
(takich jak blakni cie czy animowane przej cia), a tak e s u c jako narz dzie
do tworzenia nowych efektów.
Pobieranie informacji z serwera bez od wie ania strony. Ten wzorzec kodu
znany jest jako Ajax (od Asynchronous JavaScript and XML) i wspomaga programistów
w tworzeniu bogatych w mo liwo ci oraz reaguj cych na dzia anie u ytkownika
stron. Biblioteka jQuery likwiduje z tego procesu cz zwi zan z ró nicami mi dzy
poszczególnymi przegl darkami, pozwalaj c programistom na skupienie si
na funkcjonalno ci po stronie serwera.
Uproszczenie cz sto spotykanych zada wykonywanych za pomoc JavaScriptu.
Oprócz wszystkich mo liwo ci jQuery zwi zanych z obs ug dokumentów biblioteka
ta udost pnia tak e ulepszenia dla podstawowych konstrukcji j zyka JavaScript,
takich jak iteracja i modyfikacja tablic.
24
Rozdzia 1. " Pocz tki
Dlaczego jQuery dzia a dobrze
Wraz ze wzrostem zainteresowania dynamicznym HTML pojawi o si mnóstwo bibliotek i plat-
form opartych na JavaScripcie. Niektóre z nich s wyspecjalizowane i skupiaj si tylko na jednym
b d dwóch z wymienionych wy ej zada . Inne staraj si skatalogowa wszystkie mo liwe
dzia ania i animacje, udost pniaj c je jako gotowy pakiet. By zachowa szerok gam mo li-
wo ci przedstawionych powy ej, ale te niewielki rozmiar, jQuery przyjmuje kilka strategii:
Wykorzystanie znajomo ci CSS. Opieraj c mechanizm lokalizacji elementów
strony na selektorach CSS, jQuery dziedziczy zwi z y, a jednocze nie czytelny
sposób wyra ania struktury dokumentu. Biblioteka jQuery staje si punktem
wyj cia dla projektantów, którzy chc dodawa do swych stron ró norodne
dzia ania, gdy znajomo sk adni CSS jest podstaw zawodowego tworzenia
witryn internetowych.
Obs uga dodatków. W celu unikni cia prze adowania funkcjami jQuery przenosi
specjalne zastosowania do dodatków. Metoda tworzenia nowych dodatków jest
prosta i dobrze udokumentowana, co pobudzi o rozwój du ej liczby pomys owych
i przydatnych modu ów. Nawet w podstawowym pliku jQuery wi kszo opcji
wewn trznie korzysta z architektury dodatków, dzi ki czemu mo na je w miar
potrzeby usun , uzyskuj c jeszcze mniejsz bibliotek .
Abstrakcja niezgodno ci mi dzy przegl darkami. Tragedi programistów stron
internetowych jest to, e ka da przegl darka ma swój w asny zbiór odchyle od
opublikowanych standardów. Znaczna cz procesu tworzenia ka dej aplikacji
internetowej przypada na obs ug tych samych funkcji w inny sposób dla ka dej
z platform. Cho ci gle ewoluuj cy wiat przegl darek sprawia, e w przypadku
bardziej zaawansowanych funkcji stworzenie podstaw kodu ca kowicie neutralnych
dla przegl darki jest niemo liwe, jQuery dodaje poziom abstrakcji normalizuj cy
cz sto wykonywane zadania, zmniejszaj cy wielko kodu i znacznie go upraszczaj cy.
Praca ze zbiorami. Kiedy nakazujemy jQuery odnalezienie wszystkich elementów
klasy collapsible, a nast pnie ukrycie ich, nie ma potrzeby wykonywania
p tli po ka dym zwracanym elemencie. Zamiast tego metody takie jak .hide()
zaprojektowano w taki sposób, by automatycznie dzia a y na zbiorze obiektów,
a nie tylko na pojedynczych obiektach. Technika ta, zwana niejawn iteracj ,
oznacza, e wiele konstrukcji p tli staje si zb dnych, co znacznie skraca kod.
Zezwolenie na wiele dzia a w jednym wierszu. By unikn nadmiernego korzystania
z tymczasowych zmiennych czy bezsensownego powtarzania, jQuery w wi kszo ci
metod wykorzystuje wzorzec programowania zwany a cuchem. Oznacza to,
e wynikiem wi kszo ci dzia a na obiekcie jest sam obiekt, gotowy do zastosowania
na nim kolejnych dzia a .
Strategie te pozwalaj na utrzymanie niewielkiego rozmiaru pakietu jQuery  po skompre-
sowaniu jest to poni ej 20 KB  udost pniaj c jednocze nie techniki umo liwiaj ce zacho-
wanie zwi z o ci w asnego kodu korzystaj cego z biblioteki.
25
jQuery 1.3. Wprowadzenie
Elegancja biblioteki po cz ci jest cech samego projektu jQuery, a po cz ci efektem proce-
su ewolucyjnego pobudzanego przez aktywn spo eczno , która wytworzy a si wokó pro-
jektu. U ytkownicy jQuery aktywnie omawiaj nie tylko rozwój dodatków, ale tak e ulepszenia
samego j dra biblioteki. W dodatku A przedstawimy wiele zasobów dost pnych dla programi-
stów korzystaj cych z jQuery.
Pomimo skali wysi ków niezb dnych do stworzenia tak elastycznego i rozbudowanego syste-
mu produkt ko cowy jest darmowy i dost pny dla ka dego. Projekt ten dost pny jest na po-
dwójnej licencji: GNU Public License (dzi ki czemu mo na go do czy do wielu innych
projektów open source) oraz MIT License (by u atwi zastosowanie jQuery w oprogramowaniu
w asno ciowym).
Historia projektu jQuery
Niniejsza ksi ka omawia funkcjonalno i sk adni jQuery 1.3.x, najnowsz wersj dost pn
w czasie jej pisania. Za o enia le ce u podstaw biblioteki  udost pnienie atwych sposobów
odnajdywania elementów na stronie internetowej oraz modyfikowania ich  nie zmieni y si
w trakcie jej rozwijania, cho zmienione zosta y szczegó y sk adni i dost pnych mo liwo ci.
Poni szy krótki przegl d historii projektu opisuje najwa niejsze zmiany pomi dzy wersjami.
Publiczne og oszenie prac: John Resig po raz pierwszy wspomnia o poprawkach
do biblioteki Prototype (cz ci  Behaviour ) w sierpniu 2005 roku. Nowa biblioteka
zosta a oficjalnie opublikowana pod nazw jQuery 14 stycznia 2006 roku.
jQuery 1.0 (sierpie 2006): ju pierwsze wydanie biblioteki mia o rozbudowan
obs ug selektorów CSS, zdarze i interakcji opartych na Ajaksie.
jQuery 1.1 (stycze 2007): to wydanie znacznie usprawni o API. Wiele rzadko
wykorzystywanych metod zosta o po czonych, co zmniejszy o ca kowit liczb
metod, które trzeba opanowa i udokumentowa .
jQuery 1.1.3 (lipiec 2007): to pomniejsze wydanie zawiera o ogromn popraw
szybko ci dzia ania silnika selektorów jQuery. Od tej wersji wydajno jQuery
wypada bardzo korzystnie na tle podobnych bibliotek JavaScriptu, takich jak
Prototype, Mootools oraz Dojo.
jQuery 1.2 (wrzesie 2007): w wydaniu tym usuni to sk adni XPath s u c
do wybierania elementów, gdy by a ona powtarzalna w stosunku do sk adni CSS.
Dostosowywanie efektów do w asnych potrzeb jest od tego wydania bardziej
elastyczne; tworzenie dodatków sta o si atwiejsze dzi ki wprowadzeniu zdarze
z przestrzeni nazw.
jQuery UI (wrzesie 2007): og oszono powstanie nowego zbioru dodatków,
który mia zast pi popularny, jednak starzej cy si dodatek Interface. Obejmowa
on bogat kolekcj gotowych wid etów, a tak e zbiór narz dzi s u cych do budowania
bardziej zaawansowanych elementów, takich jak interfejsy oparte na zasadzie
 przeci gnij i upu  .
26
Rozdzia 1. " Pocz tki
jQuery 1.2.6 (maj 2008): funkcjonalno popularnego dodatku Brandona Aarona
o nazwie Dimensions zosta a do czona do j dra biblioteki.
jQuery 1.3 (stycze 2009): powa na przebudowa silnika selektorów (Sizzle)
ogromnie poprawi a wydajno biblioteki. Oficjalnie obs ugiwana jest równie
delegacja zdarze .
Informacje o starszych wersjach jQuery mo na znale na stronie internetowej projektu pod adresem:
http://docs.jquery.com/History_of_jQuery.
Nasza pierwsza strona z jQuery
Skoro omówili my ju mo liwo ci udost pniane przez jQuery, mo emy teraz sprawdzi , jak
mo na wykorzysta t bibliotek w praktyce.
Pobranie jQuery
Oficjalna strona internetowa jQuery (http://jquery.com/) jest zawsze najlepszym adresem,
pod którym mo na znale aktualny kod i informacje dotycz ce biblioteki. Na pocz tek po-
trzebna jest nam kopia jQuery, któr mo na pobra bezpo rednio na stronie g ównej tej witryny.
W ka dym momencie dost pnych mo e by kilka wersji jQuery  dla nas jako programistów
stron internetowych najbardziej odpowiednia b dzie najnowsza nieskompresowana wersja
biblioteki. W rodowisku produkcyjnym mo na j zast pi wersj skompresowan .
Nie jest wymagana adna instalacja. By u y jQuery, wystarczy umie ci plik na naszej stronie
internetowej, w publicznie dost pnym miejscu. Poniewa JavaScript jest j zykiem interpretowa-
nym, nie musimy martwi si o faz kompilacji. Zawsze gdy b dziemy potrzebowa jQuery
na stronie internetowej, b dziemy si po prostu odnosili do lokalizacji pliku z dokumentu HTML.
Utworzenie dokumentu HTML
Wi kszo przyk adów wykorzystuj cych jQuery sk ada si z trzech elementów: samego do-
kumentu HTML, plików CSS nadaj cych mu styl i plików JavaScriptu pozwalaj cych wyko-
nywa dzia ania. W naszym pierwszym przyk adzie wykorzystamy stron z fragmentem
ksi ki1; do cz ci kodu przypisano kilka klas.
1
W przyk adzie wykorzystano fragment ksi ki Po drugiej stronie lustra Lewisa Carrolla w t umaczeniu
Roberta Stillera  przyp. t um.
27
jQuery 1.3. Wprowadzenie
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Po drugiej stronie lustra

autor: Lewis Carroll

1. Dom odbity w lustrze

Na stole ko o Alicji le a a ksi ka, wi c kiedy tak siedzia a,
obserwuj c Bia ego Króla (bo wci troch si o niego l ka a i trzyma a
w pogotowiu atrament, eby go obla , gdyby jeszcze raz zemdla ),
przewraca a sobie kartki w poszukiwaniu czego , co by mog a przeczyta :
"bo wszystko to w jakim nieznanym j zyku!"
powiedzia a do siebie.

Brzmia o to tak.

IKA ORBA

ywt rks eikbil ,ywa tzsurm sazc yB

,y pyriw c zcreiw hcaz aw aN

ywt lgorob anc od e gzim A

.y pyzrgz yruzczsiw enmodz I

Zastanawia a si nad tym przez jaki czas, a b ysn a jej genialna
my l. "Przecie to jest, oczywi cie, Lustrzana
Ksi ka! i jak na ni popatrz w Lustrze, to s owa znów b d takie,
jak trzeba."

I odczyta a nast puj cy wiersz:

ABRO AKI

By czas mruszt awy, libkie skr twy

Na wa zach wiercz c wiryp y,

A mizg e do cna borogl twy

I zdomne wiszczury zgrzyp y.

28
Rozdzia 1. " Pocz tki
Uk ad plików na serwerze nie ma znaczenia. Odwo ania z jednego pliku do drugiego nale y jedynie do-
stosowa tak, by pasowa y do wybranego przez nas sposobu organizacji. W wi kszo ci przyk adów
w ksi ce w odwo aniach do plików wykorzystamy cie ki wzgl dne (../images/foo.png), a nie bezwzgl dne
(/images/foo.png). Pozwala to na lokalne uruchamianie kodu bez konieczno ci posiadania serwera WWW.
Natychmiast po zwyk ym nag ówku HTML adowany jest arkusz stylów. W tym przyk adzie
jest on wyj tkowo sparta ski.
body {
font: 62.5% Arial, Verdana, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
.poem {
margin: 0 2em;
}
.highlight {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
margin: 0.5em 0;
background-color: #ffc;
}
Po odwo aniu do arkusza stylów do czone zostaj pliki JavaScriptu. Istotne jest, by element
script z bibliotek jQuery znajdowa si przed elementem script dla naszych w asnych
skryptów. W przeciwnym razie biblioteka jQuery nie b dzie dost pna, kiedy nasz kod b dzie
si próbowa do niej odwo a .
W pozosta ej cz ci ksi ki drukowane b d jedynie istotne cz ci plików HTML i CSS. Pe ne pliki do-
st pne s na stronie internetowej ksi ki pod adresem: http://helion.pl/ksiazki/jquer1.htm.
Teraz nasza strona wygl da tak:
29
jQuery 1.3. Wprowadzenie
Rysunek 1.1.
Wykorzystamy teraz jQuery do nadania nowego stylu tekstowi wiersza.
Przyk ad ten ma na celu zademonstrowanie prostego zastosowania jQuery. W rzeczywisto ci ten typ
stylizacji tekstu mo na wykona za pomoc samego CSS.
Dodanie jQuery
Nasz kod umie cimy w drugim  obecnie pustym  pliku JavaScriptu, do czonym do doku-
mentu HTML za pomoc kodu .
W tym przyk adzie wystarcz nam trzy wiersze kodu:
$(document).ready(function() {
$('.poem-stanza').addClass('highlight');
});
Odnalezienie tekstu wiersza
Podstawowym dzia aniem jQuery jest wybranie cz ci dokumentu. Wykonywane jest to za
pomoc konstrukcji $(). Zazwyczaj przyjmuje ona jako parametr a cuch znaków, który mo e
zawiera dowolne wyra enie selektora CSS. W tym przypadku chcemy odnale wszystkie
cz ci dokumentu, do których przypisano klas poem-stanza, dlatego selektor jest bardzo prosty.
W ksi ce opiszemy jednak równie o wiele bardziej wyszukane mo liwo ci. Ró ne sposoby
odnajdywania cz ci dokumentu omówimy w rozdziale 2.
30
Rozdzia 1. " Pocz tki
Funkcja $() jest tak naprawd fabryk dla obiektu jQuery b d cego podstawowym budulcem,
z jakim b dziemy od teraz pracowa . Obiekt jQuery zawiera zero lub wi ksz liczb ele-
mentów drzewa DOM i pozwala nam wchodzi z nimi w ró nego rodzaju interakcje. W tym
przypadku chcemy zmodyfikowa wygl d cz ci strony, co osi gniemy, zmieniaj c klasy przy-
pisane do tekstu wiersza.
Wstawienie nowej klasy
Metoda .addClass(), tak jak wi kszo metod jQuery, ma opisow nazw (ang. add class 
 dodaj klas  ). Dodaje ona klas CSS do wybranej cz ci strony. Jej jedynym parametrem jest
nazwa klasy, jak nale y doda . Metoda ta oraz jej odpowiednik .removeClass() pozwalaj
nam atwo zaobserwowa dzia anie jQuery, kiedy b dziemy bada ró ne dost pne wyra enia
selektorów. Na razie nasz przyk ad po prostu dodaje klas highlight, któr nasz arkusz stylów
definiuje jako tekst z obramowaniem napisany kursyw .
Warto zauwa y , e w celu dodania klasy do wszystkich zwrotek wiersza (elementów poem-stanza)
nie jest konieczne wykonywanie jakiejkolwiek iteracji. Tak jak wspominali my, jQuery wyko-
rzystuje w metodach takich jak .addClass() iteracj niejawn , dzi ki czemu jedno wywo a-
nie funkcji wystarczy do zmodyfikowania wszystkich wybranych cz ci dokumentu.
Wykonanie kodu
Po czenie $() i .addClass() wystarczy nam do osi gni cia celu, jakim jest zmiana wygl du
tekstu wiersza. Je li jednak ten wiersz kodu wstawimy po prostu w nag ówku dokumentu, nie
przyniesie to adnego efektu. Kod w JavaScripcie wykonywany jest w momencie napotkania
go przez przegl dark , a w czasie gdy przetwarzany jest nag ówek, nie ma jeszcze adnego
kodu HTML, któremu mo na by nada styl. Musimy zatem opó ni wykonanie kodu do czasu,
gdy b dzie dla nas dost pne drzewo DOM.
Tradycyjnym mechanizmem opó niania wykonywania kodu w JavaScripcie jest wywo anie
kodu wewn trz programu obs ugi zdarze (ang. event handler). Wi kszo programów obs ugi
zdarze dost pna jest dla zdarze inicjowanych przez u ytkownika, takich jak klikni cia mysz
i naci ni cia klawiszy. Gdyby my nie mieli dost pu do jQuery, musieliby my polega na pro-
gramie obs ugi zdarze onload, który wywo ywany jest po wygenerowaniu strony (ze wszyst-
kimi obrazkami). By wywo a kod ze zdarzenia onload, umie ciliby my go wewn trz funkcji:
function highlightPoemStanzas() {
$('.poem-stanza').addClass('highlight');
}
Nast pnie do czyliby my t funkcj do zdarzenia, modyfikuj c element dokumentu
HTML, tak by si do niej odwo ywa :

31
Czytaj dalej...