Framework jQuery - JavaScript nie boli

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 :contains, 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 :has, 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 :header, który gromadzi wszystkie nagłówki (od h1 do h6) lub :input, wybierający elementy formularzy (pola tekstowe, przyciski, itd.), bądź :hidden, 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.