Selektory

Selektory w jQuery to ciągi znaków, które pozwalają na identyfikację elementów HTML w drzewie DOM, są bardzo podobne do selektorów CSS i pozwalają na wybieranie elementów na podstawie ich nazw, klas, atrybutów, relacji z innymi elementami, a nawet na podstawie ich pozycji w drzewie DOM. Oto kilka przykładów selektorów w jQuery:

										
$("p")
										
								

										
$(".intro")
										
								

										
$("[href^='https']")
										
								

										
$("#main a")
										
								

										
$("#myForm input[type='text']")
										
								

										
$(".menu li:has(a)")
										
								

W jQuery selektory można łączyć ze sobą, aby uzyskać bardziej skomplikowane zapytania. Przykładowo, aby wybrać wszystkie elementy <li> znajdujące się w elemencie <ul> o klasie "menu" oraz mające atrybut "data-price" większy niż 10, można użyć następującego zapytania:

 								
$("ul.menu li[data-price > '10']")
 								
 						

Wyjaśnienie

Powyższe zapytanie wybierze wszystkie elementy <li> spełniające warunki zapytania, czyli będące dziećmi elementu <ulgt o klasie "menu" oraz posiadające atrybut "data-price" większy niż 10.

jQuery posiada wiele selektorów wbudowanych, ale również można tworzyć własne selektory. Do tego celu można wykorzystać metodę $.expr.createSelector(). Przykładowo, aby stworzyć własny selektor wybierający elementy <a> z atrybutem "target" o wartości "_blank", można użyć następującego kodu:

								
$.expr.createSelector( "targetBlankA", function( elem ) {

	return $( elem ).is( "a" ) && $( elem ).attr( "target" ) === "_blank";
});
								
						

Wyjaśnienie

Powyższy kod stworzy nowy selektor "targetBlankA", który można użyć w zapytaniach tak samo jak selektory wbudowane w jQuery.

Notatka

Podsumowując, selektory w jQuery to bardzo przydatne narzędzie do wybierania elementów na stronie internetowej. Dzięki nim można w łatwy sposób manipulować elementami HTML i stylami, co przyczynia się do łatwiejszej i bardziej efektywnej pracy z interfejsem użytkownika.