Was sind JQuery-Selektoren? Einführung in gängige Selektoren in JQuery

Der jquery-Selektor wird zum Suchen von Elementknoten verwendet. Eine der leistungsstärksten und am häufigsten verwendeten Funktionen der $()-Funktion in jQuery ist die Verwendung des Selektors zum Auswählen von DOM-Elementen Werfen wir einen Blick auf die häufig verwendeten Selektoren in jquery. Freunde in Not können einen Blick darauf werfen.

Lassen Sie uns ohne Umschweife direkt zum Text übergehen~

Es gibt vier Hauptkategorien von JQuery-Selektoren, nämlich Basisselektoren, hierarchische Selektoren, Filterselektoren und Formularselektoren diese vier JQuery-Selektoren separat.

1. Der Basisselektor von jQuery

Der Basisselektor ist der am häufigsten verwendete Selektor in JQuery und auch der einfachste Selektor. Er verwendet Element-ID, Klasse und Tag-Namen um DOM-Elemente zu finden.

$("#myELement")	选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一元素
$("div")	选择所有的div标签元素，返回div元素数组
$(".myClass")	选择使用myClass类的css的所有元素
$("*")	选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

$("#myELement ")

Wählen Sie das Element aus, dessen ID-Wert gleich myElement ist. Der ID-Wert darf nicht sein im Dokument wiederholt. Es kann einen ID-Wert von myElement geben, Sie erhalten also das einzige Element

$ ("div")

Wählen Sie alle div-Tag-Elemente aus und kehren Sie zurück ein Array von div-Elementen

Wählen Sie alle Elemente mit CSS der Klasse myClass aus

$("*")

Dokument auswählen Alle Elemente können mit verschiedenen Auswahlmethoden gemeinsam ausgewählt werden: zum Beispiel $("#myELement,div,.myclass")

Hinweis: Die ID kann auf der Webseite nur einmal verwendet werden, d. h. die ID ist eindeutig, die Klasse darf jedoch wiederholt verwendet werden.

2. Hierarchischer Selektor von jquery

Der hierarchische Selektor erhält Elemente durch die hierarchische Beziehung zwischen DOM-Elementen Beziehung.

$("form input")	选择所有的form元素中的input元素
$("#main > *")	选择id值为main的所有的子元素
$("label + input")	选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")	同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

Hinweis: Verkettete Operationen können nur ausgeführt werden, wenn diese Methode ein JQuery-Objekt zurückgibt.

3. Jquery-Filterselektor

Der Filterselektor filtert hauptsächlich die erforderlichen DOM-Elemente durch spezifische Filterregeln. Die Filterregeln sind die gleichen wie die Pseudoregeln in CSS . Die Syntax der Klassenselektoren ist dieselbe, das heißt, die Selektoren beginnen alle mit einem Doppelpunkt (:) (weitere Informationen zu CSS-Pseudoklassenselektoren finden Sie im CSS-Lernhandbuch). Gemäß verschiedenen Filterregeln können Filterselektoren in Basisfilterung, Inhaltsfilterung, Sichtbarkeitsfilterung, Attributfilterung, Unterelementfilterung und Formularfilterung unterteilt werden. Es gibt sechs Arten von Selektoren für Objektattributfilterselektoren. Werfen wir einen kurzen Blick auf die sechs JQuery-Filterselektoren

(1) JQuery-Basisfilterselektor

Der Filterselektor basiert auf einer bestimmten Art von Filterregel. Die Übereinstimmung Die Anzahl der Elemente beginnt beim Schreiben mit (:). Der einfache Filterselektor ist der am weitesten verbreitete Typ von Filterselektoren.

$("tr:first"): Wählen Sie das erste aller tr-Elemente aus

$("tr:last"): Wählen Sie das letzte aller tr-Elemente aus

$("input:not(:checked) + span") : Alle Eingabeelemente des geprüften Selektors herausfiltern

$("tr:even") : Alle tr-Elemente auswählen 0 , 2, 4... Elemente (Hinweis: Da es sich bei den ausgewählten Elementen um Arrays handelt, beginnen die Sequenznummern bei 0)

$("tr:odd"): select Das 1., 3., 5.... Element aller tr-Elemente

$("td:eq(2)"): Wählen Sie das td-Element mit der Seriennummer 2 unter allen td-Elementen aus

$("td:gt( 4)"): Wählen Sie alle td-Elemente mit Sequenznummern größer als 4 im td-Element aus

$("td:ll(4)"): Wählen Sie td-Elemente aus Alle td-Elemente mit Seriennummern kleiner als 4

$(":header"): Übereinstimmende Header-Elemente wie h1, h2, h3. Dies wird speziell zum Abrufen von h1, h2 verwendet. animiert"): Entspricht allen Elementen, die Animationseffekte ausführen

(2) jquery Content Filter Selector

Die Filterregeln des Content Filtering Selectors spiegeln sich hauptsächlich in der wider Unterelemente und darin enthaltene Textinhalte.

$("div:contains('John')"): Alle Elemente auswählen, die John-Text in allen Divs enthalten

$("td:empty"): Alle Elemente auswählen, die leer sind ( Array von td-Elementen (ohne Textknoten)

$("div:has(p)"): Alle div-Elemente auswählen, die p-Tags enthalten

$("td:parent" ) : Wählen Sie alle Elementarrays mit td als übergeordnetem Knoten aus

(3) JQuery-Sichtbarkeitsfilterselektor

Der Sichtbarkeitsfilterselektor basiert auf der sichtbaren Summe des unsichtbaren Elements Zustand, um das entsprechende Element auszuwählen.

$("div:hidden"): Alle ausgeblendeten div-Elemente auswählen

$("div:visible"): Alle sichtbaren div-Elemente auswählen

( 4) Jquery-Attributfilterselektor

Die Filterregel des Attributfilterselektors besteht darin, das entsprechende Element über das Attribut des Elements zu erhalten.

$("div[id]"): Alle div-Elemente auswählen, die ID-Attribute enthalten

$("input[name='newsletter']"): Alle div-Elemente auswählen, deren Namensattribute ist gleich dem Eingabeelement „Newsletter“

$("input[name!='newsletter']"): Wählen Sie alle Eingabeelemente aus, deren Namensattribut nicht gleich „Newsletter“

$ ist ("input [name^='news']"): Alle Eingabeelemente auswählen, deren Namensattribut mit 'news' beginnt

$("input[name$='news']"): Alle Namen auswählen Attribute Eingabeelemente, die mit „news“ enden

$("input[name*='man']"): Wählen Sie alle Eingabeelemente aus, deren Namensattribut „news“ enthält

( 5) Filterauswahl für untergeordnete Elemente von jquery

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$( "ul li:nth-child(3n + 1)"): Entspricht dem N-ten untergeordneten oder gerade-ungerade-Element unter seinem übergeordneten Element. Dieser Selektor ähnelt in gewisser Weise eq() in den zuvor erwähnten Basisfiltern, unterscheidet sich jedoch. Der Unterschied besteht darin, dass ersteres der Fall ist beginnt bei 0 und letzteres beginnt bei 1.

$("div span:first-child"): Gibt ein Array der ersten untergeordneten Knoten aller div-Elemente zurück

$("div span:last-child" ) : Gibt ein Array des letzten Knotens aller div-Elemente zurück

$("div button:only-child"): Gibt ein Array aller untergeordneten Knoten zurück, die in allen divs nur einen untergeordneten Knoten haben

(6) Filterselektor für JQuery-Formularobjektattribute

Dieser Selektor filtert hauptsächlich die ausgewählten Formularelemente.

$(":enabled"): Alle funktionsfähigen Formularelemente auswählen

$(":disabled"): Alle nicht funktionsfähigen Formularelemente auswählen

$(":checked" ): Alle markierten Formularelemente auswählen

$("select option:selected"): Alle ausgewählten Elemente in den untergeordneten Elementen von select auswählen

$("input[@ name =S_03_22]" ).parent().prev().text(): Wählen Sie den Textwert des vorherigen td eines Eingabetextfelds mit dem Namen „S_03_22“

$ („input[@ name ^='S_'] ").not("[@ name $='_R']"): Der Name beginnt mit "S_" und endet nicht mit "_R"

$("input[@ name =radio_01][@checked]").val();: Der ausgewählte Wert eines Radios mit dem Namen radio_01

$(" A B" ): Finden Sie alle untergeordneten Knoten unter dem A-Element, einschließlich indirekter untergeordneter Knoten

$("A>B"): Suchen Sie die direkten untergeordneten Knoten unter dem A-Element

$(" A+ B"): Suchen Sie die Geschwisterknoten hinter dem A-Element, einschließlich indirekter untergeordneter Knoten

$("A~B"): Suchen Sie die Geschwisterknoten hinter dem A-Element, mit Ausnahme indirekter untergeordneter Knoten

4. JQuery-Formularselektor

Mit dem Formularselektor können wir äußerst bequem ein bestimmtes Element oder einen bestimmten Elementtyp des Formulars abrufen.

Hinweis: Hinweis: Die Methode zum Auswählen des ausgeblendeten Werts in der Eingabe entspricht der Verwendung im obigen Beispiel. Wenn Sie jedoch „:hidden“ direkt verwenden, werden alle unsichtbaren Elemente auf der Seite abgeglichen, einschließlich dieser mit einer Breite oder Höhe von 0 .

$(":input"): Alle Formulareingabeelemente auswählen, einschließlich Eingabe, Textbereich, Auswahl und Schaltfläche

$(":text"): Alle Texteingabeelemente auswählen

$(":password"): Alle Passworteingabeelemente auswählen

$(":radio"): Alle Radioeingabeelemente auswählen

$(":checkbox "): Auswählen alle Kontrollkästchen-Eingabeelemente

$(":submit"): Alle Eingabeelemente zum Senden auswählen

$(":image"): Alle Bildeingabeelemente auswählen

$( ":reset"): Alle Reset-Eingabeelemente auswählen

$(":button"): Alle Schaltflächeneingabeelemente auswählen

$(":file "): Alle Dateieingabeelemente auswählen

$(":hidden"): Wählen Sie alle Eingabeelemente vom Typ ausgeblendet oder ausgeblendete Felder des Formulars aus

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere Informationen zum JQuery-Selektor erhalten Sie Weitere Informationen finden Sie im JQuery-Online-Handbuch auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas sind JQuery-Selektoren? Einführung in gängige Selektoren in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!