jQuery 1 3 Wprowadzenie jquer1


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艂 poSwi臋cony efektom specjalnym b臋dzie jednym z tych, kt贸re
pozwol膮 Ci wykrzesa膰 jeszcze wi臋cej porywaj膮cych efekt贸w z Twojego kodu.
OlSniewaj膮ce galerie, pokazy slajd贸w, interaktywne formularze s膮 w zasi臋gu Twoich
mo偶liwoSci! Pod koniec ksi膮偶ki dowiesz si臋, jak wykorzystywa膰 dodatki oraz tworzy膰
w艂asne. Trzymasz w r臋kach d艂ugo oczekiwan膮 na polskim rynku pozycj臋, poSwi臋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





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
jQuery 1.3. Wprowadzenie
W ten spos贸b nasz kod zosta by wykonany po ca kowitym za adowaniu strony.
To rozwi zanie ma jednak swoje wady. Zmodyfikowali my sam kod HTML, by wywo a zmian
zachowania. Tak cis e powi zanie struktury i funkcji za mieca kod, wymagaj c nieraz powtarza-
nia wywo a tej samej funkcji na wielu r贸 nych stronach lub  w przypadku zdarze takich
jak klikni cie mysz  przy ka dym pojawieniu si elementu na stronie. Dodanie nowych dzia a
wymaga wtedy wprowadzania zmian w wielu miejscach, co zwi ksza szans na pope nienie b du
i komplikuje r贸wnoleg prac nad wieloma dokumentami projektantom i programistom.
By unikn tych problem贸w, jQuery pozwala zaplanowa wywo anie funkcji na czas po za a-
dowaniu DOM  bez czekania na obrazki  dzi ki konstrukcji $(document).ready(). Z funkcj
zdefiniowan jak powy ej mo emy zapisa :
$(document).ready(highlightPoemStanzas);
Technika ta nie wymaga wprowadzania jakichkolwiek modyfikacji do kodu HTML. Zamiast
tego dzia anie jest do czane w ca o ci za pomoc pliku JavaScriptu. W rozdziale 3. dowiemy
si , jak mo na odpowiada na inne typy zdarze , rozdzielaj c ich efekty od struktury doku-
mentu HTML.
To wcielenie kodu jest jeszcze troch nieoptymalne, poniewa funkcja highlightPoemStanzas()
definiowana jest tylko po to, by skorzysta z niej natychmiast  i to tylko raz. Oznacza to, e
wykorzystali my identyfikator w globalnej przestrzeni nazw funkcji, zyskuj c niewiele, a teraz
musimy pami ta , by z niego ju wi cej nie korzysta . JavaScript, podobnie jak inne j zyki
programowania, zawiera spos贸b obej cia tego braku optymalno ci zwany funkcjami anoni-
mowymi (czasami nazywany r贸wnie funkcjami lambda). Za pomoc funkcji anonimowych
mo emy pisa kod w spos贸b, kt贸ry zosta zaprezentowany na pocz tku:
$(document).ready(function() {
$('.poem-stanza').addClass('highlight');
});
Wykorzystuj c s owo kluczowe function bez nazwy funkcji, definiujemy funkcj dok adnie tam,
gdzie jest potrzebna, a nie wcze niej. Usuwa to niepotrzebne rozbudowanie kodu i pozwala
zredukowa go do trzech wierszy JavaScriptu. Skr贸t ten jest szczeg贸lnie wygodny w przy-
padku kodu jQuery, gdy wiele metod przyjmuje jako argument funkcj , a funkcje takie rzad-
ko mo na wykorzysta ponownie.
Kiedy sk adni t wykorzystujemy do zdefiniowania funkcji anonimowej wewn trz cia a innej
funkcji, mo na utworzy domkni cie (ang. closure). Jest to bardziej zaawansowana koncepcja
o szerokich mo liwo ciach, jednak powinno si j dobrze zrozumie , gdy intensywnie wykorzy-
stuje si definicje zagnie d onych funkcji, gdy mo e ona mie niezamierzone konsekwencje
i implikacje w zakresie wykorzystania pami ci. Kwesti t omawiamy w ca o ci w dodatku C.
32
Rozdzia 1. " Pocz tki
Gotowy produkt
Kiedy nasz kod w JavaScripcie jest gotowy, strona wygl da tak:
Rysunek 1.2.
Zwrotki wierszy napisane s teraz kursyw i umieszczone s w ramce, zgodnie z arkuszem
styl贸w alice.css, z powodu wstawienia klasy highlight za pomoc kodu w JavaScripcie.
Podsumowanie
Wiemy ju , dlaczego programista m贸g by wybra korzystanie z biblioteki JavaScriptu, zamiast pisa
ca y kod od podstaw  nawet w przypadku najprostszych zada . Widzieli my tak e, co sprawia,
e jQuery sprawdza si jako doskona a biblioteka, kt贸rej zastosowanie mo e by lepszym rozwi -
zaniem od innych opcji. Wiemy tak e mniej wi cej, jakiego typu zadania jQuery mo e upro ci .
W niniejszym rozdziale nauczyli my si , jak udost pni jQuery kodowi w JavaScripcie na na-
szej stronie internetowej, jak wykorzysta funkcj fabryczn $() do zlokalizowania cz ci
strony z przypisan okre lon klas , jak wywo ywa metod .addClass() w celu nadania tej
cz ci strony dodatkowego stylu, a tak e jak wywo a $(document).ready(), co spowoduje, e
kod ten zostanie wywo any po za adowaniu strony.
Prosty przyk ad, kt贸rym si pos u yli my, demonstruje spos贸b dzia ania jQuery, jednak nie jest
szczeg贸lnie przydatny w praktyce. W kolejnym rozdziale rozbudujemy ten kod, zapoznaj c si
z wyszukanym j zykiem selektor贸w jQuery i znajduj c praktyczne zastosowania dla tej techniki.
33


Wyszukiwarka

Podobne podstrony:
informatyka jquery 1 3 wprowadzenie jonathan chaffer ebook
WYK艁AD 1 Wprowadzenie do biotechnologii farmaceutycznej
wprowadz w11
Medycyna manualna Wprowadzenie do teorii, rozpoznawanie i leczenie
00 Spis tre艣ci, Wst臋p, Wprowadzenie
wprowadzenie
czwiczenie 2 wprowadzenie
62 FOR ostrzega Wprowadzenie klauzuli przeciwko unikaniu opodatkowania mo偶e by膰 niezgodne z Konstytu
01 Wprowadzenie do programowania w jezyku C
wprowadzenie do buddyzmu z islamskiego punktu widzenia

wi臋cej podobnych podstron