jQuery Leksykon kieszonkowy


jQuery. Leksykon
Idz 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
$("#usstate").val()
// Pobierz tablic warto ci ze znacznika
Podobne podstrony:
informatyka jquery leksykon kieszonkowy david flanagan ebook
Delphi Leksykon kieszonkowy?lplk
CSS Leksykon kieszonkowy csslk
informatyka excel 2007 pl leksykon kieszonkowy wydanie ii curt frye ebook
Rejestr Windows XP Leksykon kieszonkowy
3ds max Leksykon kieszonkowy
PHP4 Leksykon kieszonkowy php4lk
Linux Leksykon kieszonkowy linlk
JDBC Leksykon kieszonkowy

więcej podobnych podstron