[ Pobierz całość w formacie PDF ]
raniu co drugiego wiersza tabeli, co by o potrzebne w przyk adzie z rozdzia u 1.
Na szcz cie biblioteka jQuery udost pnia bardzo zaawansowan technik pobie-
rania i u ywania kolekcji elementów. W metodzie tej wykorzystano selektory CSS.
Je li u ywasz arkuszy CSS do nadawania stylu witrynom, jeste gotów do korzy-
stania z biblioteki jQuery. Selektor CSS to instrukcja informuj ca przegl dark , do
których znaczników nale y zastosowa styl. Na przyk ad h1 to prosty selektor ele-
mentów, który pozwala do czy styl do wszystkich znaczników , a selektor
klasy .copyright umo liwia nadanie stylu wszystkich tagom, których atrybut class
ma warto copyright:
Copyright, 2009
Korzystaj c z biblioteki jQuery, mo na pobiera elementy przy u yciu specjalnego
polecenia, nazywanego obiektem jQuery. Podstawowa sk adnia takich polece
wygl da nast puj co:
$('selektor')
173
ROZDZIA 5. DYNAMICZNE MODYFIKOWANIE STRON WWW
Pobieranie
elementów strony
Przy tworzeniu obiektów jQuery mo na u ywa prawie wszystkich selektorów j zyka
CSS 2.1 i wielu selektorów j zyka CSS 3, nawet je li przegl darka nie obs uguje
danego selektora (na przyk ad Internet Explorer nie rozpoznaje niektórych selekto-
rów j zyka CSS 3). Je li chcesz pobra za pomoc biblioteki jQuery znacznik o iden-
tyfikatorze banner, mo esz u y nast puj cego kodu:
$('#banner')
a cuch #banner to selektor CSS u ywany do nadawania stylu znacznikowi
o identyfikatorze banner. Znak # okre la, e programista podaje identyfikator.
Po pobraniu elementów nale y ich oczywi cie u y . Biblioteka jQuery udost pnia
wiele narz dzi do manipulowania znacznikami. Za ó my, e chcesz zmieni kod
HTML elementu. Mo esz to zrobi w nast puj cy sposób:
$('#banner').html('JavaScript by tutaj');
Omówienie manipulowania znacznikami za pomoc biblioteki jQuery zaczyna si
na stronie 182 i ci gnie do ko ca ksi ki. Najpierw jednak powiniene nauczy si
pobiera elementy za pomoc tej biblioteki.
Podstawowe selektory
Podstawowe selektory CSS, na przyk ad selektory identyfikatorów, klas i elementów,
to kluczowa cz j zyka CSS. Selektory to doskona y mechanizm do pobierania
wielu znaczników za pomoc biblioteki jQuery.
Poniewa czytanie o selektorach nie jest najlepszym sposobem na ich zrozumie-
nie, w ród przyk adowych plików znajdziesz interaktywn stron WWW, na któ-
rej b dziesz móg przetestowa ten mechanizm. W katalogu R05 poszukaj pliku
selectors.html, a nast pnie otwórz go w przegl darce. Teraz mo esz przetestowa
ró ne selektory obs ugiwane przez bibliotek jQuery przez wpisanie ich w odpowied-
nim polu i klikni cie przycisku Zastosuj (rysunek 5.6).
Uwaga: Informacje o pobieraniu przyk adowych plików znajdziesz na stronie 38.
Selektory identyfikatorów
Przy u yciu jQuery i selektora ID j zyka CSS mo esz pobra dowolny element, który
ma przypisany identyfikator. Za ó my, e na stronie znajduje si poni szy fragment
kodu HTML:
Komunikat specjalny
Aby pobra ten element przy u yciu modelu DOM, mo esz u y nast puj cego kodu:
var messagePara = document.getElementById('message');
Metoda oparta na jQuery wygl da tak:
var messagePara = $('#message');
Inaczej ni w metodzie zwi zanej z modelem DOM, nie wystarczy poda nazwy
identyfikatora ('message'). Nale y u y sk adni j zyka CSS '#message'. Trzeba
wi c doda znak kratki przez nazw identyfikatora, podobnie jak przy tworzeniu
stylu CSS dla elementu o danym identyfikatorze.
174
CZ I WPROWADZENIE DO J ZYKA JAVASCRIPT
Pobieranie
elementów strony
Rysunek 5.6. Strona selectors.html, dost pna w ród przyk adowych plików, umo liwia przetestowanie selektorów
biblioteki jQuery. Wpisz wybrany z nich w polu Selektor (oznaczone owalem), a nast pnie kliknij przycisk Zastosuj.
Strona przekszta ci selektor na obiekt jQuery, a nast pnie wy wietli pasuj ce elementy przy u yciu czcionki
w kolorze czerwonym. Pod polem Selektor znajduje si kod potrzebny bibliotece do pobrania elementu, a tak e
liczba znalezionych znaczników. Na rysunku selektorem jest h2, a wszystkie pi znaczników na stronie
zosta o wyró nionych kolorem czerwonym (który wygl da tu zaskakuj co podobnie do szarego)
Selektor elementów
JQuery udost pnia zast pnik dla metody getElementsByTagName(). Technika u y-
wana w tej bibliotece wymaga przekazania tylko nazwy elementu. Aby pobra
wszystkie znaczniki metod modelu DOM, trzeba u y nast puj cego kodu:
var linksList = document.getElementsByTagName('a');
W jQuery wystarczy poni szy zapis:
var linksList = $('a');
Uwaga: JQuery obs uguje wiele ró nych selektorów. W tej ksi ce wymieniono tylko najbardziej
przydatne z nich, a pe n list znajdziesz na stronie http://docs.jquery.com/Selectors.
175
ROZDZIA 5. DYNAMICZNE MODYFIKOWANIE STRON WWW
Pobieranie
elementów strony
[ Pobierz całość w formacie PDF ]