jQuery - selektory

Biblioteka jQuery wykorzystuje moc selektorów kaskadowych arkuszy stylów (CSS), aby umożliwić nam szybki i łatwy dostęp do elementów lub grup elementów w modelu obiektu dokumentu (DOM).

Selektor jQuery to funkcja, która wykorzystuje wyrażenia, aby znaleźć pasujące elementy z DOM na podstawie podanych kryteriów. Można po prostu powiedzieć, że selektory są używane do wybierania jednego lub więcej elementów HTML za pomocą jQuery. Po wybraniu elementu możemy na nim wykonać różne operacje.

Funkcja fabryczna $ ()

Selektory jQuery zaczynają się od znaku dolara i nawiasów - $(). Funkcja fabryczna$() korzysta z następujących trzech cegiełek przy wyborze elementów w danym dokumencie -

Sr.No.	Selektor i opis
1	Tag Name Reprezentuje nazwę tagu dostępną w DOM. Na przykład$('p') zaznacza wszystkie akapity <p> w dokumencie.
2	Tag ID Reprezentuje tag dostępny z podanym identyfikatorem w DOM. Na przykład$('#some-id') wybiera pojedynczy element w dokumencie, który ma identyfikator some-id.
3	Tag Class Reprezentuje tag dostępny z daną klasą w DOM. Na przykład$('.some-class') wybiera wszystkie elementy w dokumencie, które mają klasę jakiejś klasy.

Wszystkie powyższe elementy mogą być używane samodzielnie lub w połączeniu z innymi selektorami. Wszystkie selektory jQuery działają na tej samej zasadzie, z wyjątkiem pewnych poprawek.

NOTE - Funkcja fabryczna $() jest synonimem jQuery()funkcjonować. Więc jeśli używasz jakiejkolwiek innej biblioteki JavaScript, gdzie$ znak jest w konflikcie z czymś innym, możesz go zastąpić $ podpisać jQuery name i możesz użyć funkcji jQuery() zamiast $().

Przykład

Poniżej znajduje się prosty przykład wykorzystujący selektor znaczników. Spowoduje to wybranie wszystkich elementów z nazwą znacznikap.

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

To da następujący wynik -

Jak korzystać z selektorów?

Selektory są bardzo przydatne i byłyby wymagane na każdym kroku podczas korzystania z jQuery. Otrzymują dokładnie taki element, jaki chcesz, z dokumentu HTML.

W poniższej tabeli wymieniono kilka podstawowych selektorów i wyjaśniono je przykładami.

Sr.No.	Selektor i opis
1	Nazwa Wybiera wszystkie elementy, które pasują do danego elementu Name.
2	#ID Wybiera pojedynczy element, który pasuje do podanego ID.
3	.Klasa Wybiera wszystkie elementy pasujące do podanego Class.
4	Uniwersalny (*) Wybiera wszystkie elementy dostępne w DOM.
5	Wiele elementów E, F, G. Wybiera połączone wyniki wszystkich określonych selektorów E, F lub G.

Przykłady selektorów

Podobnie jak w powyższej składni i przykładach, poniższe przykłady pozwolą Ci zrozumieć, jak używać innego typu innych przydatnych selektorów -

Tutaj masz inny typ innych przydatnych selektorów -

Sr.No.	Selektor i opis
1	*$('')** Ten selektor wybiera wszystkie elementy w dokumencie.
2	*$("p > ")** Ten selektor wybiera wszystkie elementy, które są dziećmi elementu akapitu.
3	$("#specialID") Ta funkcja selektora pobiera element z id = "specialID".
4	$(".specialClass") Ten selektor pobiera wszystkie elementy, które mają klasę specialClass .
5	$("li:not(.myclass)") Wybiera wszystkie elementy dopasowane przez <li>, które nie mają class = "myclass".
6	$("a#specialID.specialClass") Ten selektor pasuje powiązania z identyfikatorem specialID i klasy specialClass .
7	$("p a.specialClass") Ten selektor dopasowuje linki z klasą specialClass zadeklarowaną w elementach <p>.
8	$("ul li:first") Ten selektor pobiera tylko pierwszy element <li> z <ul>.
9	$("#container p") Wybiera wszystkie elementy dopasowane przez <p>, które są potomkami elementu, który ma identyfikator kontenera .
10	$("li > ul") Wybiera wszystkie elementy dopasowane przez <ul>, które są dziećmi elementu dopasowanego przez <li>
11	$("strong + em") Wybiera wszystkie elementy dopasowane przez <em>, które bezpośrednio następują po elemencie równorzędnym dopasowanym przez <strong>.
12	$("p ~ ul") Wybiera wszystkie elementy dopasowane przez <ul>, które następują po elemencie równorzędnym dopasowanym przez <p>.
13	$("code, em, strong") Wybiera wszystkie elementy dopasowane przez <code>, <em> lub <strong>.
14	$("p strong, .myclass") Wybiera wszystkie elementy dopasowane przez <strong>, które są potomkami elementu dopasowanego przez <p>, a także wszystkie elementy, które mają klasę myclass .
15	$(":empty") Wybiera wszystkie elementy, które nie mają dzieci.
16	$("p:empty") Wybiera wszystkie elementy dopasowane przez <p>, które nie mają dzieci.
17	$("div[p]") Wybiera wszystkie elementy dopasowane przez <div>, które zawierają element dopasowany przez <p>.
18	$("p[.myclass]") Wybiera wszystkie elementy dopasowane przez <p>, które zawierają element z klasą myclass .
19	$("a[@rel]") Wybiera wszystkie elementy dopasowane przez <a>, które mają atrybut rel.
20	$("input[@name = myname]") Wybiera wszystkie elementy dopasowane przez <input>, które mają wartość nazwy dokładnie równą myname.
21	$("input[@name^=myname]") Wybiera wszystkie elementy dopasowane przez <input>, które mają wartość nazwy zaczynającą się od myname .
22	$("a[@rel$=self]") Wybiera wszystkie elementy dopasowane przez <a>, które mają relwartość atrybutu kończąca się na self .
23	*$("a[@href=domain.com]")** Wybiera wszystkie elementy dopasowane przez <a>, które mają wartość href zawierającą domain.com.
24	$("li:even") Wybiera wszystkie elementy dopasowane przez <li>, które mają parzystą wartość indeksu.
25	$("tr:odd") Wybiera wszystkie elementy dopasowane przez <tr>, które mają nieparzystą wartość indeksu.
26	$("li:first") Wybiera pierwszy element <li>.
27	$("li:last") Wybiera ostatni element <li>.
28	$("li:visible") Wybiera wszystkie elementy dopasowane przez <li>, które są widoczne.
29	$("li:hidden") Wybiera wszystkie elementy dopasowane przez <li>, które są ukryte.
30	$(":radio") Zaznacza wszystkie przyciski opcji w formularzu.
31	$(":checked") Zaznacza wszystkie zaznaczone pola w formularzu.
32	$(":input") Zaznacza tylko elementy formularza (wejście, zaznacz, obszar tekstu, przycisk).
33	$(":text") Zaznacza tylko elementy tekstowe (input [type = text]).
34	$("li:eq(2)") Wybiera trzeci element <li>.
35	$("li:eq(4)") Wybiera piąty element <li>.
36	$("li:lt(2)") Wybiera wszystkie elementy dopasowane przez element <li> przed trzecim; innymi słowy, pierwsze dwa <li> elementy.
37	$("p:lt(3)") wybiera wszystkie elementy dopasowane przez <p> elementy przed czwartym; innymi słowy, pierwsze trzy <p> elementy.
38	$("li:gt(1)") Wybiera wszystkie elementy dopasowane przez <li> po drugim.
39	$("p:gt(2)") Wybiera wszystkie elementy dopasowane przez <p> po trzecim.
40	$("div/p") Wybiera wszystkie elementy dopasowane przez <p>, które są dziećmi elementu dopasowanego przez <div>.
41	$("div//code") Wybiera wszystkie elementy dopasowane przez <code>, które są potomkami elementu dopasowanego przez <div>.
42	$("//p//a") Wybiera wszystkie elementy dopasowane przez <a>, które są potomkami elementu dopasowanego przez <p>
43	$("li:first-child") Wybiera wszystkie elementy dopasowane przez <li>, które są pierwszym dzieckiem ich rodzica.
44	$("li:last-child") Wybiera wszystkie elementy dopasowane przez <li>, które są ostatnim dzieckiem ich rodzica.
45	$(":parent") Wybiera wszystkie elementy, które są rodzicami innego elementu, w tym tekst.
46	$("li:contains(second)") Wybiera wszystkie elementy dopasowane przez <li>, które zawierają tekst jako sekundę.

Możesz użyć wszystkich powyższych selektorów z dowolnym elementem HTML / XML w ogólny sposób. Na przykład jeśli selector$("li:first") działa wtedy dla elementu <li> $("p:first") działałoby również dla elementu <p>.