Kurs jQuery #2 – Selekcja elementów

Wiesz już jak zacząć nowy projekt w jQuery i nie zdziwi Cię jego składnia. Czas więc żebyś dowiedział się więcej o selekcjonowaniu konkretnych elementów ze strony bo do podstawa jeśli chcesz dokonywać na nich operacji. Będzie to też prawdopodobnie najczęściej wykorzystywana przez Ciebie funkcjonalność bo przydaje się praktycznie cały czas.

Selekcjonowanie tagów

W poprzednim przykładzie miałeś już do czynienia z wyselekcjonowaniem tagu button na stronie i dokonaniu na nim pewnych operacji. Dla przypomnienia wygląda to w ten sposób:

Jeżeli będzie więcej obiektów DOM spełniających podane przez Ciebie kryteria to będzie się to tyczyło wszystkich.

Jeśli mamy na myśli element zawierający się gdzieś tam w innym elemencie bądź też konkretnie bezpośrednio w innym elemencie możemy odwołać się do niego kolejno tak jak poniżej. Jest to dokładnie taka sama składnia z jaką mamy do czynienia w CSS.

Przykładowy kod HTML który zobrazuje Ci na czym dokładnie polega różnica. Spróbuj dodać do pierwszego selekcjonowanie znaczek >. Zobaczysz, że nie będzie wyników gdyż p nie znajduje się bezpośredniodiv.

Możesz również odwoływać się do elementu bezpośrednio po innym elemencie lub do wszystkich elementów następujących po tym elemencie.

Podane przez Ciebie kryteria selekcjonowanie możesz ze sobą łączyć jeśli ze wszystkimi wyselekcjonowanymi elementami chcesz zrobić to samo, zaoszczędzi Ci to pisania. Wystarczy, że kryteria oddzielisz od siebie przecinkami.

Selekcjonowanie po id i class

Tutaj znowu dla osób które znają CSS nie powinno być zaskoczenia. Znowu selekcja oparta jest na takiej samej składni.

Selekcja wszystkich elementów

Jeśli chcesz wyselekcjonować wszystkie elementy jakie masz na stronie, możesz użyć operatora *.

Selekcjonowanie elementów na podstawie ich atrybutów

Jeśli chcesz wyselekcjonować wszystkie elementy które mają określony atrybut wystarczy, że po nazwie elementu dasz nazwę atrybutu w nawiasach kwadratowych.

Jeśli jesteś bardziej wymagający i oprócz tego, że podany element ma posiadać dany atrybut to jeszcze dodatkowo wartość tego atrybutu musi być równa jakiejś określonej wartości wystarczy po jego nazwie podać operator przypisania i konkretną wartość.

Możesz również chcieć osiągnąć efekt zupełnie odwrotny a więc wyselekcjonować wszystkie elementy których atrybut ma zupełnie inną wartość. Dokonasz tego poprzez dodanie znaku negacji przed operatorem przypisania.

A co jeśli znasz tylko kawałek wartości którą może zawierać atrybut? Na to również znajdzie się rozwiązanie… a nawet kilka.

Wyselekcjonowane zostaną wszystkie elementy których id jest równe container albo w których znajduje się podana fraza a po niej operator odejmowania -.

Dzięki temu wyselekcjonowane zostaną elementy w których atrybutach znajduje się podana fraza. Obojętnie w jakim miejscu ciągu znaków, jeśli tylko się w nim zawiera to spełnia kryteria.

Tutaj z kolei podany wyraz musi być dokładnie wartością atrybutu lub zawierać się w niej i być oddzielonym spacją od reszty wartości.

Tutaj dostaniemy elementy których wartość atrybutu rozpoczyna się od “con”

… a tutaj te których wartość atrybutu kończy się na “ainer1”.

Podane metody tak jak w przypadku selekcji elementów można ze sobą łączyć ale tutaj dostaniemy nie szerszy a bardziej wyspecjalizowany wynik. W przypadku łączenia kryteriów wyszukiwania elementów selekcjonowane były elementy dla każdego poszczególnego kryterium a następnie te zbiory były ze sobą łączone. Tutaj natomiast efektem końcowym jest część wspólna.

Selekcja elementu któregoś z kolei

Również bardzo często liczy się dla nas to w jakiej kolejności występuje dany element. Tutaj możemy mieć cały szereg wymagań, na szczęście są również selektory które jak myślę zaspokoją większość z nich.

Jeśli znamy konkretny indeks elementu a więc kolejność w jakiej występuje w elemencie rodzica możemy zastosować selektor :eq(index). Oczywiście zamiast index podajemy konkretną liczbę, zaczynając od 0.

Mamy również do dyspozycji selektory które pozwolą na wybranie wszystkich elementów o indeksie mniejszym lub większym od podanego i są to odpowiednio:

Jeśli masz taką potrzebę możesz wybrać wszystkie elementy z parzystym indeksem zaczynając od 0 lub te z nieparzystym.

Selektor :first-child selekcjonuje wszystkie elementy które są pierwszymi dziećmi ich rodziców.

Ale jeśli chcesz dostać pierwsze elementy swoich rodziców określonego typu powinieneś zdecydować się na :first-of-type.

Kolejnym bardzo podobnym selektorem jest po prostu :first.

Wybiera on jeden, jedyny element danego typu który jest jego pierwszym wystąpieniem w ogóle na stronie.

Dokładnie odwrotnymi selektorami do ostatnich trzech są odpowiednio :last-child, :last-of-type:last.

Jeśli chcesz możesz odnieść się też do któregoś z kolei potomka danego obiektu. Zrobisz to z pomocą selektora :nth-child(index), jeśli jednak chodzi o indeks możesz się na początku lekko pomylić gdyż tutaj akurat, numeracja zaczyna się od 1.

Możliwość liczenia elementów od końca jednak wymaga użycia :nth-last-child(index)nie wystarczy tutaj ujemny indeks.

Nic nie stoi na przeszkodzie jeśli chcesz wyselekcjonować konkretne wystąpienie danego elementu tylko wśród określonego typu. Tutaj też masz możliwość liczenia elementów od końca.

Selekcjonowanie tylko tych elementów które zawierają określoną treść

Czasem jest i taka potrzeba. Dzięki :contains() masz możliwość wybrania wszystkich elementów które zawierają w sobie podaną frazę.

Selekcjonowanie tylko tych elementów które zawierają w sobie inne, określone elementy

Adekwatne jak w poprzednim podpunkcie możliwości ale w przypadku elementów nie tekstu daje nam selektor :has().

Selekcjonowanie jedynaków

Selektory :only-child:only-of-type pozwalają na wyselekcjonowanie odpowiednio takich elementów które są jedynymi potomkami swoich rodziców i jedynymi potomkami o określonym typie. Czyli jeśli w elemencie jest więcej obiektów ale o innym typie to można założyć, że ten nasz element jest tym jedynakiem względem typu.

Selekcjonowanie pustych elementów i negacja

Jeśli potrzebujesz elementu który nie ma żadnych elementów potomnych powinieneś użyć selektora :empty.

Jego przeciwieństwem jest :parentA jeśli już o przeciwieństwach selektorów mówimy… wypadałoby żebym w końcu wspomniał o :not() – jest to negacja selektora podanego jako argument.

Selekcjonowanie elementów określonego typu

:button – wybiera wszystkie przyciski i elementy o atrybucie type=button.

:checkbox – wybiera wszystkie elementy typu checkbox.

:file – wybiera wszystkie elementy typu file

:header – wybiera wszystkie elementy nagłówkowe a więc h1, h2, h3 itd.

:image – wybiera wszystkie obrazy na stronie

:input – wybiera wszystkie elementy input

:password – wybiera wszystkie elementy typu password

:radio – wybiera wszystkie elementy typu radio

:reset – wybiera wszystkie elementy typu reset

:root – wybiera zawsze element <html>

:submit – wybiera wszystkie elementy typu submit

:text – wybiera wszystkie elementy typu text

Wybieranie elementów po języku

Jeśli w elementach na naszej stronie mamy ustalony atrybut lang nic nie stoi na przeszkodzie żeby wybrać tylko te elementy które są oznaczone interesującym nas językiem.

Selekcjonowanie elementów po ich stanie

Jeśli chcemy dostać się do elementów które w czasie selekcji są w czasie animacji możemy skorzystać z :animated.

Jak widzisz mamy tutaj trzy, odpowiednio ostylowane divy i na jeden nałożona jest pętla animacji. Cały czas wykonuje się na nim metoda slideToggle(), o której wspomnę jeszcze później ale jej zastosowanie jest takie, że płynnie zwija i rozwija (na przemian) dany element. Po kliknięciu na przycisk selekcjonowany jest div który obecnie znajduje się w animacji i używana jest na nim metoda toggleClass(). Kiedy element nie ma danej klasy to mu ją dodaje a jeśli ją ma to mu ją usuwa.

Kolejnym selektorem stanu jest :checkedSelekcjonuje on tylko te elementy które są zaznaczone.

Jedyną nowością tutaj oprócz selektora oczywiście, jest metoda css(). Ustawia ona wartość dla odpowiedniej właściwości w CSS.

Następny na naszej liście jest :disabled który selekcjonuje wszystkie elementy z atrybutem disabled.

Podany przykład jest analogiczny do poprzedniego. Przeciwieństwem natomiast i równowartością :not(:disabled) jest :enabled.

Jeśli chcesz się dostać do tego czego nie widać powinieneś skorzystać z selektora :hidden. Wyselekcjonuje on wszystkie elementy z display:nonetype=hidden, szerokością i wysokością na 0 oraz potomne takich bo ich siłą rzeczy również wtedy nie widać.

Przeciwieństwem jest :visible.

Tym co prawda trochę przydługawym postem udało mi się omówić wszystkie selektory w jQuery i mam nadzieję, że będziesz tutaj często zaglądał gdybyś czegoś zapomniał albo czegoś potrzebował.