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: 170u230, 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 przejœæ do zaawansowanych tematów zwi¹zanych z AJAX-em oraz edycj¹
drzewa DOM. Rozdzia³ poœwiêcony efektom specjalnym bêdzie jednym z tych, które
pozwol¹ Ci wykrzesaæ jeszcze wiêcej porywaj¹cych efektów z Twojego kodu.
Olœniewaj¹ce galerie, pokazy slajdów, interaktywne formularze s¹ w zasiêgu Twoich
mo¿liwoœ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ê, poœ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

4

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

Spis tre"ci

5

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

Spis tre"ci

6

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

Spis tre"ci

7

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

Spis tre"ci

8

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

Spis tre"ci

9

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

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

24

Uzyskanie dost4pu 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$d1 rozszerzy& ca'$ struktur% HTML
— wszystko za pomoc$ jednego, 'atwego w u#yciu API (ang. Application
Programming Interface).

Reagowanie na interakcj4 z uCytkownikiem. 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>wieCania 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 cz4sto spotykanych zadaF 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.

Rozdzia3 1. • Pocz<tki

25

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$d1 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.

ObsIuga 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 mi4dzy 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 dziaIaF w jednym wierszu. By unikn$& nadmiernego korzystania
z tymczasowych zmiennych czy bezsensownego powtarzania, jQuery w wi%kszo!ci
metod wykorzystuje wzorzec programowania zwany IaFcuchem. 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.

jQuery 1.3. Wprowadzenie

26

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 ogIoszenie 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 (sierpieF 2006): ju# pierwsze wydanie biblioteki mia'o rozbudowan$
obs'ug% selektorów CSS, zdarze/ i interakcji opartych na Ajaksie.

jQuery 1.1 (styczeF 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 (wrzesieF 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 zdarzeF
z przestrzeni nazw.

jQuery UI (wrzesieF 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!&”.

Rozdzia3 1. • Pocz<tki

27

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 (styczeF 2009): powa#na przebudowa silnika selektorów (Sizzle)
ogromnie poprawi'a wydajno!& biblioteki. Oficjalnie obs'ugiwana jest równie#
delegacja zdarzeF.

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 znale1& 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$#ki

1

; 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. t3um.

jQuery 1.3. Wprowadzenie

28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Po drugiej stronie lustra</title>
<link rel="stylesheet" href="alice.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="alice.js" type="text/javascript"></script>
</head>

<body>
<h1>Po drugiej stronie lustra</h1>
<div class="author">autor: Lewis Carroll</div>
<div class="chapter" id="chapter-1">
<h2 class="chapter-title">1. Dom odbity w lustrze</h2>
<p>Na stole koHo Alicji leJaHa ksiKJka, wiMc kiedy tak siedziaHa,
obserwujKc BiaHego Króla (bo wciKJ trochM siM o niego lMkaHa i trzymaHa
w pogotowiu atrament, Jeby go oblaP, gdyby jeszcze raz zemdlaH),
przewracaHa sobie kartki w poszukiwaniu czegoQ, co by mogHa przeczytaP:
<span class="spoken">"bo wszystko to w jakimQ nieznanym jMzyku!"</span>
powiedziaHa do siebie.</p>
<p>BrzmiaHo to tak.</p>
<div class="poem">
<h3 class="poem-title">IKARORBAS</h3>
<div class="poem-stanza">
<div>ywtKrks eikbilQ ,ywaHtzsurm sazc HyB</div>
<div>,yHpyriwQ cKzcreiw hcazHaw aN</div>
<div>ywtKlgorob anc od eHgzim A</div>
<div>.yHpyzrgz yruzczsiwQ enmodz I</div>
</div>
</div>
<p>ZastanawiaHa siM nad tym przez jakiQ czas, aJ bHysnMHa jej genialna
myQl. <span class="spoken">"PrzecieJ to jest, oczywiQcie, Lustrzana
KsiKJka! i jak na niK popatrzM w Lustrze, to sHowa znów bMdK takie,
jak trzeba."</span></p>
<p>I odczytaHa nastMpujKcy wiersz:</p>
<div class="poem">
<h3 class="poem-title">SABRORAKI</h3>
<div class="poem-stanza">
<div>ByH czas mrusztHawy, Qlibkie skrKtwy</div>
<div>Na waHzach wierczKc QwirypHy,</div>
<div>A mizgHe do cna boroglKtwy</div>
<div>I zdomne Qwiszczury zgrzypHy.</div>
</div>
</div>
</div>
</body>
</html>

Rozdzia3 1. • Pocz<tki

29

Uk1ad plików na serwerze nie ma znaczenia. Odwo1ania z jednego pliku do drugiego nale&y jedynie do-
stosowa( tak, by pasowa1y do wybranego przez nas sposobu organizacji. W wi5kszo6ci przyk1adów
w ksi7&ce w odwo1aniach do plików wykorzystamy 6cie&ki wzgl5dne (

../images/foo.png

), a nie bezwzgl5dne

(

/images/foo.png

). Pozwala to na lokalne uruchamianie kodu bez konieczno6ci 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 pozosta1ej cz56ci ksi7&ki drukowane b5d7 jedynie istotne cz56ci plików HTML i CSS. Pe1ne pliki do-
st5pne s7 na stronie internetowej ksi7&ki pod adresem:

http://helion.pl/ksiazki/jquer1.htm

.

Teraz nasza strona wygl$da tak:

jQuery 1.3. Wprowadzenie

30

Rysunek 1.1.

Wykorzystamy teraz jQuery do nadania nowego stylu tekstowi wiersza.

Przyk1ad ten ma na celu zademonstrowanie prostego zastosowania jQuery. W rzeczywisto6ci ten typ
stylizacji tekstu mo&na wykona( za pomoc7 samego CSS.

Dodanie jQuery

Nasz kod umie!cimy w drugim — obecnie pustym — pliku JavaScriptu, do'$czonym do doku-
mentu HTML za pomoc$ kodu

<script src="alice.js" type="text/javascript"></script>

.

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 odnale1& 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.

Czytaj dalej...

Rozdzia3 1. • Pocz<tki

31

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()

iteracj4 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ó1ni& wykonanie kodu do czasu,
gdy b%dzie dla nas dost%pne drzewo DOM.

Tradycyjnym mechanizmem opó1niania wykonywania kodu w JavaScripcie jest wywo'anie
kodu wewn$trz programu obsIugi zdarzeF (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

<body>

dokumentu

HTML, tak by si% do niej odwo'ywa':

<body onload="highlightPoemStanzas();">