Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des jQuery-Filters selector_jquery
Filterauswahl
Der Filterselektor filtert hauptsächlich die erforderlichen DOM-Elemente durch spezifische Filterregeln heraus. Die Selektoren beginnen alle mit „:“
Gemäß verschiedenen Filterregeln können Filterselektoren in Basisfilterung, Inhaltsfilterung, Sichtbarkeitsfilterung, Attributfilterung, Unterelementfilterung und Filterselektoren für Formularobjektattribute unterteilt werden.
Grundlegende Filterauswahl
Einfaches Beispiel für die Filterauswahl
Ändern Sie die Hintergrundfarbe des ersten div-Elements in #bbffaa
Ändern Sie die Hintergrundfarbe des letzten div-Elements in #bbffaa
Ändern Sie die Hintergrundfarbe aller div-Elemente, deren Klasse keine ist, in #bbffaa
Ändern Sie die Hintergrundfarbe des div-Elements mit einem geraden Indexwert in #bbffaa
Ändern Sie die Hintergrundfarbe von div-Elementen mit ungeraden Indexwerten in #bbffaa
Ändern Sie die Hintergrundfarbe von div-Elementen mit Indexwerten größer als 3 in #bbffaa
Ändern Sie die Hintergrundfarbe des div-Elements mit einem Indexwert von 3 in #bbffaa
Ändern Sie die Hintergrundfarbe von div-Elementen mit Indexwerten unter 3 in #bbffaa
Ändern Sie die Hintergrundfarbe aller Titelelemente in #bbffaa
Ändern Sie die Hintergrundfarbe aller derzeit animierten Elemente in #bbffaa
Inhaltsfilterauswahl
Die Filterregeln des Inhaltsfilterselektors spiegeln sich hauptsächlich in den darin enthaltenen Unterelementen und Textinhalten wider
Beispiel für eine Inhaltsfilterauswahl
Ändern Sie die Hintergrundfarbe des div-Elements, das den Text „di“ enthält, in #bbffaa
Ändern Sie die Hintergrundfarbe leerer div-Elemente, die keine untergeordneten Elemente (oder Textelemente) enthalten, in #bbbfaa
Ändern Sie die Hintergrundfarbe des div-Elements, das das Klassenminielement enthält, in #bbffaa
Ändern Sie die Hintergrundfarbe des div-Elements, das untergeordnete Elemente (oder Textelemente) enthält, in #bbffaa
Sichtbarkeitsfilterauswahl
Der Sichtbarkeitsfilterselektor wählt die entsprechenden Elemente basierend auf ihrem sichtbaren und unsichtbaren Status aus
Sichtbarer Selektor: Ausgeblendet umfasst nicht nur Elemente, deren Stilattributanzeige „none“ ist, sondern auch Elemente wie ausgeblendete Textfelder () und sichtbar:ausgeblendet
Beispiel für die Sichtbarkeitsfilterauswahl
Ändern Sie die Hintergrundfarbe aller sichtbaren div-Elemente in #bbffaa
Wählen Sie alle unsichtbaren Elemente aus, verwenden Sie die Methode show() in jQuery, um sie anzuzeigen, und setzen Sie ihre Hintergrundfarbe auf #bbbfaa
Wählen Sie alle ausgeblendeten Textfelder aus und drucken Sie ihre Werte aus
Attributfilterauswahl
Die Filterregel des Attributfilterselektors besteht darin, das entsprechende Element über das Attribut des Elements zu erhalten
Beispiel für eine Attributfilterauswahl
Wählen Sie die folgenden Elemente aus und ändern Sie ihre Hintergrundfarbe in #bbffaa
Ein div-Element, das den Attributtitel enthält.
Ein div-Element, dessen Attributtitelwert gleich „test“ ist.
Teilen Sie Elemente, deren Attributtitelwert nicht gleich „test“ ist (solche ohne Attributtitel werden ebenfalls ausgewählt).
Ein div-Element, dessen Attributtitelwert mit „te“ beginnt.
Ein div-Element, dessen Attributtitelwert mit „est“ endet.
Ein div-Element, dessen Attributtitelwert „es“ enthält.
Wählen Sie das div-Element mit der Attribut-ID aus und wählen Sie dann das div-Element mit dem Attributtitelwert aus, der in den Ergebnissen „es“ enthält.
Filterauswahl für untergeordnete Elemente
nth-child()-Selektor wird im Detail wie folgt erklärt:
(1) :nth-child(even/odd): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element eine gerade (ungerade) Zahl ist
(2):nth-child(2): Kann das Element mit dem Indexwert 2 unter jedem übergeordneten Element auswählen
(3):nth-child(3n): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element ein Vielfaches von 3 ist
(3):nth-child(3n 1): Kann unter jedem übergeordneten Element das Element auswählen, dessen Indexwert 3n 1 ist
Beispiel für die Filterauswahl für untergeordnete Elemente
Wählen Sie die folgenden Elemente aus und ändern Sie ihre Hintergrundfarbe in #bbffaa
Das zweite untergeordnete Element unter dem übergeordneten Element jedes Div mit Klasse eins.
Das erste untergeordnete Element unter dem übergeordneten Element jedes Div mit Klasse eins
Das letzte untergeordnete Element unter dem übergeordneten Element jedes Div mit Klasse eins
Wenn es nur ein untergeordnetes Element unter dem übergeordneten div-Element mit Klasse eins gibt, wählen Sie dieses untergeordnete Element aus
Filterauswahl für Formularobjektattribute
Dieser Selektor filtert hauptsächlich die ausgewählten Formularelemente
Beispiel für die Filterauswahl für Formularobjektattribute
Verwenden Sie die val()-Methode des jQuery-Objekts, um den Wert der verfügbaren -Elemente zu ändern. Verwenden Sie die val()-Methode des jQuery-Objekts, um den Wert der nicht verfügbaren -Elemente zu ändern in der Form
Verwenden Sie die Längeneigenschaft des jQuery-Objekts, um die Anzahl der ausgewählten Mehrfachauswahlfelder abzurufen
Verwenden Sie die text()-Methode des jQuery-Objekts, um den im Dropdown-Feld ausgewählten Inhalt abzurufen
Formularauswahl
Das Obige dreht sich alles um den jQuery-Filterselektor. Ich hoffe, dass es meinen Freunden hilfreich sein wird.