Artykuł

maj 30 2010
0

Zaawansowane selektory w jQuery

Jakiś czas temu pisałem na blogu wprowadzenie do jQuery, w którym przedstawiłem podstawowe selektory występujące w jQuery. Dziś chciałem rozszerzyć temat o dużo bardziej zaawansowane selektory, których przydatność dostrzega się szczególnie w bardziej rozbudowanych projektach. Często jest to też szybkie i proste rozwiązanie dużego problemu. Przy czytaniu tego wpisu, przydatna może się okazać wiedza z zakresu obiektowego modelu dokumentu (DOM).

Selektory z funkcjonalnością XPath

W wersji jQuery 1.2 zrezygnowano z klasycznych selektorów ala XPath i wprowadzono selektory bardziej na styl jQuery, ale o tej samej funkcjonalności. Jeśli ktoś nie chce zmieniać swoich przyzwyczajeń, może wykorzystać wtyczkę XPath Compatibility Plugin.

Zanim jednak przedstawię poszczególny selektory, warto by naprodukować jakiś kod, na którym będzie można je przetestować:

<div id="div1">
	<p id="par1">Akapit 1</p>
	<p id="par2">Akapit 2</p>
	<a href="http://www.altcontroldelete.pl">Alt Control Delete</a>
	<div id="div2">
		<p id="par3">Akapit 3</p>
		<p id="par4">Akapit 4</p>
	</div>
</div>

Pobranie wszystkich potomków (XPath Descendant Selector)

Załóżmy, że chcemy stworzyć tablicę wszystkich elementów akapitu wewnątrz diva o id div1, możemy zrobić to tak:

$('#div1 p');

Taki selektor pobierze wszystkie cztery akapity zaprezentowane w przykładzie.

Pobranie wszystkich dzieci (XPath Child Selector)

Jeśli chcemy pobrać wszystkie dzieci (czyli elementy leżąco bezpośrednio pod), określonego diva (np. naszego diva1) to stosujemy następującą konstrukcję:

$('#div1 > p');

Taki zapis, spowoduje pobranie dwóch akapitów o id par1 oraz par2.

Pobranie elementu rodzica (XPath Parent Selector)

Załóżmy teraz, że jesteśmy na poziomie nagłówka o id par1 i chcemy pobrać nadrzędny element div. Możemy to zrobić w sposób następujący:

$('#par1').parent('div');

W tym przypadku, naszym rodzicem będzie oczywiście div o id div1.

Jeśli w kodzie, zastosujemy konstrukcję:

$('#par1').parent();

To pobrany zostanie element, leżący bezpośrednio nad elementem o id par1 - niezależnie od jego typu.

Znajdowanie elementów, które zawierają inne elementy (XPath Contains Predicate Selector)

Jeśli chcemy znaleźć wszystkie elementy, które zawierają określone elementy to ten selektor jest dla nas:). Chodź ta definicja brzmi za wiele, ale wierzcie mi, że selektor ten jest użyteczny:). Załóżmy, że chcemy znaleźć wszystkie divy, które zawierają w sobie hiperłącza i o to proszę:

$("div:has(a)");

W tym przypadku, do tablicy trafi tylko div o id div1.

Selektory dla formularzy

jQuery posiada wiele użytecznych, gotowych selektorów, które możemy użyć do pobierania rozmaitych elementów formularzy. Warto się im przyjrzeć bliżej.

:password

Tworzy tablicę wszystkich elementów input typu password.

:radio

Pobiera tablicę wszystkich elementów input typu radio.

:selected

Pobiera tablicę elementów (lub jeden element) wszystkich zaznaczonych opcji np. dla pola typu select.

:submit

Tworzy tablicę wszystkich elementów input typu submit.

:text

Pobiera wszystkie elementy input typu text.

Sposób użycia każdego z tych selektorów jest prosty i oczywisty:

$(':selektor');

Spójrzmy zatem na prosty przykład. Chcemy pobrać wszystkie elementy input o typie text na całej stronie. Nic prostszego:

$(':text');

A co gdybyśmy chcieli je pobrać w obrębie formularza o określonym id (np. myform)? Również łatwizna:

$('#myform :text');

W tym przypadku, warto zwrócić uwagę na spację użytą w zapisie.

Inne przydatne funkcje i selektory DOM

Metoda slice()

Slice pozwala na wybieranie określonych elementów z całej pobranej tablicy. Np. w sytuacji gdy mamy listę punktowaną:

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

I chcemy teraz wyświetlić tekst np. trzeciego elementu, to stosujemy następującą konstrukcję:

alert($("li").slice(2).html());

W ten sposób, na ekranie pojawi się literka c (pamiętajmy o indeksowaniu od 0!).

Slice, może również operować na elementach umieszczonych w przedziałach, np.

$("li").slice(1, 3).css("background-color", "blue");

Powyższy zapis spowoduje, że literki b, c oraz d otrzymają piękne niebieskie tło.

Metoda each()

Metoda each pozwala na iteracyjne przejście po całej tablicy pobranych elementów - najprościej mówiąc jest czymś na kształt instrukcji foreach znanej z wielu popularnych języków programowania. Przykład użycia funkcji each w jQuery, można znaleźć we wpisie poświęconym Ajaxowi, XML oraz JSONowi.

Metoda find()

Find pozwala na wyszukanie potomków pasujących do wzorca wewnątrz określonej grupy elementów. Przykład użycia funkcji find w jQuery można również znaleźć we wpisie poświęconym Ajaxowi, XML oraz JSONowi.

Metoda add()

Metoda add pozwala na dodanie do grupy elementów pobranej selektorem, innego zestawu elementów. Na takim zgrupowanym zestawie elementów, będziemy mogli wykonać kolejne operacje. Czyli np. wykonać szereg operacji na wszystkich elementach div i span jednocześnie. Spójrzmy na przykład:

$('div').add($('span')).css('background-color', '#EEE');

Na początku, w standardowy sposób pobiera wszystkie elementy typu div. Później stwierdzamy jednak, że w modyfikacji powinny wźiąć udział również elementy typu span, dlatego też do istniejącej listy elementów, dodajemy nowy zestaw. Na tak skonsolidowanym zestawie, wykonujemy metodę css, która zmienia kolor tła wszystkich wyselekcjonowanych elementów.

Metoda next()

Metoda next to odpowiednik znanej z DOM metody nextSibling. Pozwala ona na znalezienie następnego elementu na tym samym poziomie drzewa. Jeśli rozpatrzymy nasz pierwszy przykład i na elemencie akapitu o id par2 wykonamy następujący kod:

$('#par2').next();

To w rezultacie otrzymamy uchwyt do elementu a, który leży obok tego akapitu.

Metoda prev()

Skoro jest metoda, która pozwala znaleźć następny element, musi być i metoda, która pozwala znaleźć element poprzedni. Tak jest w DOM bo jest tam previousSibling, jest tak również i w jQuery za sprawą funkcji prev. Przeanalizujmy zatem kod:

$('#par2').prev();

Co będzie jego efektem? Oczywiście uchwyt do elementu o id par1.

Metoda siblings()

Dowiedzieliśmy się jak pobrać poprzedni oraz następny element na tym samym poziomie drzewa. Ale jeszcze jedna ciekawa metoda, która pozwala pobrać wszystkie elementy sąsiednie wybranego węzła, na tym samym poziomie drzewa:) Spójrzmy zatem na kod:

$('#par2').siblings();

Jego efektem, będzie tablica zawierająca elementy p, a oraz div - oczywiście o odpowiednich id:)

Podsumowanie

W dzisiejszym wpisie, przedstawiłem tylko ułamek z wszystkich dostępnych selektorów i funkcji, których w jQuery jest ogrom. Jeśli nie znalazłeś tutaj funkcji/selektora godnego uwagi, spróbuj zapoznać się z oficjalną dokumentacją jQuery.

Data ostatniej modyfikacji: 02.08.2011, 08:34.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus