Cena: 39,00 zł

5455

• Nie utrudniaj sobie życia — skorzystaj z biblioteki

jQuery!

• Abecadło, czyli jak korzystać z dobrodziejstw biblioteki

jQuery

• Interfejs API biblioteki

jQuery

, czyli gdzie szukać zaawansowanych rozwiązań

• Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości

Nie utrudniaj sobie życia

Nie utrudniaj sobie życia

—

— skorzystaj z biblioteki

skorzystaj z biblioteki jQuery

jQuery!

!

• Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jQuery
• Interfejs API biblioteki jQuery, czyli gdzie szukać zaawansowanych rozwiązań
• Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości

Biblioteka

Biblioteka jQuery,

jQuery, zarówno w wersji pełnej,

zarówno w wersji pełnej, jak i zminimalizowanej,

jak i zminimalizowanej,

pozwala programiście znacząco uprościć pracę i stopień skomplikowania kodu tworzonego w języku Java-
Script. Korzystając z jej możliwości, programista może zmieniać atrybuty, modyfikować wygląd poszcze-
gólnych elementów strony, dodawać lub usuwać elementy drzewa DOM. Może też wykonać zapytania Ajax,
stosować efekty specjalne, obsłużyć typowe i nietypowe zdarzenia, a także posłużyć się różnymi wtyczka-
mi, często znacząco rozszerzającymi funkcjonalność kodu.

Książka

Książka „

„jQuery.

jQuery.

Poradnik programisty”

Poradnik programisty”

to doskonałe kompendium wiedzy na temat tej

biblioteki. Dowiesz się z niej, jak rozpocząć pracę z jQuery, jak obchodzić się z selektorami i atrybutami,
manipulować modelem DOM czy przypisywać wybrany styl do określonych elementów strony. Nauczysz
się stosować funkcję jQuery, filtry i operacje na zbiorach elementów. Poznasz także rodzaje i sposób dzia-
łania wtyczek, sam zaczniesz je tworzyć, minimalizować i kompresować. Jeśli interesuje Cię programo-
wanie z wykorzystaniem możliwości oferowanych przez JavaScript, a nie chcesz spędzać wielu godzin na
bezpośrednim wpisywaniu skomplikowanego kodu, biblioteka jQuery jest właśnie dla Ciebie!

• Trzy warstwy dokumentu XHTML:

struktura, wygląd i zachowanie

• Zbiory węzłów, tworzenie i usuwanie

węzłów w drzewie DOM

• Korzystanie z biblioteki jQuery

• Efekty specjalne

• Selektory CSS i zdarzenia XHTML

• Funkcja jQuery() — w skrócie $()

• Modyfikacja wyglądu, odczyt

i modyfikacja treści elementów

• Odczyt i modyfikacja węzłów

drzewa DOM

• Odczyt i modyfikacja atrybutów

• Operacje przekształcające zbiór elementów

• Dodawanie i usuwanie węzłów drzewa

DOM, wędrówka po drzewie DOM

• Parametry wtyczek, ich tworzenie,

minimalizacja i kompresja

Wykorzystaj szanse,

Wykorzystaj szanse, jakie daje Ci biblioteka

jakie daje Ci biblioteka jQuery!

jQuery!

JQUEPP.indd 1

JQUEPP.indd 1

14-07-10 12:31:38

14-07-10 12:31:38

JQuery. Poradnik

programisty

Autor:

W³odzimierz Gajda

ISBN: 978-83-246-2518-5

Format: 158235, stron: 288

Nie utrudniaj sobie ¿ycia — skorzystaj z biblioteki jQuery!

• Abecad³o, czyli jak korzystaæ z dobrodziejstw biblioteki jQuery

• Interfejs API biblioteki jQuery, czyli gdzie szukaæ zaawansowanych rozwi¹zañ

• Wtyczki, czyli o co jeszcze warto rozszerzyæ dostêpne mo¿liwoœci

Biblioteka jQuery, zarówno w wersji pe³nej, jak i zminimalizowanej, pozwala programiœcie

znacz¹co uproœciæ pracê i stopieñ skomplikowania kodu tworzonego w jêzyku

JavaScript. Korzystaj¹c z jej mo¿liwoœci, programista mo¿e zmieniaæ atrybuty,

modyfikowaæ wygl¹d poszczególnych elementów strony, dodawaæ lub usuwaæ elementy

drzewa DOM. Mo¿e te¿ wykonaæ zapytania Ajax, stosowaæ efekty specjalne, obs³u¿yæ

typowe i nietypowe zdarzenia, a tak¿e pos³u¿yæ siê ró¿nymi wtyczkami, czêsto

znacz¹co rozszerzaj¹cymi funkcjonalnoœæ kodu.
Ksi¹¿ka „jQuery. Poradnik programisty” to doskona³e kompendium wiedzy na temat tej

biblioteki. Dowiesz siê st¹d, jak rozpocz¹æ pracê z jQuery, jak obchodziæ siê z selektorami

i atrybutami, manipulowaæ modelem DOM czy przypisywaæ wybrany styl do okreœlonych

elementów strony. Nauczysz siê stosowaæ funkcjê jQuery, filtry i operacje na zbiorach

elementów. Poznasz tak¿e rodzaje i sposób dzia³ania wtyczek, sam zaczniesz je tworzyæ,

minimalizowaæ i kompresowaæ. Jeœli interesuje Ciê programowanie z wykorzystaniem

mo¿liwoœci oferowanych przez JavaScript, a nie chcesz spêdzaæ wielu godzin na

bezpoœrednim wpisywaniu skomplikowanego kodu, biblioteka jQuery jest w³aœnie

dla Ciebie!

• Korzystanie z biblioteki jQuery

• Trzy warstwy dokumentu XHTML: struktura, wygl¹d i zachowanie

• Selektory CSS i zdarzenia XHTML

• Modyfikacja wygl¹du, odczyt i modyfikacja treœci elementów

• Odczyt i modyfikacja atrybutów

• Dodawanie i usuwanie wêz³ów drzewa DOM, wêdrówka po drzewie DOM

• Zbiory wêz³ów, tworzenie i usuwanie wêz³ów w drzewie DOM

• Efekty specjalne

• Funkcja jQuery() – w skrócie $()

• Odczyt i modyfikacja wêz³ów drzewa DOM

• Operacje przekszta³caj¹ce zbiór elementów

• Parametry wtyczek, ich tworzenie, minimalizacja i kompresja

Wykorzystaj szanse, jakie daje Ci biblioteka jQuery!

Spis treci

Cz I

Abecado ....................................................................... 5

Rozdzia 1. Korzystanie z biblioteki jQuery .......................................................... 7

Poprawno osadzania kodu JavaScript w dokumentach HTML i XHTML .................. 13

Rozdzia 2. Trzy warstwy dokumentu XHTML: struktura, wygld i zachowanie .... 15

Rozdzia 3. Selektory CSS i zdarzenia XHTML ................................................... 21

Rozdzia 4. Modyfikacja wygldu elementów .................................................... 29

Rozdzia 5. Odczyt i modyfikacja treci elementów ........................................... 39

Rozdzia 6. Odczyt i modyfikacja atrybutów ...................................................... 47

Rozdzia 7. Dodawanie i usuwanie wzów drzewa DOM .................................... 59

Rozdzia 8. Wdrówka po drzewie DOM ............................................................ 79

Rozdzia 9. Zbiory wzów ................................................................................ 95

Rozdzia 10. Ajax ............................................................................................. 109

Rozdzia 11. Efekty specjalne .......................................................................... 129

Rozdzia 12. Co powiniene zapamita z pierwszej czci? .............................. 139

Cz II Interfejs API biblioteki jQuery ..................................... 143

Rozdzia 13. Funkcja jQuery() — w skrócie $() ................................................. 145

Wywoanie $(funkcja) .................................................................................................. 145
Wywoanie $(kod XHTML) ......................................................................................... 146
Wywoanie $(selektor) ................................................................................................. 150
Wywoanie $(element DOM) ....................................................................................... 154
Wynik funkcji $ ............................................................................................................ 156
Tworzenie wzów tekstowych ..................................................................................... 159
Funkcje i metody statyczne .......................................................................................... 159

Rozdzia 14. Selektory ..................................................................................... 163

Zestawienie selektorów filtrujcych ............................................................................. 164
Uycie selektorów ........................................................................................................ 167
Wystpowanie selektorów ............................................................................................ 169

4

jQuery. Poradnik programisty

Rozdzia 15. Odczyt i modyfikacja wzów drzewa DOM .................................... 173

Rozszerzona skadnia metod dostpu do wzów ......................................................... 176
Pene zestawienie metod dostpu do wzów ............................................................... 178

Rozdzia 16. Tworzenie i usuwanie wzów w drzewie DOM ............................... 185

Klonowanie wzów ..................................................................................................... 189
Usuwanie wzów ......................................................................................................... 190
Wymiana wzów ......................................................................................................... 191
Zawijanie wzów ......................................................................................................... 194

Rozdzia 17. Operacje przeksztacajce zbiór elementów ................................... 197

Dodawanie wzów do zbioru ...................................................................................... 197
Operacja „cofnij” .......................................................................................................... 201
Filtrowanie .................................................................................................................... 203
Zliczanie elementów zbioru .......................................................................................... 204
Przodkowie, potomkowie i rodzestwo ........................................................................ 205
Przetwarzanie wzów tekstowych ............................................................................... 208

Rozdzia 18. Co powiniene zapamita z drugiej czci? .................................. 215

Cz III Wtyczki ..................................................................... 217

Rozdzia 19. Pierwsza wtyczka ......................................................................... 219

Wywoanie wtyczki ...................................................................................................... 221
czenie biblioteki jQuery z innymi bibliotekami JavaScript ...................................... 224
Definiowanie kilku wtyczek w jednym pliku .js ........................................................... 226

Rozdzia 20. Parametry wtyczek ....................................................................... 231

Badanie obecnoci parametru ....................................................................................... 232
Obiekty w roli parametrów ........................................................................................... 233
Badanie typu parametrów ............................................................................................. 235
Zmienna liczba parametrów funkcji ............................................................................. 238

Rozdzia 21. Tworzenie wtyczek ....................................................................... 241

Rozdzia 22. Minimalizacja i kompresja wtyczek ............................................... 265

Kompresja .................................................................................................................... 266

Rozdzia 23. Co powiniene zapamita z trzeciej czci? ................................. 271

Skorowidz .................................................................................... 273

Rozdzia 11.

Efekty specjalne

Biblioteka jQuery zawiera kilka metod sucych do wykonywania prostych animacji.
Nale do nich:

slideDown()

i

slideUp()

,

fadeIn()

i

fadeOut()

oraz

animate()

.

Metody

slideDown()

i

slideUp()

pozwalaj na pynne rozwijanie i zwijanie elementu.

Efekt graficzny polega na animacji elementu poprzez zwikszenie lub zmniejszenie jego
wysokoci. Jeli na ukrytym akapicie:

$('p#info').hide();

wywoamy metod

slideDown()

:

$('p#info').slideDown();

to akapit ten pojawi si na stronie w sposób animowany. Jego wysoko bdzie pynnie
zwikszana od 0 do odpowiedniej wartoci. Wywoanie metody

slideUp()

spowoduje

ponowne ukrycie akapitu:

$('p#info').slideUp();

Tym razem jego wysoko bdzie zmniejszana do 0. Domylnie animacja trwa 400 mili-
sekund, lecz moemy to zmieni, przekazujc do metod

slideDown()

oraz

slideUp()

parametr okrelajcy czas trwania animacji. Parametrem tym moe by liczba okrela-
jca, ile milisekund ma trwa animacja, np.:

$('p#info').slideUp(1200);
$('p#info').slideDown(2500);

bd jeden z napisów:

slow

lub

fast

. Napis

slow

ustala czas trwania animacji na 200 mili-

sekund, a

fast

— na 600. Drugim, równie opcjonalnym, parametrem funkcji

slideUp()

i

slideDown()

jest funkcja anonimowa, wywoywana po zakoczeniu animacji. Jeli

chcesz, by po zakoczeniu rozwijania akapitu kolor jego ta sta si czerwony, uyj kodu:

$('p#info').slideDown(2500, function(){
$('p#info').css('background', 'red');
});

130

Cz I

i Abecado

Zwró uwag, e rozwizanie niewykorzystujce funkcji anonimowej:

$('p#info').slideDown(2500);
$('p#info').css('background', 'red');

jest bdne. Wywoanie funkcji

slideDown()

nie powoduje wstrzymania wykonywania

skryptu. Metoda

css()

w powyszym kodzie bdzie wywoana natychmiast po urucho-

mieniu animacji, a nie po jej zakoczeniu.

Kolejne dwie funkcje dotyczce efektów, czyli

fadeIn()

oraz

fadeOut()

, powoduj

pokazanie i ukrycie elementu przez zwikszanie i zmniejszanie jego przezroczystoci.
Maj one identyczne parametry jak

slideDown()

i

slideUp()

. Po wywoaniu:

$('p#info').fadeIn();

akapit

p#info

pojawi si na stronie, za instrukcja:

$('p#info').fadeOut();

spowoduje ukrycie go. Tempo pojawiania si i znikania ustalamy, przekazujc liczb lub
napisy

slow

albo

fast

:

$('p#info').fadeIn(1500);
$('p#info').fadeIn('fast');
$('p#info').fadeIn('slow');

Funkcja automatyczna przekazana jako drugi parametr bdzie wywoana po zakocze-
niu efektu:

$('p#info').fadeIn(1000, function(){
//funkcja wywoywana po zakoczeniu animacji
});

Ostatnia z wymienionych na wstpie funkcji,

animate()

, pozwala na pynne modyfiko-

wanie dowolnej waciwoci CSS. Instrukcja:

$('p#info').animate({
font-size: '200%',
left: '200px',
borderWidth: '10px'
});

spowoduje pynn zmian rozmiaru czcionki do 200%. Jeli czcionka bya wiksza, to
bdzie zmniejszona, a jeli bya mniejsza — to bdzie zwikszona. Waciwo

left

bdzie pynnie dya do wartoci

200px

, za grubo obramowania — do

10px

. Pierw-

szym parametrem metody

animate()

jest tablica asocjacyjna waciwoci CSS, do

których animacja ma pynnie dy. Zwró uwag, e atrybuty pisane w kodzie CSS
z dywizem, np.

border-width

, s w jQuery zapisywane w notacji

borderWidth

. Dwa

opcjonalne parametry metody

animate()

ustalaj czas trwania animacji oraz pozwalaj

na wykonanie dowolnych akcji po jej zakoczeniu:

$('p#info').animate(
{
font-size: '200%',
left: '200px',
borderWidth: '10px'
},
5000,

Rozdzia 11.

i Efekty specjalne

131

function() {
//funkcja wywoywana po zakoczeniu animacji
}
);

wiczenie 11.1. ________________________________________________

Zmodyfikuj kod kontrolki

+/-

wykonanej w wiczeniu 8.1 w taki sposób, by pokazywanie

i ukrywanie treci odbywao si w sposób pynny — z wykorzystaniem metod

slide

´

Down()

oraz

slideUp()

. Kod XHTML kontrolki zawiera hipercze

a

, w którym

umieszczamy znak

+

bd

–

, oraz akapit

p

z treci. Akapit naley ukry lub pokaza.

Zarys kodu XHTML z wiczenia jest przedstawiony na listingu 11.1. Rozwizaniem
wiczenia jest skrypt jQuery przedstawiony na listingu 11.2.

Listing 11.1.

Zarys kodu XHTML kontrolki +/–

<div class="element">
<h3><a href="#">+</a>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<div class="clearing"></div>
</div>

Listing 11.2.

Rozwizanie wiczenia 11.1

$(function(){
$('.element p').hide();
$('.element a').click(function(){
if ($(this).html() == '+') {
$(this).html('-');
$(this).parent().next().slideDown();
} else {
$(this).html('+');
$(this).parent().next().slideUp();
}
});
});

W skrypcie jQuery postpujemy identycznie jak w wiczeniu 8.1. W odpowiedzi na
kliknicie hipercza

a

, w zalenoci od tego, czy zawiera ono znak,

+

czy

–

, rozwijamy

bd zwijamy akapit. Do akapitu docieramy od kliknitego hipercza (tj. od

$(this)

),

wywoujc metody

parent()

oraz

next()

. W celu pokazania akapitu wywoujemy —

zamiast metody

show()

— metod

slideDown()

:

$(this).parent().next().slideDown();

Natomiast ukrycie akapitu wymaga wywoania — zamiast metody

hide()

— metody

slideUp()

:

$(this).parent().next().slideUp();

132

Cz I

i Abecado

wiczenie 11.2. ________________________________________________

Dany jest plik menu.html oraz kilka plików, których nazwa rozpoczyna si od sowa
fragment, np. fragment-ulica-bramowa.html. W pliku menu.html znajduje si menu
gówne oraz element

div#tresc

. Zarys pliku menu.html jest przedstawiony na listingu 11.3.

Napisz skrypt, który zmodyfikuje dziaanie menu w taki sposób, by kliknicie opcji
menu powodowao przeadowanie elementu

div#tresc

. Do elementu tego naley zaa-

dowa zawarto pliku, którego nazwa jest zawarta w kliknitym hiperczu. Zadanie
rozwi w taki sposób, by przeadowanie byo pynne — z wykorzystaniem efektów

fadeIn()

oraz

fadeOut()

. Skrypt powinien dziaa w taki sposób, by podczas animacji

opcje menu byy nieczynne. Rozwizaniem zadania jest skrypt z listingu 11.4.

Listing 11.3.

Plik menu.html z wiczenia 11.2

<div id="pojemnik">
<ul id="menu">
<li><a href="fragment-ulica-bramowa.html">ulica bramowa</a></li>
<li><a href="fragment-plac-po-farze.html">plac po farze</a></li>
...
</ul>
<div id="tresc"></div>
</div>

Listing 11.4.

Rozwizanie wiczenia 11.2

<script type="text/javascript">
trwa = 0;
function wylacz_hiperlacza()
{
trwa = 1;
$('a').
css('text-decoration', 'none').
hover(
function(){
$(this).css('text-decoration', 'none');
},
function(){
$(this).css('text-decoration', 'none');
}
);
}

function wlacz_hiperlacza()
{
trwa = 0;
$('a').
css('text-decoration', 'none').
hover(
function(){
$(this).css('text-decoration', 'underline');
},
function(){
$(this).css('text-decoration', 'none');
}

Rozdzia 11.

i Efekty specjalne

133

);
}

$(function(){
wylacz_hiperlacza();
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});

$('a').click(function(){
if (trwa == 0) {
wylacz_hiperlacza();
var url = $(this).attr('href');
$('#tresc').fadeOut(2000, function(){
$('#tresc').load(url);
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});
});
}
return false;
});
});
</script>

W skrypcie z listingu 11.4 najpierw definiujemy zmienn

trwa

. Zmienna ta bdzie

flag, informujc o tym, e animacja jest w trakcie wykonywania. Jeli warto zmien-
nej

trwa

wynosi

1

, to animacja wanie jest wykonywana i hipercza nie powinny

dziaa. W przeciwnym razie, czyli gdy warto zmiennej

trwa

wynosi

0

, animacja nie

jest wykonywana i hipercza powinny dziaa.

Za wczanie i wyczanie dziaania hiperczy odpowiadaj funkcje

wlacz_hiperlacza()

oraz

wylacz_hiperlacza()

. Ustalaj one warto zmiennej

trwa

oraz modyfikuj style

CSS hiperczy. Wewntrz tych funkcji wybieramy wszystkie hipercza:

$('a').

ustalamy ich style CSS:

css('text-decoration', 'none').

i modyfikujemy efekt rollover:

hover(
function(){
$(this).css('text-decoration', 'none');
},
function(){
$(this).css('text-decoration', 'none');
}
);

134

Cz I

i Abecado

Metoda

hover()

przypisuje obsug dwóch zdarze:

onmouseenter

oraz

onmouseleave

1

.

Powysza instrukcja jest równowana dwóm instrukcjom:

mouseenter(function(){
$(this).css('text-decoration', 'none');
}).mouseleave(function(){
$(this).css('text-decoration', 'none');
});

Dziaanie skryptu z listingu 11.4 rozpoczynamy od wyczenia hiperczy, ukrycia
elementu

#tresc

, zaadowania do elementu

#tresc

pliku fragment-ulica-dominikanska.

html oraz animowanego wywietlenia elementu

#tresc

:

wylacz_hiperlacza();
$('#tresc').hide();
$('#tresc').load('fragment-ulica-dominikanska.html');
$('#tresc').fadeIn(2000, function(){
wlacz_hiperlacza();
});

Animacja bdzie trwaa 2 sekundy (tj. 2000 milisekund). Po zakoczeniu animacji hiper-
cza zostan wczone, za co odpowiada wywoanie funkcji

wlacz_hiperlacza()

.

Zasadnicz czci skryptu jest przypisanie obsugi zdarzenia

onclick

do hiperczy.

Hipercza bd dziaay wycznie wtedy, gdy warto zmiennej

trwa

wynosi 0:

$('a').click(function(){
if (trwa == 0) {
...
}
return false;
});

W ten sposób wyczamy dziaanie hiperczy w trakcie trwania animacji. Zdarzenie

onclick

bdzie generowane, jednak dziki powyszej instrukcji

if

nie spowoduje ono

wykonania adnych akcji.

Jeli animacja nie jest wykonywana, wówczas obsuga kliknicia przebiega nastpujco:
najpierw wyczamy dziaanie hiperczy:

wylacz_hiperlacza();

Nastpnie z atrybutu

href

kliknitego hipercza do zmiennej

url

pobieramy nazw pliku:

var url = $(this).attr('href');

1

Zdarzenia

mouseeneter

oraz

mouseleave

nie wystpuj w drzewie DOM. S one emulowane przez

bibliotek jQuery. Pierwotnie zdarzenia te pojawiy si w przegldarce Internet Explorer. Zdarzenia

mouseeneter

i

mouseleave

róni si od zdarze

mouseover

i

mouseout

tym, e s generowane dokadnie

jeden raz, dopóki kursor myszki nie opuci wybranego elementu. Podczas jednokrotnego wskazania
elementu wskanikiem myszki zdarzenia te zostan wygenerowane dokadnie jeden raz. Zdarzenia

mouseover

oraz

mouseout

mog by wygenerowane kilkukrotnie.

Rozdzia 11.

i Efekty specjalne

135

Teraz wyczamy widoczno elementu

#tresc

. Element ten stopniowo zniknie z ekranu:

$('#tresc').fadeOut(2000, function(){
//kod wykonywany, gdy element #tresc jest ju niewidoczny
});

Gdy element

#tresc

jest niewidoczny, adujemy do niego zawarto pliku, którego nazwa

znajduje si w zmiennej

url

:

$('#tresc').load(url);

po czym wczamy widoczno elementu

#tresc

:

$('#tresc').fadeIn(2000, function(){
//kod wykonywany, gdy element #tresc jest ju widoczny
});

Element ten pojawi si stopniowo na ekranie. Gdy element

#tresc

jest ju widoczny,

ponownie wczamy dziaanie hiperczy:

wlacz_hiperlacza();

wiczenie 11.3. ________________________________________________

Dokument index.html zawiera znacznik

img

, który umieszcza na stronie WWW zdj-

cie zawarte w pliku fotka.jpg. Poniej zdjcia znajduj si trzy hipercza. Jedno jako
etykiet ma strzak w lewo, drugie — napis reset, a trzecie — strzak w prawo. Zarys
kodu XHTML jest przedstawiony na listingu 11.5. Napisz skrypt jQuery, który zmody-
fikuje dziaanie hiperczy. Strzaka w lewo ma powodowa, e obraz pynnym ruchem
wyjedzie poza lew krawd nadrzdnego elementu

div

, strzaka w prawo ma powo-

dowa pynne wyjechanie zdjcia poza praw krawd elementu

div

, za napis reset

ma powodowa powrót zdjcia do rodka elementu

div

. Rozwizaniem zadania jest

skrypt przedstawiony na listingu 11.6.

Listing 11.5.

Plik index.html z wiczenia 11.3

<body>
<div id="element">
<img src="fotka.jpg" alt="" />
</div>
<div>
<a id="lewo" href="#">&lt;&lt;</a>
<a id="reset" href="#">reset</a>
<a id="prawo" href="#">&gt;&gt;</a>
</div>
</body>

136

Cz I

i Abecado

Listing 11.6.

Skrypt z wiczenia 11.3

$(document).ready(function(){

$("#lewo").click(function(){
$('#element img').animate({
'left' : "-100px"
});
return false;
});

$("#prawo").click(function(){
$('#element img').animate({
'left' : "200px"
});
return false;
});

$("#reset").click(function(){
$('#element img').animate({
'left' : "60px"
});
return false;
});

});

Skrypt z listingu 11.6 zawiera instrukcje, które przypisz procedury obsugi zdarzenia

onclick

trzem hiperczom zawartym w dokumencie. Sednem rozwizania jest pynne

przesuwanie zdjcia w trzy róne miejsca. W celu przesunicia fotografii poza lew kra-
wd elementu

div

modyfikujemy waciwo CSS

left

, nadajc jej warto

–100

pikseli:

$('#element img').animate({
'left' : "-100px"
});

Przesunicie elementu

img

poza praw krawd elementu

div

wykonuje instrukcja:

$('#element img').animate({
'left' : "200px"
});

Natomiast powrót do pozycji startowej polega na przypisaniu waciwoci

left

wartoci

60 pikseli:

$('#element img').animate({
'left' : "60px"
});

Funkcja

animate()

spowoduje pynn zmian waciwoci

left

od wartoci biecej

do jednej z podanych liczb, czyli

–100px

,

60px

lub

200px

.

Rozdzia 11.

i Efekty specjalne

137

W rozwizaniu tym wan rol odgrywaj style CSS. Element

img

jest pozycjonowany

bezwzgldnie wewntrz zawierajcego go elementu

div

:

#element {
position: relative;
overflow: hidden;
}
#element img {
display: block;
width: 80px;
height: 60px;
position: absolute;
top: 10px;
left: 60px;
}

Cena: 39,00 zł

5455

• Nie utrudniaj sobie życia — skorzystaj z biblioteki

jQuery!

• Abecadło, czyli jak korzystać z dobrodziejstw biblioteki

jQuery

• Interfejs API biblioteki

jQuery

, czyli gdzie szukać zaawansowanych rozwiązań

• Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości

Nie utrudniaj sobie życia

Nie utrudniaj sobie życia

—

— skorzystaj z biblioteki

skorzystaj z biblioteki jQuery

jQuery!

!

• Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jQuery
• Interfejs API biblioteki jQuery, czyli gdzie szukać zaawansowanych rozwiązań
• Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości

Biblioteka

Biblioteka jQuery,

jQuery, zarówno w wersji pełnej,

zarówno w wersji pełnej, jak i zminimalizowanej,

jak i zminimalizowanej,

pozwala programiście znacząco uprościć pracę i stopień skomplikowania kodu tworzonego w języku Java-
Script. Korzystając z jej możliwości, programista może zmieniać atrybuty, modyfikować wygląd poszcze-
gólnych elementów strony, dodawać lub usuwać elementy drzewa DOM. Może też wykonać zapytania Ajax,
stosować efekty specjalne, obsłużyć typowe i nietypowe zdarzenia, a także posłużyć się różnymi wtyczka-
mi, często znacząco rozszerzającymi funkcjonalność kodu.

Książka

Książka „

„jQuery.

jQuery.

Poradnik programisty”

Poradnik programisty”

to doskonałe kompendium wiedzy na temat tej

biblioteki. Dowiesz się z niej, jak rozpocząć pracę z jQuery, jak obchodzić się z selektorami i atrybutami,
manipulować modelem DOM czy przypisywać wybrany styl do określonych elementów strony. Nauczysz
się stosować funkcję jQuery, filtry i operacje na zbiorach elementów. Poznasz także rodzaje i sposób dzia-
łania wtyczek, sam zaczniesz je tworzyć, minimalizować i kompresować. Jeśli interesuje Cię programo-
wanie z wykorzystaniem możliwości oferowanych przez JavaScript, a nie chcesz spędzać wielu godzin na
bezpośrednim wpisywaniu skomplikowanego kodu, biblioteka jQuery jest właśnie dla Ciebie!

• Trzy warstwy dokumentu XHTML:

struktura, wygląd i zachowanie

• Zbiory węzłów, tworzenie i usuwanie

węzłów w drzewie DOM

• Korzystanie z biblioteki jQuery

• Efekty specjalne

• Selektory CSS i zdarzenia XHTML

• Funkcja jQuery() — w skrócie $()

• Modyfikacja wyglądu, odczyt

i modyfikacja treści elementów

• Odczyt i modyfikacja węzłów

drzewa DOM

• Odczyt i modyfikacja atrybutów

• Operacje przekształcające zbiór elementów

• Dodawanie i usuwanie węzłów drzewa

DOM, wędrówka po drzewie DOM

• Parametry wtyczek, ich tworzenie,

minimalizacja i kompresja

Wykorzystaj szanse,

Wykorzystaj szanse, jakie daje Ci biblioteka

jakie daje Ci biblioteka jQuery!

jQuery!

JQUEPP.indd 1

JQUEPP.indd 1

14-07-10 12:31:38

14-07-10 12:31:38