jQuery - Selektoren

Die jQuery-Bibliothek nutzt die Leistungsfähigkeit von CSS-Selektoren (Cascading Style Sheets), um schnell und einfach auf Elemente oder Elementgruppen im Document Object Model (DOM) zugreifen zu können.

Ein jQuery Selector ist eine Funktion, die Ausdrücke verwendet, um anhand der angegebenen Kriterien übereinstimmende Elemente aus einem DOM zu ermitteln. Man kann einfach sagen, dass Selektoren verwendet werden, um ein oder mehrere HTML-Elemente mit jQuery auszuwählen. Sobald ein Element ausgewählt ist, können wir verschiedene Operationen an diesem ausgewählten Element ausführen.

Die Factory-Funktion $ ()

jQuery-Selektoren beginnen mit dem Dollarzeichen und den Klammern - $(). Die Werksfunktion$() verwendet die folgenden drei Bausteine bei der Auswahl von Elementen in einem bestimmten Dokument -

Sr.Nr.	Auswahl & Beschreibung
1	Tag Name Stellt einen im DOM verfügbaren Tag-Namen dar. Zum Beispiel$('p') wählt alle Absätze <p> im Dokument aus.
2	Tag ID Stellt ein Tag dar, das mit der angegebenen ID im DOM verfügbar ist. Zum Beispiel$('#some-id') Wählt das einzelne Element im Dokument aus, das die ID some-id hat.
3	Tag Class Stellt ein Tag dar, das mit der angegebenen Klasse im DOM verfügbar ist. Zum Beispiel$('.some-class') Wählt alle Elemente im Dokument aus, die eine Klasse einer Klasse haben.

Alle oben genannten Elemente können entweder einzeln oder in Kombination mit anderen Selektoren verwendet werden. Alle jQuery-Selektoren basieren auf demselben Prinzip, mit Ausnahme einiger Optimierungen.

NOTE - Die Werksfunktion $() ist ein Synonym für jQuery()Funktion. Für den Fall, dass Sie eine andere JavaScript-Bibliothek verwenden, in der$ Das Zeichen steht in Konflikt mit etwas anderem, das Sie ersetzen können $ unterschreiben von jQuery Name und Sie können die Funktion verwenden jQuery() Anstatt von $().

Beispiel

Das Folgende ist ein einfaches Beispiel, das die Tag-Auswahl verwendet. Dies würde alle Elemente mit einem Tag-Namen auswählenp.

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>

Dies führt zu folgendem Ergebnis:

Wie verwende ich Selektoren?

Die Selektoren sind sehr nützlich und werden bei jedem Schritt bei der Verwendung von jQuery benötigt. Sie erhalten genau das gewünschte Element aus Ihrem HTML-Dokument.

In der folgenden Tabelle sind einige grundlegende Selektoren aufgeführt und anhand von Beispielen erläutert.

Sr.Nr.	Auswahl & Beschreibung
1	Name Wählt alle Elemente aus, die mit dem angegebenen Element übereinstimmen Name.
2	#ICH WÜRDE Wählt ein einzelnes Element aus, das mit dem angegebenen übereinstimmt ID.
3	.Klasse Wählt alle Elemente aus, die mit dem angegebenen übereinstimmen Class.
4	Universal (*) Wählt alle in einem DOM verfügbaren Elemente aus.
5	Mehrere Elemente E, F, G. Wählt die kombinierten Ergebnisse aller angegebenen Selektoren aus E, F oder G.

Beispiele für Selektoren

Ähnlich wie in der obigen Syntax und den obigen Beispielen erhalten Sie anhand der folgenden Beispiele Verständnis für die Verwendung anderer nützlicher Selektortypen.

Hier haben Sie verschiedene andere nützliche Selektoren -

Sr.Nr.	Auswahl & Beschreibung
1	*$('')** Dieser Selektor wählt alle Elemente im Dokument aus.
2	*$("p > ")** Dieser Selektor wählt alle Elemente aus, die untergeordnete Elemente eines Absatzelements sind.
3	$("#specialID") Diese Auswahlfunktion erhält das Element mit id = "specialID".
4	$(".specialClass") Dieser Selektor ruft alle Elemente ab, die die Klasse specialClass haben .
5	$("li:not(.myclass)") Wählt alle mit <li> übereinstimmenden Elemente aus, die nicht class = "myclass" haben.
6	$("a#specialID.specialClass") Dieser Selektor vergleicht Links mit einer ID von specialID und einer Klasse von specialClass .
7	$("p a.specialClass") Dieser Selektor vergleicht Links mit einer Klasse von specialClass , die in <p> -Elementen deklariert ist.
8	$("ul li:first") Dieser Selektor erhält nur das erste <li> -Element des <ul>.
9	$("#container p") Wählt alle mit <p> übereinstimmenden Elemente aus, die Nachkommen eines Elements mit der Container- ID sind .
10	$("li > ul") Wählt alle mit <ul> übereinstimmenden Elemente aus, die untergeordnete Elemente eines mit <li> übereinstimmenden Elements sind
11	$("strong + em") Wählt alle mit <em> übereinstimmenden Elemente aus, die unmittelbar auf ein mit <strong> übereinstimmendes Geschwisterelement folgen.
12	$("p ~ ul") Wählt alle mit <ul> übereinstimmenden Elemente aus, die auf ein mit <p> übereinstimmendes Geschwisterelement folgen.
13	$("code, em, strong") Wählt alle Elemente aus, die mit <code> oder <em> oder <strong> übereinstimmen.
14	$("p strong, .myclass") Wählt alle mit <strong> übereinstimmenden Elemente aus, die Nachkommen eines mit <p> übereinstimmenden Elements sind, sowie alle Elemente mit einer Klasse von myclass .
15	$(":empty") Wählt alle Elemente aus, die keine untergeordneten Elemente haben.
16	$("p:empty") Wählt alle mit <p> übereinstimmenden Elemente aus, die keine untergeordneten Elemente haben.
17	$("div[p]") Wählt alle mit <div> übereinstimmenden Elemente aus, die ein mit <p> übereinstimmendes Element enthalten.
18	$("p[.myclass]") Wählt alle mit <p> übereinstimmenden Elemente aus, die ein Element mit einer Klasse von myclass enthalten .
19	$("a[@rel]") Wählt alle mit <a> übereinstimmenden Elemente aus, die ein rel-Attribut haben.
20	$("input[@name = myname]") Wählt alle Elemente aus, die mit <Eingabe> übereinstimmen und deren Namenswert genau meinem Namen entspricht.
21	$("input[@name^=myname]") Wählt alle Elemente aus, die mit <Eingabe> übereinstimmen und deren Name mit myname beginnt .
22	$("a[@rel$=self]") Wählt alle Elemente aus, die mit <a> übereinstimmen relAttributwert, der mit self endet .
23	*$("a[@href=domain.com]")** Wählt alle mit <a> übereinstimmenden Elemente aus, deren href-Wert domain.com enthält.
24	$("li:even") Wählt alle mit <li> übereinstimmenden Elemente aus, die einen geraden Indexwert haben.
25	$("tr:odd") Wählt alle mit <tr> übereinstimmenden Elemente aus, die einen ungeraden Indexwert haben.
26	$("li:first") Wählt das erste <li> -Element aus.
27	$("li:last") Wählt das letzte <li> Element aus.
28	$("li:visible") Wählt alle Elemente aus, die mit <li> übereinstimmen und sichtbar sind.
29	$("li:hidden") Wählt alle Elemente aus, die mit <li> übereinstimmen und ausgeblendet sind.
30	$(":radio") Wählt alle Optionsfelder im Formular aus.
31	$(":checked") Aktiviert alle Kontrollkästchen im Formular.
32	$(":input") Wählt nur Formularelemente aus (Eingabe, Auswahl, Textbereich, Schaltfläche).
33	$(":text") Wählt nur Textelemente aus (Eingabe [Typ = Text]).
34	$("li:eq(2)") Wählt das dritte <li> -Element aus.
35	$("li:eq(4)") Wählt das fünfte <li> -Element aus.
36	$("li:lt(2)") Wählt alle Elemente aus, die mit dem Element <li> vor dem dritten übereinstimmen. Mit anderen Worten, die ersten beiden <li> Elemente.
37	$("p:lt(3)") wählt alle Elemente aus, die mit <p> -Elementen vor dem vierten übereinstimmen; mit anderen Worten die ersten drei <p> Elemente.
38	$("li:gt(1)") Wählt alle Elemente aus, die nach dem zweiten mit <li> übereinstimmen.
39	$("p:gt(2)") Wählt alle Elemente aus, die nach dem dritten mit <p> übereinstimmen.
40	$("div/p") Wählt alle mit <p> übereinstimmenden Elemente aus, die untergeordnete Elemente eines mit <div> übereinstimmenden Elements sind.
41	$("div//code") Wählt alle mit <code> übereinstimmenden Elemente aus, die Nachkommen eines mit <div> übereinstimmenden Elements sind.
42	$("//p//a") Wählt alle mit <a> übereinstimmenden Elemente aus, die Nachkommen eines mit <p> übereinstimmenden Elements sind
43	$("li:first-child") Wählt alle mit <li> übereinstimmenden Elemente aus, die das erste untergeordnete Element des übergeordneten Elements sind.
44	$("li:last-child") Wählt alle mit <li> übereinstimmenden Elemente aus, die das letzte untergeordnete Element des übergeordneten Elements sind.
45	$(":parent") Wählt alle Elemente aus, die einem anderen Element übergeordnet sind, einschließlich Text.
46	$("li:contains(second)") Wählt alle mit <li> übereinstimmenden Elemente aus, die den zweiten Text enthalten.

Sie können alle oben genannten Selektoren generisch mit jedem HTML / XML-Element verwenden. Zum Beispiel wenn Selektor$("li:first") funktioniert dann für das Element <li> $("p:first") würde auch für <p> -Element funktionieren.