Bei der Dom-Programmierung können wir nur begrenzte Funktionen verwenden, um Dom-Objekte basierend auf ID oder TagName abzurufen. In jQuery ist dies jedoch völlig anders. jQuery bietet äußerst leistungsstarke Selektoren, die uns beim Abrufen von Objekten auf der Seite und beim Konvertieren der zurückgegebenen Objekte helfen als jQuery-Wrapper-Set. In diesem Artikel werden hauptsächlich häufig verwendete jQuery-Selektoren vorgestellt und kategorisiert.
jQuery-Selektoren können grob in 4 Kategorien unterteilt werden: Basisselektoren, hierarchische Selektoren, Filterselektoren und Formularselektoren.
Die Filterselektoren können unterteilt werden in: einfache Filterselektoren, Inhaltsfilterselektoren, Sichtbarkeitsfilterselektoren, Attributfilterselektoren, Filterselektoren für untergeordnete Elemente und Filterselektoren für Formularobjektattribute.
Basisselektor:
$("#myELement") Wählen Sie das Element aus, dessen ID-Wert mit myElement übereinstimmt. Der ID-Wert kann nicht wiederholt werden. Es darf nur ein ID-Wert myElement im Dokument vorhanden sein, sodass Sie das einzige Element
erhalten
$("div") Wählt alle div-Tag-Elemente aus und gibt ein Array von div-Elementen
zurück
$(".myClass") Wählen Sie alle Elemente mithilfe von CSS der Klasse myClass aus
$("*") Alle Elemente im Dokument auswählen[/code]
Für die gemeinsame Auswahl können Sie verschiedene Auswahlmethoden verwenden: zum Beispiel $("#myELement,div,.myclass")
Kaskadierungsselektor:
$("form input") Alle Eingabeelemente in Formularelementen auswählen
$("#main > *") Wählen Sie alle untergeordneten Elemente mit dem ID-Wert main
aus
$("label input") Wählen Sie den nächsten Eingabeelementknoten aller Labelelemente
aus
Der getestete Selektor gibt alle Eingabe-Tag-Elemente
zurück, denen direkt ein Eingabe-Tag nach dem Label-Tag 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
Grundlegende Filterauswahl:
$("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")
Herausfiltern: alle Eingabeelemente des überprüften Selektors
$ ("TR: EVEN") Wählen Sie die 0, 2, 4 ... ... persönlichen Elemente aller TR-Elemente aus (Hinweis: Da die ausgewählten Elemente bei der Auswahl das Array sind, beginnt die Seriennummer bei 0.)
$("tr:odd") Wählen Sie das 1., 3., 5.... Element aller tr-Elemente
aus
$("td:eq(2)") Wählen Sie unter allen td-Elementen
das td-Element mit der Seriennummer 2 aus
$("td:gt(4)") Wählen Sie alle td-Elemente mit Sequenznummern größer als 4
aus
$ („TD: LL (4)“) Wählen Sie alle TD-Elemente mit einer Seriennummer kleiner als 4 im TD-Element
aus
$(":header")
$("div:animated")
Inhaltsfilterauswahl:
$("div:contains('John')") Wählt alle Elemente aus, die John-Text in divs enthalten
$("td:empty") Wählt ein Array aller td-Elemente aus, die leer sind (ohne Textknoten)
$("div:has(p)") Wählt alle div-Elemente aus, die p-Tags
enthalten
$("td:parent") Wählen Sie alle Elementarrays mit td als übergeordnetem Knoten aus
Visuelle Filterauswahl:
$("div:hidden") Alle ausgeblendeten div-Elemente auswählen
$("div:visible") Wählt alle sichtbaren div-Elemente
aus
Attributfilterauswahl:
$("div[id]") Wählen Sie alle div-Elemente aus, die das id-Attribut enthalten
$("input[name='newsletter']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut gleich 'newsletter'
ist
$("input[name!='newsletter']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut nicht gleich 'newsletter'
ist
$("input[name^='news']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut mit 'news'
beginnt
$("input[name$='news']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut mit 'news' endet
$("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 ruft alle Elemente ab, die das id-Attribut enthalten, und das Attribut endet mit man
Filterauswahl für untergeordnete Elemente:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)")
$("div span:first-child") Gibt ein Array der ersten untergeordneten Knoten aller div-Elemente
zurück
$("div span:last-child") Gibt das 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
Formularelementauswahl:
$(":input") Wählen Sie alle Formulareingabeelemente aus, einschließlich Eingabe, Textbereich, Auswahl und Schaltfläche
$(":text") Alle Texteingabeelemente auswählen
$(":password") Wählen Sie alle Passworteingabeelemente aus
$(":radio") Alle Radio-Eingabeelemente auswählen
$(":checkbox") Alle Checkbox-Eingabeelemente auswählen
$(":submit") Alle Submit-Eingabeelemente 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ählt alle Eingabeelemente oder ausgeblendeten Felder des Formulars aus, die vom Typ ausgeblendet
sind
Filterauswahl für Formularelemente:
$(":enabled") Alle bedienbaren Formularelemente auswählen
$(":disabled") Alle nicht funktionsfähigen Formularelemente auswählen
$(":checked") Alle markierten Formularelemente auswählen
$("select option:selected") Wählt die ausgewählten Elemente unter allen ausgewählten untergeordneten Elementen
aus
