Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00079 003965 12916413 na godz. na dobę w sumie
jQuery. Leksykon kieszonkowy - książka
jQuery. Leksykon kieszonkowy - książka
Autor: Liczba stron: 160
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3364-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Tchnij życie w Twoje strony internetowe!

Historia języka JavaScript pełna jest zakrętów - okresów popularności oraz odrzucenia. 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 rozwiązania oparte o JavaScript. Wśród nich znajduje się - ostatnio najmodniejsza - biblioteka jQuery. Jej możliwości naprawdę robią wrażenie!

Biblioteka jQuery pozwala przy użyciu zwięzłej składni wyprawiać w przeglądarce niestworzone rzeczy! Zjawiskowe pokazy slajdów, okna dialogowe, efekty specjalne to tylko niektóre z atrakcji wizualnych dostarczanych przez jQuery. Narzędzie to pozwala na banalnie prostą manipulację wszystkimi elementami drzewa DOM, ich atrybutami oraz własnościami.

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. Biblioteka jQuery to potężne narzędzie, dzięki któremu tchniesz życie w Twoje strony internetowe!

Wykorzystaj potencjał języka JavaScript!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

jQuery. Leksykon kieszonkowy Autor: David Flanagan Tłumaczenie: Rafał Downarowicz ISBN: 978-83-246-3364-7 Tytuł oryginału: jQuery Pocket Reference Format: 115×170, stron: 160 Tchnij życie w Twoje strony internetowe! • Jak wycisnąć z JavaScriptu jeszcze więcej? • Jak operować na polach formularza? • Jak łatwiej wykorzystać możliwości technologii AJAX? Historia języka JavaScript pełna jest zakrętów – okresów popularności oraz odrzucenia. 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 rozwiązania oparte o JavaScript. Wśród nich znajduje się – ostatnio najmodniejsza – biblioteka jQuery. Jej możliwości naprawdę robią wrażenie! Biblioteka jQuery pozwala przy użyciu zwięzłej składni wyprawiać w przeglądarce niestworzone rzeczy! Zjawiskowe pokazy slajdów, okna dialogowe, efekty specjalne to tylko niektóre z atrakcji wizualnych dostarczanych przez jQuery. Narzędzie to pozwala na banalnie prostą manipulację wszystkimi elementami drzewa DOM, ich atrybutami oraz własnościami. 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. Biblioteka jQuery to potężne narzędzie, dzięki któremu tchniesz życie w Twoje strony internetowe! • 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! Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online 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 11 12 17 Podstawy jQuery Funkcja jQuery() Zapytania i ich wyniki 2. Pobieranie i ustawianie elementów ..........................................23 24 24 25 27 28 28 31 Pobieranie i ustawianie atrybutów HTML Pobieranie i ustawianie atrybutów CSS Pobieranie i ustawianie klas CSS Pobieranie i ustawianie wartoĈci dla formularzy HTML Pobieranie i ustawianie zawartoĈci elementów Pobieranie i ustawianie geometrii elementów Pobieranie i ustawianie danych elementów 3. Zmienianie struktury dokumentu ..............................................35 35 38 39 39 Wstawianie i zastöpowanie elementów Kopiowanie elementów Opakowywanie elementów Usuwanie elementów 3 4. Zdarzenia ....................................................................................41 41 44 45 48 50 52 55 55 Prosta rejestracja uchwytów zdarzeþ Uchwyty zdarzeþ biblioteki jQuery Obiekt Event biblioteki jQuery Zaawansowana rejestracja uchwytów zdarzeþ Cofanie rejestracji uchwytów zdarzeþ Generowanie zdarzeþ Zdarzenia definiowane przez uĔytkownika Zdarzenia live 5. Efekty animacji ...........................................................................59 62 63 68 Proste efekty Animacje definiowane przez uĔytkownika Anulowanie, opóĒnianie i kolejkowanie elementów 6. Ajax .............................................................................................73 73 76 82 91 Metoda load() Funkcje narzödziowe Ajax Funkcja jQuery.ajax() Zdarzenia Ajax 7. Funkcje narzýdziowe ..................................................................93 8. Selektory i metody wybierania ..................................................99 99 105 Selektory jQuery Metody wybierania 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 123 124 126 128 131 135 138 141 144 148 Funkcja fabrykujñca Gramatyka selektora Podstawowe metody i wäaĈciwoĈci Metody wyboru Metody elementów Metody säuĔñce do wstawiania i usuwania elementów Metody zdarzeþ Metody säuĔñce do tworzenia efektów i animacji Funkcje Ajax Funkcje narzödziowe 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: x 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. x Funkcja set ustawia wartoĈci dla kaĔdego elementu w obiek- cie jQuery i zwraca ten obiekt, umoĔliwiajñc utworzenie äaþ- cucha metod. x 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. x W przypadku funkcji set argumentem moĔe byè obiekt. De- finiuje on zestaw wäaĈciwoĈci, które majñ zostaè ustawione. x 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 $( 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 h1 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 h1 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 $( h1 ).addClass( hilite ); // Dodaj dwie klasy do znaczników p po h1 $( 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 $( 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 $( 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 p 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 select : // Pobierz wartoĞü z pola tekstowego surname $( #surname ).val() // Pobierz pojedynczą wartoĞü ze znacznika select $( #usstate ).val() // Pobierz tablicĊ wartoĞci ze znacznika select multiple $( 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 h1 // 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 h1 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 body . 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 applet , object i embed , jQuery nie pozwala na powiñ- zanie danych z tymi elementami. Pobieranie i ustawianie danych elementów _ 33 ${}, Patrz jQuery:funkcja jQuery A Ajax, 146 funkcja ajax, 82 funkcje zwrotne, 86 opcje, 83 kody statusu, 75, 146 load(), metoda, 73 äadowanie danych, 73 pobieranie danych, 78, 80 pobieranie i wykonywanie kodu, 76 JavaScript, 76 JSON, 77 typy danych, 80, 146 zdarzenia, 91, 146 animacje, 143 anulowanie, 68 efekty, 62 pojawianie, 62 pokazywanie, 62 ukrywanie, 62 zanikanie, 62 zmiany nieliniowe, 67 zwijanie, 63 kolejkowanie, 68 obiekt opcji, 66 opóĒnianie, 68 Skorowidz wäasne, 63 wäaĈciwoĈci, 64 wprowadzenie, 59 wyäñczenie, 60 D DOM, 11, 29, 116 DOMContentLoaded, 15 E ECMAScript 5 (ES5), 19, 93 efekty animacji, Patrz animacje elementy kopiowanie, 38 opakowanie, 39 usuwanie, 39 wstawianie, 35 zastöpowanie, 35 F formularze, 27 funkcja fabrykujñca, 123 funkcje narzödziowe filtrowanie, 95 informacje o przeglñdarce, 93, 97 JSON, 96 153 funkcje narzödziowe metody, wäaĈciwoĈci kopiowanie wäaĈciwoĈci, 94 mapy, 96 obiekt, 95 proxy, 97 sprawdzanie zawartoĈci, 93 tablice, 95 usuwanie odstöpów, 98 wykonywanie JavaScript, 95 wyliczanie wäaĈciwoĈci obiektu, 94 I interfejs uĔytkownika, 119 J JavaScript, pobieranie kodu, 76 wykonywanie, 95 jQuery funkcja jQuery(), 12, 123 terminologia, 16 wprowadzenie, 9 zapytania, 17 jQuery UI, 119 klasy CSS, 25 K M manipulowanie strukturami dokumentu, Patrz elementy metody wyboru, 105, 128 154 _ Skorowidz Ajax jQuery.ajax(), 82, 146 jQuery.ajaxSetup(), 147 jQuery.get(), 80, 147 jQuery.getJSON(), 77, 147 jQuery.getScript(), 76, 147 jQuery.param(), 148 jQuery.parseJSON(), 148 jQuery.post(), 80, 148 load(), 73, 148 serialize(), 149 animacje animate(), 63, 143 clearQueue(), 71, 143 delay(), 69, 143 dequeue(), 70, 143 easing(), 67 fadeIn(), 60, 62, 144 fadeOut(), 62, 144 fadeTo(), 62, 144 hide(), 62, 144 jQuery.fx.off, 60, 143 jQuery.fx.speeds, 59 queue(), 70, 145 show(), 62, 144 slideDown(), 63, 144 slideToggle(), 63, 144 slideUp(), 63, 144 stop(), 68, 145 toggle(), 62, 145 contex, 19, 57, 126 each(), 19, 126 elementu addClass(), 26, 131 after(), 36, 136 append(), 36, 136 appendTo(), 137 attr(), 24, 132 before(), 36, 137 clone(), 38, 137 css(), 24, 132 data(), 31, 132 detach(), 40, 137 empty(), 39, 137 filter(), 40 hasClass(), 26, 133 height(), 30, 133 html(), 28, 137 innerHeight(), 29, 133 innerHTML, 28 innerWidth(), 29, 133 insertAfter(), 138 insertBefore(), 138 offset(), 28, 133 offsetParent(), 29, 134 outerHeight(), 29, 134 outerWidth(), 29, 134 position(), 29, 134 prepend(), 36, 138 prependTo(), 138, 139 remove(), 39, 138 removeAttr(), 134 removeClass(), 27, 134 removeData(), 32, 135 replaceAll(), 138 replaceWidth(), 139 replaceWith(), 35 scrollLeft(), 31, 135 scrollTop(), 31, 135 text(), 28, 139 toggleClass(), 26, 27, 135 unwrap(), 40, 139 val(), 27, 135 width(), 30, 136 wrap(), 39, 40, 139 wrapAll(), 39, 40, 139 wrapInner(), 39 funkcje narzödziowe jQuery.boxModel, 149 jQuery.browser, 93, 149 jQuery.contains(), 93, 149 jQuery.data(), 149 jQuery.dequeue(), 150 jQuery.each(), 94, 150 jQuery.error(), 150 jQuery.extend(), 94, 150 jQuery.globalEval(), 150 jQuery.grep(), 95, 151 jQuery.inArray(), 95, 151 jQuery.isArray(), 95, 151 jQuery.isEmptyObject(), 95, 151 jQuery.isFunction(), 95, 151 jQuery.isPlainObject(), 96, 151 jQuery.isXMLDoc(), 151 jQuery.makeArray(), 96, 151 jQuery.map(), 96, 151 jQuery.merge(), 96, 152 jQuery.noConflict(), 152 jQuery.parseJSON(), 96 jQuery.proxy(), 97, 152 jQuery.queue(), 152 jQuery.removeData(), 152 jQuery.support, 97, 152 jQuery.trim(), 98, 152 get(), 127 index, 127 is(), 127 length, 18, 127 map(), 20, 127 size(), 18, 127 toArray(), 127 wyboru add(), 107, 128 andSelf (), 128 Skorowidz _ 155 event-type(), 140 focus(), 54 hover(), 43, 141 live(), 57 mouseenter(), 43 mouseleave(), 43 one(), 50, 141 preventDefault(), 44 ready(), 141 resize(), 42 stopPropagation(), 44 submit(), 53 toggle(), 43, 142 trigger(), 44, 53, 142 triggerHandler(), 142 unbind(), 50, 142 undelegate(), 56, 142 unload(), 42 P pobieranie i ustawianie elementów, 23 CSS atrybuty, 24 klasy, 25 dane, 31 formularze, 27 geometria, 28 HTML, 24 zawartoĈè hipertekstowa, 28 R rozszerzenie moĔliwoĈci, Patrz wtyczki metody, wäaĈciwoĈci wyboru andSelf(), 112 children(), 109, 128 closest(), 128 contents(), 109, 128 end(), 111, 128 eq(), 105, 129 filter(), 129 find(), 129 first(), 105, 129 has(), 107, 129 last(), 129 next(), 129 nextAfter(), 110 nextAll(), 129 nextUntil(), 110, 130 not(), 107, 130 offsetParent(), 130 parent(), 110, 130 parents(), 110 parentsUntil(), 130 pBarents(), 130 prev(), 130 prevAll(), 130 prevUntil(), 131 pushStack(), 111, 131 siblings(), 109, 131 slice(), 131 zdarzenia addEventListener(), 41, 50 attachEvent(), 41 attr(), 43 bind(), 48, 140 click(), 41 delegate(), 56, 140 die(), 141 error(), 42 156 _ Skorowidz S selektory, 99, 124 filtry, 100, 125 grupy, 104 kombinacje, 104, 125 W wtyczki, 113 Z zapytania, 10, 17 zdarzenia, 140 Ajax, 91, 146 generowanie, 52 live, 55 rejestracja uchwytów, 48 uchwyty cofanie rejestracji, 50 rejestracja, 41 wäasne, 55 Skorowidz _ 157
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery. Leksykon kieszonkowy
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: