Detaillierte Erläuterung der Verwendung von jquery selector_jquery

Der Selektor von jQuery ist äußerst leistungsfähig.

$("#myELement") Wählen Sie das Element aus, dessen ID-Wert gleich myElement ist Im Dokument ist nur ein ID-Wert myElement, Sie erhalten also das einzige Element
$ ("div"), um alle DIV-Tag-Elemente auszuwählen und das DIV-Elementarray
$ (". MyClass" zurückzugeben) ) Wählen Sie die Verwendung der MyClass-Klasse class Alle Elemente von CSS
$("*") Um alle Elemente im Dokument auszuwählen, können Sie verschiedene Auswahlmethoden für die gemeinsame Auswahl verwenden: Zum Beispiel $("#myELement, div,.myclass")

Kaskadierender Selektor:
$("form input") Wählt alle Eingabeelemente in Formularelementen aus.
$("#main > *") Wählt alle untergeordneten Elemente mit aus der ID-Wert von main
$("label input") Wählt den nächsten Eingabeelementknoten aller Labelelemente aus. Nach dem Test gibt der Selektor alle Eingabelabelelemente zurück, denen direkt ein Eingabelabel
$(" folgt. #prev ~ div") Geschwisterselektor, dieser Selektor gibt alle div-Tags zurück, die zum selben übergeordneten Element des Tag-Elements mit der ID prev gehören

Grundlegender Filterselektor:
$("tr:first") Auswählen das erste
$("tr:last") aller tr-Elemente. Wählen Sie das letzte
$("input:not(:checked) span") aller tr-Elemente aus. Filtern Sie
: Alle Eingabeelemente des geprüften Selektors

$("tr:even")                                                                                               kann das 0., 2., 4. ... Element aller tr-Elemente auswählen (Hinweis: Da die ausgewählten Elemente mehrere Elemente enthalten sind Arrays, daher beginnt die Seriennummer bei 0)

$ ("tr: ODD") Wählen Sie das erste, 3, 5 ... ... ein Element aus $("td:eq (2)")                                                                kann das td-Element mit der Seriennummer 2 unter allen td-Elementen auswählen
$ ("td: gt (4)")                                                     kann das td-Element mit der Seriennummer größer als 4 unter den td-Elementen auswählen
$("td:gt(4)")        Element $ ("td: ll (4)") Wählen Sie alle TD-Elemente mit einer Seriennummer im TD-Element kleiner als 4 aus
$ (": Header")
$ ("div: Animated")
Inhaltsfilterauswahl:

$("div:contains('John')") Wählt alle Elemente aus, die John-Text im div $("td:empty") Wählt alle Elemente aus, die leer sind. Array von td-Elementen (ohne Textknoten)
$("div:has(p)") Wählt alle div-Elemente aus, die p-Tags enthalten. Visueller Filter Selektor für das Elementarray
des übergeordneten Knotens:

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

$("div[id]") Alle div-Elemente auswählen, die das ID-Attribut enthalten.
$("input[name='newsletter']" ) Alle Eingabeelemente auswählen, deren Namen Attribut ist gleich '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 Eingabeelemente auswählen, deren Attribute mit ' enden news'
$("input[name*='man']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut 'news' enthält

$("input[id ][name$='man' ]") Sie können mehrere Attribute für die gemeinsame Auswahl verwenden. Dieser Selektor ist ein Filterselektor, um alle Elemente abzurufen, die ID-Attribute enthalten und deren Attribute mit man enden

Unterelemente:

$( "ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)" )

$ ("div span:first-child") Gibt das Array der ersten untergeordneten Knoten aller div-Elemente zurück
$("div span:last-child") Gibt das Array aller div-Elemente zurück Das Array des letzten Knotens
$ ("div button:only-child") Gibt das Array aller untergeordneten Knoten zurück, die in allen divs nur einen untergeordneten Knoten haben

Formularelementselektor:

$(":input")                                                                               kann alle Formulareingabeelemente auswählen, einschließlich Eingabe, Textbereich, Auswahl und                                                                                                             )             Alle Passworteingabeelemente auswählen
$(":radio")                                                                                                  out out out using using „  Alle Eingabeelemente senden
$(":image")                                                                                kann alle Schaltflächeneingabeelemente auswählen
$(":file") Alle auswählen Dateieingabeelemente
$(":hidden") Wählen Sie alle Eingabeelemente vom Typ ausgeblendet oder ausgeblendete Felder aus das Formular

Formularelemente Filterauswahl:

$(":enabled") Alle funktionsfähigen Formularelemente auswählen
$(":disabled") Alle nicht funktionsfähigen Formularelemente auswählen
$ („: markiert“) Alle markierten Formularelemente auswählen
$(“select option:selected“) Alle ausgewählten Elemente in den untergeordneten Elementen von auswählen auswählen



Wählen Sie einen Namen aus Der Text Wert des vorherigen td des Eingabetextfelds von „S_03_22“
$("input[@ name =S_03_22]").parent().prev().text()

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

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


$("A B" ) Finden Sie alle untergeordneten Knoten unter dem A-Element, einschließlich indirekter untergeordneter Knoten
$("A>B") Finden Sie die direkten untergeordneten Knoten unter dem A-Element.
$("A B") Finden Sie die Geschwisterknoten hinter dem A-Element, einschließlich der indirekten untergeordneten Knoten
$("A~ B") Suchen Sie die Geschwisterknoten hinter dem A-Element, ausgenommen indirekte untergeordnete Knoten

1. $("A B") Suchen Sie die Geschwisterknoten unter dem A-Element Alle untergeordneten Knoten, einschließlich indirekter untergeordneter Knoten

Beispiel: Alle Eingabeelemente im Formular finden

HTML-Code:

Name:

                                                                 "newsletter" />

jQuery-Code:

$( "form input")
Ergebnis:

[ , ]

2. $ ("A>B") Finden Sie die direkten untergeordneten Knoten unter dem A-Element.
Beispiel: Passen Sie alle untergeordneten Eingabeelemente im Formular an.

HTML-Code:




Code kopieren


Der Code lautet wie folgt:

Name:

           Newsletter:< /label>        

jQuery-Code:




Code kopieren

Der Code lautet wie folgt:

$(" Formular > Eingabe") Ergebnis:

Code kopieren

Der Code lautet wie folgt:

[ ]

3. $("A B") Suchen Sie die Geschwisterknoten nach dem A-Element, einschließlich indirekter untergeordneter Knoten
Beispiel: Alle Eingabeelemente nach der Beschriftung abgleichen

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Name :

                          < Newsletter" />

< /form>

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$(" Etiketteneingabe")

Ergebnis:

Code kopieren Der Code lautet wie folgt:

[ ,

4. Finden Sie die Geschwisterknoten nach dem A Element, ausgenommen nicht direkter untergeordneter Knoten
Beispiel: Alle Eingabeelemente finden, die Geschwister der Form

HTML-Code sind:

Code kopierenDer Code lautet wie folgt:

Name:

< ;fieldset>
                                                                            



jQuery-Code:

Code kopieren

Der Code lautet wie folgt: $(" form ~ input")

Ergebnis:

Code kopieren

Der Code lautet wie folgt:[ ]