Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des jQuery-Filters selector_jquery

Detaillierte Erläuterung des jQuery-Filters selector_jquery

WBOY
WBOYOriginal
2016-05-16 16:20:271147Durchsuche

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn