jQuery – selektory i filtry (cz. I)

21.11.2009 - Rafał Polito
TrudnośćTrudność

Relacje

Dla dokładniejszego sprecyzowania elementu możemy wypisać jego przodków (znaczniki będące wyżej w hierarchii).

1
2
3
$(„div.news h1.tytul_newsa)
$(„#lewe_menu div.blok_menu h1.tytul_bloku)
$(„#lewe _menu div.blok_menu p.tresc)

Jeśli chcemy wykonać jakąś czynność na kilku selektorach, możemy je rozdzielać przecinkiem tak, jak w arkuszach styli CSS.

1
2
$(„h1, h2, h3”)
$(„p.news, p.artykul)

Do wyboru potomków elementu posłuży nam operator „>”.

1
$(„p > a”)

Tym sposobem wybierzemy wszystkie linki w paragrafie. Elementy mogą mieć rodzeństwo. Chcąc wybrać brata danego elementu (czyli element będący na tym samym poziomie w hierarchii, mający tego samego rodzica) użyjemy operatora „+”.

1
$(„#punkt + li”)

To pozwoli nam wybrać brata punktu listy o id=”#brat”, występującego bezpośrednio po nim. Bespośrednio, czyli będzie to tylko jeden, następny punkt listy. Operator „~” działa podobnie jak „+” z tą różnica, że wybierze wszystkich braci elementu:

1
$(„#punkt ~ li”)

Tak wybierając rodzeństwo, wybierzemy wszystkie punkty listy występujące po elemencie z id=”#punkt”. Uwaga, powyższe operatory pozwalają wybrać rodzeństwo występujące po wskazanym elemencie. Elementy przed - nie są wybierane.

Podstawowe filtry

Selektory możemy łączyć z filtrami, co rozszerza ich możliwości. Filtr działa jak sito i przepuszcza tylko określone elementy. W sicie mamy różnej wielkosci otwory. My zamiast otworów stosujemy wyrażenia klasyfikujące elementy. Filtry w jQuery rozpoczynają się dwukropkiem. Dla przykładu, żeby wybrać pierwszy lub ostatni element w bloku użyjemy odpowiednio :first i :last.

1
2
$(„ul li:first”)
$(„ul li:last”)

Filtry :even i :odd wybierają elementy parzyste i nieparzyste. Pierwszy element ma indeks 0, czyli jest parzysty, drugi element ma indeks 1 więc jest nieparzysty. Następne filtry :eq(n), :gt(n), :lt(n) pozwalają nam wybrać kolejno element równy n, elementy mniejsze od n, elementy większe od n. Tutaj również indeksujemy od 0. Jeśli chcemy zanegować selektor (wybrać wszystko za wyjątkiem podanego selektora) posłużymy się filtrem :not(selektor).

3
Twoja ocena: Brak Ocena: 3 (1 ocena)

Copyright © 2008-2010 Wrocławski Portal Informatyczny

design: rafalpolito.com