jQuery jest lekkim i łatwym w użyciu frameworkiem, który sprawia, że tworzenie aplikacji w JavaScript staje się przyjemnością. Koniec z ciągnącymi się liniami kodu i obchodzeniem błędów przeglądarek. Dzięki prostej składni jQuery szybko odkryjesz ogromne możliwości frameworka i osiągniesz w szybki sposób to, co wcześniej wymagało dużo więcej pracy.

Naturalnie jQuery nie oferuje nic więcej poza
tym, co dałoby się uzyskać w \”czystym\”
JavaScripcie. Jednakże jego potęga polega
na tym, że proces dochodzenia do zamierzonych
efektów jest tu skracany do minimum. jQuery
zawiera wbudowane narzędzia i metody do
intuicyjnego poruszania się po drzewie DOM
i manipulowania jego elementami, łatwego przechwytywania
zdarzeń i interakcji z użytkownikiem,
a także do tworzenia prostych animacji. Oraz – nie
mogłoby tego zabraknąć – do w pełni bezbolesnej
implementacji rozwiązań AJAX-owych.

Dodatkowo łatwość tworzenia rozszerzeń
zwiększających standardową funkcjonalność
biblioteki sprawiła, że mamy dziś potężną ilość rozmaitych
wtyczek do jQuery. Na pewno znajdziesz
wśród nich te najlepiej odpowiadające twoim
potrzebom. Zawsze możesz także napisać własne
rozszerzenie.

Nie musisz również martwić się o to, by
rezultaty twojej pracy były poprawnie wyświetlane
w różnych przeglądarkach internetowych. Dzięki
zastosowaniu jQuery, w zdecydowanej większości
przypadków efekty będą jednakowe. Wynika to
z faktu, że wszelkie różnice w implementacji Java-
Scriptu są niwelowane po stronie biblioteki.

Nowoczesne strony internetowe cechują się
pełnym oddzieleniem struktury dokumentu (tj.
zawartości) od warstwy prezentacyjnej (CSS)
i zachowania (JavaScript). Tak jak za wizualne
ostylowanie dokumentu odpowiedzialne są dołączane
pliki CSS, tak za wszystkie akcje użytkownika
powinny odpowiadać zewnętrzne skrypty, których
wywołania nie będą opisane wewnątrz zawartości
dokumentu. Unikniemy tym samym dodawania
wszelakich atrybutów \”onclick\” czy \”onmouseover\”
do tagów XHTML.

jQuery wspiera takie podejście. Obsługę
zdarzeń deklarujemy w kodzie JavaScript, a elementy
XHTML wybieramy na podobnej zasadzie,
jak ma to miejsce w CSS. Zanim przejdziemy do
konkretnych przykładów prezentujących bogate
możliwości jQuery, pozwól, że zaczniemy od
podstaw.

Oddaję DOM do dyspozycji

Najprostsze wywołanie jQuery przedstawia się
następująco:

jQuery - przykład 1.1

W sekcji head dołączamy aktualną wersję biblioteki,
dostępną do pobrania ze strony projektu.
Tajemniczy symbol dolara, od którego zaczyna się
nasz skrypt, jest krótszym zapisem funkcji o nazwie
{stala}jQuery(){/stala}. Dzięki niej zwracany jest nam obiekt,
z którym możemy coś zrobić. Będzie to najczęściej
wykorzystywana przez nas funkcja.

Idąc dalej, metoda {stala}ready(){/stala} wywołana na
obiekcie document przyjmuje jako argument
funkcję, która wystartuje zaraz po tym, jak drzewo
elementów dokumentu (DOM) zostanie załadowane.

Efektem tego będzie wyświetlenie okna
powiadomienia z napisem \”Hej, ja działam!\”.
Zwróć uwagę, że może to nastąpić wcześniej,
niż gdyby funkcja ta miała być wywoływana
zdarzeniem onload. Nasze rozwiązanie posiada
dużą przewagę nad tym drugim.

Jak może wiesz, funkcje wywoływane zdarzeniem onload (przypisanym
zazwyczaj do elementu body) czekają ze
swoim startem, aż załadują się wszystkie elementy
dołączone do dokumentu (w tym np. elementy
graficzne), które mogą pobierać się wystarczająco
długo, aby zauważalnie opóźnić załadowanie się
skryptów. Zdecydowanie lepiej jest, gdy nasze
funkcje wywoływane są od razu po tym, jak DOM
jest do dyspozycji (czyli wtedy, kiedy załaduje się
sam kod XHTML) – i na to też pozwala jQuery.

Wracając do naszego przykładu, skoro mamy
już załadowane drzewo dokumentu, nie sposób
z tego nie skorzystać. Zmodyfikujmy więc nieco
nasz kod:

$(document).ready(function() {
$(\'h1\').click(function() {
alert(\'Hej, ja działam!\');
});
});

Właśnie wybraliśmy element h1, stworzyliśmy
na jego podstawie obiekt, a następnie do metody
click() przypisaliśmy znajomą już funkcję. Da to taki
sam efekt, jak gdybyśmy napisali:

jQuery - przykład 1.2

Lepiej jednak pozostawić obsługę zdarzeń
jQuery. Nasz skrypt przechwytuje zdarzenie onclick
odnoszące się do elementu h1 i kiedy ono nastąpi,
wywołuje zdefiniowaną funkcję.

Prostota i bogactwo możliwości

Filozofia jQuery opiera się na zasadzie \”znajdź
element i zrób coś z nim\”. Ten styl pisania kodu
jest tak intuicyjny, że sposób, w jaki dochodzimy
do pewnych rozwiązań, wydaje się w pełni naturalny.
Prześledźmy poniższy przykład:

$(document).ready(function() {
$(\'#owoce tr:odd td\').addClass(\'zebra\');
});

jQuery - przykład 2.1

owoc	sztuk
jabłko	3
mango	12
banan	7
kiwi	20
gruszka	15

Wybraliśmy tutaj wszystkie komórki (td) z nieparzystych
wierszy (tr:odd) należących do tabeli
o identyfikatorze \”owoce\”, a następnie nadaliśmy
każdej z nich klasę \”zebra\”, dla której w CSS odnosi
się reguła:

td.zebra {
background-color: #efe;
}

Prawda, że proste? Gwoli wyjaśnienia,
{stala}addClass(){/stala} jest jedną z metod jQuery, a jej zadanie
polega na przypisaniu danemu elementowi klasy
CSS. Więcej o metodach dowiesz się w dalszej
części artykułu. Warto zwrócić uwagę, że wybrane
wiersze tabeli nie są wizualnie nieparzyste, lecz
mają nieparzyste indeksy w kolekcji zgromadzonych
przez jQuery pasujących elementów (skrypt
oznaczył pierwszy wiersz indeksem 0, drugi – 1,
trzeci – 2, itd.).

Przeglądarka na bieżąco aktualizuje zmiany
w DOM. Innymi słowy, po załadowaniu dokumentu,
tabela została zmodyfikowana w sposób
zaprezentowany na poniższym listingu:

owoc	sztuk
jabłko	3
mango	12
banan	7
kiwi	20
gruszka	15

Operowanie na elementach

Załóżmy, że mamy element div zawierający
jeden akapit:

jQuery - przykład 4.1

Pierwotny

Naszym zamiarem jest dodanie wewnątrz niego
kolejnego akapitu z przykładową treścią. Czas więc
poznać metody {stala}append(){/stala} i {stala}prepend(){/stala}. Powodują
one dodanie do wnętrza obiektu, który je wywołuje,
nowych elementów będących argumentami
tych metod. Zobaczmy więc:

$(\'div\').append(\'
Dodany
\');

Stworzyliśmy właśnie nowy akapit (rysunek 3),
który znalazł się na końcu elementów będących
potomkami elementu div, na rzecz którego została
wywołana metoda. Czyli zaraz po pierwotnym
akapicie – takie jest bowiem działanie metody
{stala}append(){/stala}. Jeśli chcemy, aby nowy akapit stał się
pierwszym potomkiem naszego diva, skorzystajmy
z metody {stala}prepend(){/stala}.

Jeśli zaś wolimy odwrócić role, poznajmy dwie
kolejne metody: {stala}appendTo(){/stala} i {stala}prependTo(){/stala}. Wywołanie
{stala}appendTo(){/stala} przedstawia się następująco:

$(\'
Dodany
\').appendTo(\'div\');

Tym razem skupiamy uwagę na nowym akapicie,
który dodajemy do istniejącego już diva. Efekt
jest taki sam, jak poprzednio. Analogicznie działa
metoda {stala}prependTo(){/stala}.

Możemy również chcieć dodać coś bezpośrednio
przed lub za naszym elementem. W takim wypadku
pomocne okażą się metody {stala}before(){/stala} i {stala}after(){/stala}.

Obie służą do wstawiania nowych elementów
kolejno przed lub po danym elemencie wywoławczym,
co przedstawia poniższy przykład:

$(document).ready(function() {
$(\'div\').before(\'
Dodany
\');
});

jQuery - przykład 4.3

Pierwotny

Przed naszym divem pojawił się nowy akapit –
zdefiniowaliśmy go, wywołując metodę {stala}before(){/stala}.
Metoda {stala}after(){/stala} działa analogicznie. Tak jak
w przypadku wcześniej zaprezentowanych metod,
możemy odwrócić role. Tym razem wybierzmy
nowy akapit i umieśćmy tuż przed elementem div.

Skorzystamy więc z kolejnych metod: {stala}insertBefore(){/stala}
oraz {stala}insertAfter(){/stala}:

$(\'
Dodany
\').insertBefore(\'div\');

Efekt już znamy. Jak widzisz, osiem zaprezentowanych
dotąd metod służących manipulacji
modelem DOM jest prostych w użyciu. Warto
wspomnieć, że mogą one być użyte do przemieszczania
istniejących elementów – wtedy nie
będziemy tworzyć nowych.

Załóżmy, że w naszym dokumencie, gdzie
akapit jest zawartością elementu div, chcemy ów
akapit \”wyjąć\” z elementu rodzica i umieścić go
zaraz po nim. Możemy więc napisać:

$(\'p\').insertAfter($(\'div\'));

I gotowe. Wybraliśmy akapit i wywołaliśmy na
nim metodę {stala}insertAfter(){/stala}, której argumentem jest
nasz div. Skorzystanie z metody {stala}after(){/stala} również jest
możliwe. Na pewno wiesz już, jak to zrobić.

Poruszanie się po DOM-ie

Może nasunąć ci się na myśl pytanie, czy skoro
wybraliśmy już za pomocą selektora dany element
(w naszym przypadku akapit), musimy to robić
również z jego rodzicem? Czy nie łatwiej byłoby
po prostu wskazać na element rodzica, zamiast
korzystać z kolejnego selektora?

Owszem, i jest to jak najbardziej słuszne myślenie. jQuery posiada
bogatą listę metod, dzięki którym nie będziemy
musieli uciekać się do definiowania kolejnych
selektorów, a wszystkie operacje będziemy
w stanie przeprowadzić po zdefiniowaniu jedynie
początkowego elementu.

Zanim jednak do tego przejdziemy, poznaj
charakterystyczną i bardzo często wykorzystywaną
własność naszego frameworka, czyli tworzenie
łańcuchów. Zasada ich działania polega na tym,
że ciągi metod mogą występować po sobie, a ich
łącznikiem jest znak kropki. Taki zapis pozwala
nam na wywoływanie kolejnych metod od razu
na uzyskanym obiekcie. Dobrze wpływa to na
zwięzłość kodu. Zamiast pisać:

$(\'div\').removeClass(\'wstep\');
$(\'div\').css(\'color\', \'gray\');

możemy zastosować konstrukcję:

$(\'div\').removeClass(\'wstep\').css(\'color\',\'gray\');

Zasada ta jest kluczem do efektywnego wykorzystywania
jQuery. Wróćmy jednak do naszych
przykładów:

Na początek poznajmy metodę odpowiedzialną
za wybranie elementu rodzica. Jest nią metoda
parent(). Jej użycie przedstawia się następująco:

$(\'p\').parent().css(\'background\', \'#cfc\');

jQuery - przykład 6.1

• jabłko
• marchew
• por
• śliwka

Najpierw wybraliśmy element akapitu,
a następnie użyliśmy metody {stala}parent(){/stala}, aby wybór
przenieść na element jego rodzica, czego efektem
jest ustawienie zielonkawego tła dla elementu div.

Jeśli zaś chcemy dojść do elementów potomnych,
sprawa przedstawia się równie prosto. Przy
okazji to dobry moment na utworzenie kolejnego
dokumentu – zbudujmy tym razem listę nieuporządkowaną:

jQuery - przykład 6.1

• jabłko
• marchew
• por
• śliwka
• mango

Załóżmy, że wybraliśmy naszą listę:

$(\'#koszyk\')

i chcemy zaznaczyć wszystkie jej elementy. Pomoże
nam w tym metoda {stala}children(){/stala}:

$(\'#koszyk\').children().addClass(\'wybrany\');

Każdemu elementowi listy została nadana klasa
\”wybrany\”, co objawia się zmianą jego koloru
tekstu na zielony (zostało tak ustawione w arkuszu
stylów). Metoda {stala}children(){/stala} jest zatem odwrotnością
metody {stala}parent(){/stala}.

A co wtedy, gdy chcemy ograniczyć ilość zwracanych
elementów wyłącznie do tych przedstawiających
owoce? Nic prostszego:

$(\'#koszyk\').children(\'.owoc\'). addClass(\'wybrany\');

Efekt jest widoczny na rysunku 4. Użycie argumentu
dla metody {stala}children(){/stala} powoduje przefiltrowanie
jej wyników według zdefiniowanego wzoru. Rolę
filtru spełnia tutaj klasa \”owoc\”, którą sami nadaliśmy
dwóm elementom listy. Efektem będzie nadanie
klasy \”wybrany\” tylko tym wybranym elementom.

Jednak na końcu listy znajduje się tekst \”mango\”
zawierający się w elemencie span. Dlaczego
on nie został zaznaczony (klasa \”wybrany\” działa
na dowolny element)? Otóż metoda {stala}children(){/stala}
zwraca jedynie elementy bezpośrednio potomne
względem elementu bieżącego, zatem nasz filtr
wybrał tylko elementy, które są zapisane w kodzie
XHTML jako li.

Możemy jednak sięgnąć głębiej. Uniwersalną
metodą wyszukiwania elementów potomnych jest
{stala}find(){/stala}. Aby dobrać się do wszystkich elementów
wewnątrz naszej listy, niezależnie od stopnia ich
pokrewieństwa z elementem głównym, napiszemy:

$(\'#koszyk\').find(\'.owoc\').
addClass(\'wybrany\');

I proszę – nasz span również został zaznaczony.
Czas poznać kolejne użyteczne metody. Wybierzmy
teraz trzeci element z listy:

$(\'#koszyk\').find(\'li:eq(2)\')

Selektor :eq ogranicza liczbę elementów do
jednego, którego indeks (licząc od zera) jest równy
liczbie podanej w nawiasie. W naszym wypadku
jest to element li zawierający słowo \”por\”.

Możemy nadać mu klasę \”wybrany\” i dla przykładu
poszukać elementu sąsiedniego:

$(\'#koszyk\').find(\'li:eq(2)\').
addClass(\'wybrany\').next().
addClass(\'sasiad\');

Skorzystaliśmy z metody {stala}next(){/stala}, która zwraca
element umieszczony zaraz po elemencie wywoławczym.
Metoda {stala}prev(){/stala} wybiera natomiast
element go poprzedzający. Możemy także wybrać
wszystkie elementy sąsiadujące z naszym poprzez
użycie metody {stala}siblings(){/stala}:

$(\'#koszyk\').find(\'li:eq(2)\').
addClass(\'wybrany\').siblings().
addClass(\'sasiad\');

W praktyce, może nieco wbrew naszym
oczekiwaniom (spodziewamy się otrzymać parę
elementów, po jednym z każdej strony), metoda ta
zwróci nam wszystkie pozostałe elementy potomne
pierwszego poziomu dla rodzica naszego elementu.
Metoda {stala}siblings(){/stala}, tak jak zaprezentowane
wcześniej metody, w tym {stala}next(){/stala} i {stala}prev(){/stala}, wywołana
z argumentem spowoduje przefiltrowanie wyników
według podanego kryterium.

Uniwersalnym sposobem na odsianie pożądanych
elementów jest osobna metoda {stala}filter(){/stala}. Każdy
obiekt, na którym zastosowana jest ta metoda,
zwraca kolekcję elementów pasujących do podanego
klucza. Dla przykładu:

$(\'#koszyk\').find(\'.owoc\').filter(\'span\'). addClass(\'wybrany\');

spowoduje zaznaczenie wszystkich elementów
oznaczonych klasą \”owoc\” (li oraz span), zostawiwszy
ostatecznie jedynie te, które zapisane są
jako span. Argumentem funkcji filter może być
dowolne wyrażenie.

To dopiero początek…

Zaprezentowane tutaj funkcje są jedynie
wstępem do nauki wprawnego posługiwania
się frameworkiem jQuery. Nie wyczerpują one
oczywiście materiału do końca i na pewno bardzo
pomocne będzie samodzielne pogłębianie wiedzy
zgromadzonej w dokumentacji projektu.

…i zrób

Gdy jesteśmy już w stanie określić poszukiwane
elementy w naszym dokumencie, możemy przejść
do zapoznania się z metodami, które odpowiadają
za modyfikowanie drzewa DOM. Oznacza to
zmiany właściwości elementów, tworzenie nowych
i usuwanie istniejących, a także przemieszczanie
z jednego miejsca w inne.

Przed nami następujący przykład:

jQuery - przykład 3.1

The truth is out there

Nasz dokument składa się w uproszczeniu
z elementu h1, akapitu i hiperłącza. Spróbujmy
sprawić, by odnośnik przekierowywał do strony
głównej jQuery. W tym celu możemy napisać:

$(document).ready(function() {
$(\'a\').attr(\'href\', \'http://jquery.com\');
});

W efekcie nasz link odsyła teraz w nowe
miejsce. Trudno o prostszy przykład demonstrujący
prostotę posługiwania się jQuery. Skorzystaliśmy
z metody attr(), która pobiera 2 argumenty: nazwę
atrybutu oraz nową wartość, jaką chcemy do niego
przypisać. Wywoływana z jednym argumentem
zwróci bieżącą wartość atrybutu. Po dodaniu kodu:

alert($(\'a\').attr(\'href\'));

pojawi się okno dialogowe z aktualną wartością
atrybutu href naszego odsyłacza. Jeśli chcemy
jednocześnie zmienić atrybut href i zdefiniować
nowy – title, możemy napisać:

$(\'a\').attr({
href: \'http://jquery.com\',title: \'jQuery\'
});

Użyliśmy bardziej złożonej notacji jQuery,
dzięki której za jednym zamachem ustaliliśmy
wartości dla dwóch atrybutów (siłą rzeczy powołując
do życia atrybut title). Da to następujący
efekt:

The truth is out there

Atrybuty możemy także usuwać, wykorzystując
do tego metodę {stala}removeAttr(){/stala}. Jak możesz się
domyślić, jako argument przyjmuje ona nazwę
atrybutu, którego chcemy się pozbyć.

A gdyby tak jeszcze zmienić zawartość linka?
jQuery daje nam dwie metody, z których możemy
skorzystać: {stala}text(){/stala} i {stala}html(){/stala}. Pierwsza służy do zmiany
treści danego elementu, a druga ingeruje w strukturę
jego elementów potomnych, nadpisując
bieżącą zawartość elementu. Przyjrzyjmy się temu
przykładowi:

$(document).ready(function() {
$(\'a\').text(\'Write less, do more\');
});

jQuery - przykład 3.3

The truth is out there

Za pomocą metody {stala}text(){/stala} zmieniliśmy treść
odsyłacza, czego efekt widać na rysunku 2.

Wizualnie odczujemy to tak, jakby nasz link miał
tę treść ustawioną już w źródle – najczęściej nie
zauważymy nawet procesu zamiany. Jeśli chcemy
skorzystać z metody {stala}html(){/stala}, możemy zainteresować
się rodzicem hiperłącza:

$(\'p\').html(\'\');

Spowodowaliśmy nadanie naszemu akapitowi
nowej treści: zamiast hiperłącza, zawiera teraz
element input. Dla takich elementów przydatna
będzie kolejna metoda: {stala}val(){/stala}. Zwraca ona lub
definiuje wartość atrybutu value spotykanego
w elementach formularzy, odpowiada także za
zawartość elementu textarea. Aby skorzystać z tej
metody, możemy napisać:

$(\'input\').val(\'Jestem tekstowy\');

jQuery - przykład 3.5

Wespół z CSS

Często w naszych skryptach zajdzie potrzeba
zmiany stylów CSS elementów. jQuery oferuje nam
prostą metodę, która do tego służy: {stala}css(){/stala}. Poniższy
przykład demonstruje sposób jej wykorzystania:

$(\'input\').css(\'color\', \'green\');

Nasz element zyskał nową regułę CSS, która
została zdefiniowana jako przypisany do niego styl
wewnętrzny (to nic innego, jak dodanie atrybutu
\”style\” z wartością \”color: green\”). Możemy także
użyć poznanej już, bardziej złożonej notacji:

$(\'input\').css({color: \'green\', border: \'1px solid silver\', padding: \'3px\'
});

Dzięki temu jesteśmy w stanie definiować
rozleglejsze reguły CSS. Warto jednak w tym
miejscu przywołać kolejną metodę, która uwolni
nas od konieczności przetrzymywania kodu CSS
w pliku JavaScript – jest nią {stala}addClass(){/stala}.

Razem z jej przeciwieństwem – metodą {stala}removeClass(){/stala} – daje
nam świetny sposób na definiowanie stylów CSS
dla elementów poprzez nadawanie lub usuwanie
klas. Jeden element może posiadać kilka klas, tak
jak to jest rozwiązane w CSS. Powyższy przykład
możemy zapisać w nowy sposób, wykorzystując
metodę {stala}addClass{/stala}:

$(\'input\').addClass(\'text\');

Przenosimy także style do pliku CSS dołączonego
do dokumentu:

input.text {
color: green;
border: 1px solid silver;
padding: 3px;
}

Znajdź…

Jak mogliśmy się przekonać, wybieranie
potrzebnych elementów przypomina swoją
metodyką CSS. Jeśli pracujesz z kaskadowymi
arkuszami stylów, z pewnością docenisz tę cechę.
jQuery posiada imponującą obsługę różnorodnych
selektorów, zaczerpniętych m.in. z CSS3 oraz
XPath.

Aby wybrać wszystkie elementy jednego rodzaju
(np. akapity), napiszemy po prostu:

$(\'p\')

jQuery wyszuka w drzewie dokumentu
wybrane elementy i zwróci je nam jako kolekcję
obiektów gotowych do wykorzystania. Poszukiwany
element możemy również odnaleźć po
identyfikatorze, pisząc np.:

$(\'h1#tytul\')

lub po prostu:

$(\'#tytul\')

albo wyszukując po klasie:

$(\'p.komentarz\')

Istnieje również możliwość wykorzystania selektorów
potomnych oraz grupowania selektorów,
np.:

$(\'p.wstep > a, #stopka a\')

W ten sposób zgromadzone zostaną wszystkie
hiperłącza będące bezpośrednimi potomkami
akapitu o klasie \”wstep\” oraz wszystkie te, dla
których przodkiem jest element oznaczony klasą
\”stopka\”. Kolejne elementy oddzielamy od siebie
przecinkiem.

Możemy także skorzystać z selektorów atrybutów:

$(\'img[title]\')

Otrzymamy zestaw obrazków, dla których
zdefiniowano atrybut title. Poniższy selektor wybierze
wszystkie hiperłącza, dla których atrybut rel
ma wartość \”nofollow\”, a także linki do artykułów
w polskiej Wikipedii (dla których adresy rozpoczynają
się w podany sposób):

$(\'a[rel=\"nofollow\"], a[href^=\"http://pl.wikipedia.org\"]\')

Nic nie stoi także na przeszkodzie, aby wypróbować
nowe, wbudowane w składnię jQuery
selektory. Chcąc wybrać pierwszy występujący
w dokumencie akapit, napiszemy:

$(\'p:first\')

Aby wybrać co drugi (parzysty), posłużymy się
konstrukcją:

$(\'p:even\')

A co, jeśli chcemy wybrać pierwszych 5 elementów
listy? Napiszemy po prostu:

$(\'ul.linki li:lt(5)\')

Spowoduje to stworzenie kolekcji elementów
li, a następnie ograniczenie jej do tych, które mają
indeksy mniejsze od 5 (od 0 do 4 włącznie). jQuery
nadaje elementom indeksy odpowiednio do ich
kolejności występowania w dokumencie.

Bardzo pożyteczny może być także selektor
{stala}:contains{/stala}, którego użycie przedstawia się następująco:

$(\'p:contains(\"Piotr\")\')

Jego rola sprowadza się tutaj do zaznaczenia
wszystkich akapitów, w których występuje słowo
\”Piotr\”. Podobnie działa {stala}:has{/stala}, który wyszukuje
elementy zawierające w sobie inne, określone
elementy, np.:

$(\'label:has(a)\')

W efekcie wybrane zostaną wszystkie etykiety,
które zawierają hiperłącza. Interesującymi selektorami
mogą być także {stala}:header{/stala}, który gromadzi
wszystkie nagłówki (od h1 do h6) lub {stala}:input{/stala},
wybierający elementy formularzy (pola tekstowe,
przyciski, itd.), bądź {stala}:hidden{/stala}, gromadzący elementy
niewidoczne (np. ukryte za pomocą CSS).

Łącząc selektory, możemy tworzyć skomplikowane
konstrukcje, które nie pozwolą umknąć przed
nami żadnemu elementowi. Spróbuj zanalizować
poniższy przykład:

$(\'div#main > .wazny:not(form) ul:even li:first-child a[title]\')

Abstrahując od optymalności takiej konstrukcji,
w efekcie otrzymamy (pustą lub nie) kolekcję hiperłączy
posiadających zdefiniowany atrybut title,
będących potomkami pierwszego elementu co
drugiej listy w elemencie o klasie \”wazny\” (wyłączając
formularze), który z kolei jest bezpośrednim
potomkiem sekcji o identyfikatorze \”main\”.

No dobrze – pomyślisz – tylko co można z tym
zrobić? Na to pytanie odpowiemy w następnych
akapitach.