jQuery. Leksykon
Id do
kieszonkowy
" Spis tre ci
" Przykładowy rozdział
Autor: David Flanagan
" Skorowidz Tłumaczenie: Rafał Downarowicz
ISBN: 978-83-246-3364-7
Tytuł oryginału: jQuery Pocket Reference
Katalog ksi ek
Format: 115×170, stron: 160
" Katalog online
" Zamów drukowany
Tchnij życie w Twoje strony internetowe!
katalog
" Jak wycisnąć z JavaScriptu jeszcze więcej?
" Jak operować na polach formularza?
Twój koszyk
" Jak łatwiej wykorzystać możliwości technologii AJAX?
Historia języka JavaScript pełna jest zakrętów  okresów popularności oraz odrzucenia.
" Dodaj do koszyka
W momentach zachwytu język ten był wręcz nadużywany, a gdy przychodziły gorsze dni,
był przez użytkowników masowo blokowany. Jego prawdziwy potencjał został natomiast
wykorzystany w technologii AJAX. Od tego dnia jego popularność nie maleje. Powstają liczne
Cennik i informacje
rozwiązania oparte o JavaScript. Wśród nich znajduje się  ostatnio najmodniejsza  biblioteka
jQuery. Jej możliwości naprawdę robią wrażenie!
" Zamów informacje
Biblioteka jQuery pozwala przy użyciu zwięzłej składni wyprawiać w przeglądarce niestworzone
o nowo ciach
rzeczy! Zjawiskowe pokazy slajdów, okna dialogowe, efekty specjalne to tylko niektóre z atrakcji
" Zamów cennik
wizualnych dostarczanych przez jQuery. Narzędzie to pozwala na banalnie prostą manipulację
wszystkimi elementami drzewa DOM, ich atrybutami oraz własnościami.
Czytelnia
Dzięki tej książce zawsze będziesz miał pod ręką ściągę pozwalającą Ci błyskawicznie wykorzystać
każdą funkcjonalność jQuery. Dowiesz się, jak rejestrować i obsługiwać zdarzenia, pobierać elementy,
rozszerzać funkcjonalność za pomocą wtyczek oraz usprawnić korzystanie z technologii AJAX.
" Fragmenty ksi ek
Biblioteka jQuery to potężne narzędzie, dzięki któremu tchniesz życie w Twoje strony internetowe!
online
" Pobieranie elementów
" Określanie klas CSS
" Operowanie na wartościach formularzy
" Manipulowanie strukturÄ… dokumentu
" Obsługa i generowanie zdarzeń
" Efekty animacji
" Obsługa technologii AJAX
" Metody wybierania
" Mechanizm wtyczek  rozszerzanie możliwości jQuery
Wykorzystaj potencjał języka JavaScript!
Kontakt
Helion SA
ul. Ko ciuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
© Helion 1991 2011
Spis tre ci
Wst p ............................................................................................7
1. Wprowadzenie do jQuery ............................................................9
Podstawy jQuery 11
Funkcja jQuery() 12
Zapytania i ich wyniki 17
2. Pobieranie i ustawianie elementów ..........................................23
Pobieranie i ustawianie atrybutów HTML 24
Pobieranie i ustawianie atrybutów CSS 24
Pobieranie i ustawianie klas CSS 25
Pobieranie i ustawianie warto ci dla formularzy HTML 27
Pobieranie i ustawianie zawarto ci elementów 28
Pobieranie i ustawianie geometrii elementów 28
Pobieranie i ustawianie danych elementów 31
3. Zmienianie struktury dokumentu ..............................................35
Wstawianie i zast powanie elementów 35
Kopiowanie elementów 38
Opakowywanie elementów 39
Usuwanie elementów 39
3
 4. Zdarzenia .................................................................................... 41
Prosta rejestracja uchwytów zdarze 41
Uchwyty zdarze biblioteki jQuery 44
Obiekt Event biblioteki jQuery 45
Zaawansowana rejestracja uchwytów zdarze 48
Cofanie rejestracji uchwytów zdarze 50
Generowanie zdarze 52
Zdarzenia definiowane przez u ytkownika 55
Zdarzenia live 55
5. Efekty animacji ...........................................................................59
Proste efekty 62
Animacje definiowane przez u ytkownika 63
Anulowanie, opó nianie i kolejkowanie elementów 68
6. Ajax .............................................................................................73
Metoda load() 73
Funkcje narz dziowe Ajax 76
Funkcja jQuery.ajax() 82
Zdarzenia Ajax 91
7. Funkcje narz dziowe ..................................................................93
8. Selektory i metody wybierania ..................................................99
Selektory jQuery 99
Metody wybierania 105
9. Zwi kszanie mo liwo ci jQuery za pomoc wtyczek ..............113
10. Biblioteka jQuery UI ..................................................................119
4 Spis tre ci
 11. Krótki leksykon funkcji i metod jQuery ................................... 123
Funkcja fabrykuj ca 123
Gramatyka selektora 124
Podstawowe metody i w a ciwo ci 126
Metody wyboru 128
Metody elementów 131
Metody s u ce do wstawiania i usuwania elementów 135
Metody zdarze 138
Metody s u ce do tworzenia efektów i animacji 141
Funkcje Ajax 144
Funkcje narz dziowe 148
Skorowidz ................................................................................. 153
Spis tre ci 5
Rozdzia 2.
Pobieranie i ustawianie elementów
Do najprostszych operacji na obiektach biblioteki jQuery nale y
pobieranie i ustawianie warto ci atrybutów HTML, stylów CSS,
zawarto ci oraz geometrii elementów. Powalaj ce na to metody
maj kilka cech charakterystycznych:
Jeden typ metody pe ni rol zarówno procedury pobieraj cej
(funkcja get), jak i ustawiaj cej (funkcja set). Je eli prze-
ka esz do metody now warto , zostanie ona ustawiona,
a je eli nie  zwrócona zostanie aktualna.
Funkcja set ustawia warto ci dla ka dego elementu w obiek-
cie jQuery i zwraca ten obiekt, umo liwiaj c utworzenie a -
cucha metod.
Funkcja get wysy a zapytanie dotycz ce tylko pierwszego
elementu (je eli chcesz je rozszerzy na wszystkie elementy,
u yj metody map()) i zwraca pojedyncz warto . Poniewa
funkcja get nie zwraca obiektu, na którym zosta a wywo ana,
mo e pojawi si wy cznie na ko cu a cucha metod.
W przypadku funkcji set argumentem mo e by obiekt. De-
finiuje on zestaw w a ciwo ci, które maj zosta ustawione.
W przypadku funkcji set argumentem mo e by funkcja
pozwalaj ca na obliczenie warto ci, które zostan ustawione.
Warto this okre la obiekt, dla którego wykonywane s
obliczenia.
23
Pami taj o tych zastrze eniach, czytaj c dalsz cz rozdzia u.
W ka dej z jego sekcji zosta a wyja niona wa na kategoria metod
s u cych do pobierania i ustawiania elementów.
Pobieranie i ustawianie atrybutów HTML
Metoda attr() s u y do pobierania i ustawiania atrybutów HTML.
Radzi sobie z niekompatybilno ci przegl darek i wyj tkami.
Mo esz w niej stosowa nazwy atrybutów HTML lub ich ekwi-
walentów w j zyku JavaScript (na przyk ad for lub htmlFor czy
te class lub className). Funkcja removeAttr() s u y do usuwa-
nia atrybutu dla wszystkich wybranych elementów. Oto kilka
przyk adów:
// Wy lij zapytanie o atrybut action pierwszego formularza
$("form").attr("action");
// Ustaw atrybut src elementu z id  icon
$("#icon").attr("src", "icon.gif");
// Ustaw cztery atrybuty naraz
$("#banner").attr({src:"banner.gif",
alt:"Advertisement",
width:720, height:64});
// Niech wszystkie cza aduj si w nowych oknach
$("a").attr("target", "_blank");
// Wyznacz atrybut docelowy tak, aby lokalne cza
// za adowa y si w bie cym oknie, a cza spoza strony w nowym oknie
$("a").attr("target", function() {
if (this.host == location.host) return "_self"
else return "_blank";
});
// Mo na równie przekazywa funkcje w taki sposób
$("a").attr({target: function() {...}});
// Niech wszystkie cza za aduj si w tym oknie
$("a").removeAttr("target");
Pobieranie i ustawianie atrybutów CSS
Metoda css() ró ni si od metody attr() tym, e pozwala na
prac ze stylami CSS elementu. Po wys aniu zapytania o war-
to stylu zwracany jest aktualny (lub wyliczony) styl elementu:
zwrócona warto mo e pochodzi z atrybutu style lub z ar-
24 Rozdzia 2. Pobieranie i ustawianie elementów
kusza stylów. Zauwa , e zapytania o style z o one (np. font
czy margin) trzeba zast powa zapytaniami o indywidualne (np.
font-weight, font-family, margin-top czy margin-left). Pod-
czas ustawiania stylu metoda po prostu doda go do atrybutu
style elementu. Mo esz stosowa nazwy stylów CSS z my lni-
kami (background-color) lub nazwy stylów o notacji camel case
j zyka JavaScript (backgroundColor). W przypadku pobierania
warto ci stylu metoda css() zwraca warto ci numeryczne pod po-
staci a cucha znaków z cz onem okre laj cym jednostki, za
w przypadku ustawiania tych warto ci metoda css() konwertuje
liczby na a cuchy znaków i w razie potrzeby dodaje cz on px
(piksele):
$("h1").css("font-weight"); // Pobierz styl font-weight dla pierwszego
// znacznika

$("h1").css("fontWeight"); // Camel case równie dzia a
$("h1").css("font"); // B D: zapytanie o styl z o ony nie jest mo liwe
$("h1").css("font-variant", // Ustaw styl wszystkich znaczników

"smallcaps");
$("div.note").css("border", // Mo na ustawi styl z o ony
"solid black 2px");
// Ustaw wiele stylów naraz
$("h1").css({ backgroundColor: "black",
textColor: "white",
fontVariant: "small-caps",
padding: "10px 2px 4px 20px",
border: "dotted black 4px" });
// Zwi ksz rozmiar czcionki dla znaczników

o 25%
$("h1").css("font-size", function(i,curval) {
return Math.round(1.25*parseInt(curval));
});
Pobieranie i ustawianie klas CSS
Przypomnijmy, e warto atrybutu class (w a ciwo ci className
w JavaScript) interpretuje si jako oddzielon odst pami list
nazw klasy CSS. Poniewa cz ciej operuje si na poszczególnych
jej elementach ni zast puje jedn list drug , w bibliotece jQuery
s zdefiniowane wygodne metody s u ce do pracy z atrybutem
class.
Pobieranie i ustawianie klas CSS 25
Metoda addClass() dodaje, a removeClass() usuwa klasy z wy-
branych elementów; toggleClass() dodaje klasy do nieposia-
daj cych ich jeszcze, a usuwa z posiadaj cych je ju elementów,
natomiast hasClass() sprawdza, czy element posiada okre lon
klas . Oto kilka przyk adów:
// Dodaj klas CSS do wszystkich znaczników

$("h1").addClass("hilite");
// Dodaj dwie klasy do znaczników

po

$("h1,p").addClass("hilite firstpara");
// Przeka funkcj , aby doda wyliczon klas do ka dego elementu.
$("section").addClass(function(n) {
return "section" + n;
});
// Usu klas z wszystkich znaczników

$("p").removeClass("hilite");
// Mo na stosowa wiele klas
$("p").removeClass("hilite firstpara");
// Usu wyliczone klasy ze znaczników
$("section").removeClass(function(n) {
return "section" + n;
});
// Usu wszystkie klasy ze wszystkich znaczników

$("div").removeClass();
// Ustaw klas CSS: dodaj klas , je eli
// jej nie ma, lub usu , je eli jest
$("tr:odd").toggleClass("oddrow");
// Ustaw dwie klasy naraz
$("h1").toggleClass("big bold");
// Ustaw wyliczanie klasy lub klas
$("h1").toggleClass(function(n) {
return "big bold h1-" + n;
});
$("h1").toggleClass("hilite", true); // Jak addClass
$("h1").toggleClass("hilite", false); // Jak removeClass
// Test na obecno klasy CSS: czy który znacznik

posiada t klas ?
$("p").hasClass("firstpara")
// To samo wykonuje ten
$("#lead").is(".firstpara")
// Metoda is() jest bardziej elastyczna ni hasClass()
$("#lead").is(".firstpara.hilite")
26 Rozdzia 2. Pobieranie i ustawianie elementów
Metoda hasClass() zwraca warto true, je eli który z wy-
branych elementów posiada okre lon klas CSS, a warto false
 je eli nie. Zauwa , e jest ona mniej elastyczna ni klasy
addClass(), removeClass() i toggleClass() oraz klasa is()
(zobacz  Zapytania i ich wyniki na stronie 17), któr mo na sto-
sowa w podobnym celu.
Te metody jQuery ró ni si od w a ciwo ci classList HTML5
tym, e dzia aj we wszystkich przegl darkach i e umo liwiaj
prac na wielu elementach i tworzenie a cucha metod.
Pobieranie i ustawianie warto ci
dla formularzy HTML
Metoda val() s u y do pobierania i ustawiania warto ci atrybutu
value dla elementów formularzy HTML, a tak e wykonywania
podobnych operacji w odniesieniu do zaznacze pól wyboru,
przycisków opcji i elementów :
// Pobierz warto z pola tekstowego surname
$("#surname").val()
// Pobierz pojedyncz warto ze znacznika
$("#usstate").val()
// Pobierz tablic warto ci ze znacznika
$("select#extras").val()
// Pobierz warto val zaznaczonego przycisku radio
$("input:radio[name=ship]:checked").val()
// Ustaw warto pola tekstowego
$("#email").val("B dny adres email")
// Zaznacz wszystkie pola wyboru z tymi nazwami czy warto ciami
$("input:checkbox").val(["opt1", "opt2"])
// Przywró warto pocz tkow wszystkim polom tekstowym
$("input:text").val(function() {
return this.defaultValue;
})
Pobieranie i ustawianie warto ci dla formularzy HTML 27
Pobieranie i ustawianie zawarto ci elementów
Metody text() i html() s u do pobierania i ustawiania
(hiper)tekstowej zawarto ci elementu. Metoda text() wywo ana
bez argumentu zwraca tekstow zawarto wszystkich w z ów
potomnych dla wszystkich wybranych elementów (nawet w prze-
gl darkach nieobs uguj cych w a ciwo ci textContent czy inner
Text).
Metoda html() w podobnym przypadku zwraca zawarto hi-
pertekstow tylko pierwszego z wybranych elementów. jQuery ko-
rzysta w tym celu z w a ciwo ci innerHTML: funkcja x.html()
daje ten sam efekt co x[0].innerHTML.
Po przekazaniu a cucha znaków do text() lub html() zast pi on
wszelk (hiper)tekstow zawarto elementu. Mo esz te prze-
kaza funkcj , która utworzy ten a cuch za Ciebie:
var t = $("head title").text(); // Pobierz tytu dokumentu
var hdr = $("h1").html() // Pobierz hipertekst dla pierwszego
// znacznika

// Nadaj ka demu nag ówkowi numer sekcji
$("h1").text(function(n, current) {
return "ż" + (n+1) + ": " + current
});
Pobieranie i ustawianie geometrii elementów
Czasem trudno ci mo e sprawi w a ciwe okre lenie rozmiaru
i po o enia elementu zw aszcza w przegl darkach nieobs ugu-
j cych getBoundingClientRect(). Metody jQuery pozwalaj roz-
wi za ten problem. Zauwa , e wszystkie opisane tu metody mo-
g by stosowane do ustawiania warto ci, a tylko niektóre do
ich pobierania.
Metoda offset() s u y do pobierania po o enia elementu i usta-
wiania jego wspó rz dnych. Najpierw oblicza wzgl dne po o e-
nie elementu w dokumencie, a nast pnie zwraca je pod postaci
28 Rozdzia 2. Pobieranie i ustawianie elementów
obiektu o w a ciwo ciach left i top, przechowuj cego wspó -
rz dne X i Y. Przekazuj c obiekt zawieraj cy w a ciwo ci left
i top do tej metody, mo esz ustawi po o enie obiektu poprzez
ustawienie atrybutu CSS:
var elt = $("#sprite"); // Element, który ma zosta przemieszczony
var pos = elt.offset(); // Pobierz jego aktualne po o enie
pos.top += 100; // Zmie wspó rz dn
elt.offset(pos); // Ustaw nowe po o enie
// Przemie wszystkie znaczniki

w prawo na odleg o
// zale n od ich po o enia w dokumencie
$("h1").offset(function(index,curpos) {
return {
left: curpos.left + 25*index,
top: curpos.top
};
});
Metoda position() ró ni si od metody offset() tym, e s u-
y tylko do pobierania i e zwraca po o enie elementów wzgl -
dem ich rodziców (okre lonych dla ka dego elementu w drzewie
DOM za po rednictwem w a ciwo ci offsetParent). Umiejsco-
wione elementy pe ni zawsze rol rodziców wzgl dem swoich
potomków. Chocia w niektórych przegl darkach funkcj t
mog pe ni inne elementy, takie jak komórki tabeli, jQuery nie
uznaje ich za rodziców. Metoda offsetParent() dokonuje ma-
powania ka dego elementu obiektu na najbli szy umiejscowio-
ny element potomny lub na element . Zwró uwag na
niefortunne nazewnictwo dla tych metod: metoda offset() zwra-
ca absolutne po o enie obiektu, a metoda position() zwraca
offset elementu w stosunku do jego offsetParent().
Istniej trzy funkcje get s u ce do pobierania szeroko ci elementu
i trzy do pobierania jego wysoko ci. Metoda width zwraca pod-
stawow szeroko , a metoda height podstawow wysoko
bez odst pu wewn trznego (padding), ramek czy marginesów.
Natomiast metody innerWidth(), innerHeight(), outerWidth()
i outerHeight() zwracaj sum podstawowej szeroko ci (wysoko-
ci) i szeroko ci (wysoko ci) odst pu wewn trznego elementu,
Pobieranie i ustawianie geometrii elementów 29
a dwie ostatnie sumuj poprzednie warto ci z wymiarami ram-
ki. Dodaj c do którejkolwiek z tych metod warto true, mo na
dzi ki nim zmienia tak e rozmiar marginesów. Oto przyk a-
dowe zastosowanie tych metod:
var body = $("body");
// Cztery ró ne szeroko ci zale nie od zawartych danych
var contentWidth = body.width();
var paddingWidth = body.innerWidth();
var borderWidth = body.outerWidth();
var marginWidth = body.outerWidth(true);
// Sumy l i r odst pu wewn trznego, ramek i marginesów
var padding = paddingWidth-contentWidth;
var borders = borderWidth-paddingWidth;
var margins = marginWidth-borderWidth;
Metody width() i height() posiadaj cechy, których nie maj
inne metody omawiane w tej sekcji. Po pierwsze je eli pierw-
szym elementem obiektu jQuery jest obiekt Window czy Document,
zostanie zwrócony rozmiar okna roboczego lub pe ny rozmiar
dokumentu. Inne metody nie pozwalaj na prac na oknach ani
na dokumentach.
Poza tym metody width() i height() s u zarówno do pobie-
rania, jak i ustawiania warto ci elementów. Je eli przeka esz do
jednej z nich warto , zostanie ona ustawiona dla ka dego ele-
mentu w obiekcie jQuery. (Nie mo na w ten sposób ustawi
szeroko ci ani wysoko ci obiektów Window i Document). Je eli
przeka esz liczb , zostanie zinterpretowana jako wymiar wyra-
ony w liczbie pikseli, a je li przeka esz a cuch znaków, zo-
stanie wykorzystany jako warto atrybutu CSS width lub height,
która b dzie mog a pe ni rol dowolnej jednostki CSS. Mo na
tak e, jak dla ka dej funkcji set, przekaza im funkcj , która
b dzie wywo ywana w celu obliczania szeroko ci i wysoko ci.
Funkcja get metod width() i height() zwraca wymiary bez
odst pu wewn trznego (padding), ramek i marginesów, za ich
funkcja set ustawia atrybuty width i height w CSS. Domy lnie
metody te ustawiaj równie wymiary kontenera zawieraj cego
30 Rozdzia 2. Pobieranie i ustawianie elementów
obiekt. Jednak je eli atrybut CSS box-sizing elementu ma warto
border-sizing, metody width() i height() uwzgl dni przy
podawaniu wymiarów odst p wewn trzny i ramk . Mimo e
dla elementu e, który u ywa modelu content-box wywo anie
$(e).width(x).width() spowoduje zwrócenie warto ci x, nie
jest to zjawisko powszechne dla wszystkich elementów korzy-
staj cych z tego modelu.
Ostatni par metod s u cych do okre lania geometrii jest para
scrollTop() i scrollLeft(), która s u y do pobrania po o e-
nia paska przesuwania dla wszystkich elementów. Metody te
mo na wykorzystywa zarówno przy pracy z obiektem Window,
jak i z elementami dokumentu oraz obiektem Document. W tym
ostatnim przypadku mo na ustawi lub pobra po o enie pasków
przesuwania dla okna, w którym znajduje si dany dokument.
Korzystaj c z metody scrollTop() w po czeniu z metod
height(), mo esz zdefiniowa metod s u c do przewijania
okna w gór lub w dó o wybran przez Ciebie liczb stron:
// Przewi okno o n stron
// n mo e mie posta u amka lub liczby ujemnej
function page(n) {
// Opakuj okno w obiekcie jQuery
var w = $(window);
// Pobierz rozmiar strony
var pagesize = w.height();
// Pobierz aktualne po o enie
var current = w.scrollTop();
// Przewi o n stron w dó
w.scrollTop(current + n*pagesize);
}
Pobieranie i ustawianie danych elementów
Metoda data() (z funkcj get i set) pobiera i ustawia dane
zwi zane z ka dym elementem dokumentu lub z obiektem
Document czy Window. Dzi ki wywo ywaniu mechanizmów kolej-
kowania pozwala na rejestracj procedury obs ugi zdarze .
Pobieranie i ustawianie danych elementów 31
Aby powi za dane z elementami w obiekcie jQuery, wywo aj
metod data() jako metod set, przekazuj c jako argumenty
nazw i warto . Mo esz równie przekaza pojedynczy obiekt do
metody data(). Ka da w a ciwo tego obiektu zostanie wów-
czas zinterpretowana jako para nazwa-warto , któr mo na
b dzie powi za z elementem lub elementami jQuery. Pami taj
jednak, e po przekazaniu obiektu do metody data() w a ciwo ci
obiektu zast pi wszystkie dane wcze niej powi zane z tym
elementem. Metoda data() nie wywo uje przekazywanych
funkcji, lecz je przechowuje tak jak ka d inn warto .
Metoda data() mo e by równie wykorzystana jako funkcja
get. Kiedy wywo asz j bez argumentów, zwróci obiekt zawie-
raj cy wszystkie pary nazwa-warto powi zane z pierwszym
elementem w obiekcie jQuery. Natomiast gdy zrobisz to samo
z jednym argumentem o postaci a cucha znaków, zwróci po-
wi zan z nim warto dla pierwszego elementu.
Metoda removeData() s u y do usuwania danych z elementu.
(Ustawienie przy u yciu metody data() danej warto ci na null
lub undefined nie jest równoznaczne z usuni ciem tej warto ci).
Przekazanie a cucha znaków do metody removeData() spo-
woduje usuni cie wszystkich warto ci powi zanych z tym a -
cuchem dla tego elementu, a wywo anie tej metody bez argumen-
tów da w wyniku usuni cie wszystkich danych powi zanych
z tym elementem.
$("div").data("x", 1); // Ustaw dane
$("div.nodata").removeData("x"); // Usu dane
var x = $('#mydiv').data("x"); // Pobierz dane
W bibliotece jQuery metody data() oraz removeData() mog
przyj form funkcji. Mo esz na przyk ad powi za dane z poje-
dynczym elementem e, stosuj c metod data() pod postaci funk-
cji lub metody:
$(e).data(...) // Forma metody
$.data(e, ...) // Forma funkcji
32 Rozdzia 2. Pobieranie i ustawianie elementów
W jQuery dane nie s przechowywane jako w a ciwo ci elemen-
tów. Zamiast tego do ka dego elementu, z którym powi zane
s dane, dodawana jest specjalna w a ciwo . Poniewa w niektó-
rych przegl darkach nie mo na dodawa w a ciwo ci do elemen-
tów ,