简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Jquery: leistungsstarke Selektoren

Jquery: leistungsstarke Selektoren

高洛峰
高洛峰Original
2016-12-17 16:01:181275Durchsuche

Jquery-Selektoren sind in Basisselektoren, hierarchische Selektoren, Filterselektoren und Formularselektoren unterteilt. Diese vier Selektoren werden im Folgenden einzeln vorgestellt.

1. Basisselektoren

Die meisten davon sind Basisselektoren. Zu den grundlegenden Selektoren gehören der ID-Selektor, der Klassenselektor, der Etikettenselektor, der zusammengesetzte Selektor und der „*“-Selektor.

$("#id") Wählt alle Elemente aus, deren Attribut-ID gleich „id“ ist.

$(".class_1") Wählt alle Elemente mit der Attributklasse „class_1“ aus.

$("p") wählt alle

-Elemente aus.

$("div,span,p.myClass") wählt eine Gruppe von Elementen aller

-, -Tags mit der Attributklasse "myClass" aus.

$("*") wählt alle Elemente aus.

2. Hierarchischer Selektor

Wenn Sie bestimmte Elemente basierend auf der hierarchischen Beziehung zwischen Elementen erhalten möchten, können Sie einen hierarchischen Selektor verwenden.

$("div p") wählt alle

-Elemente in

aus. Dieser Selektor ruft alle untergeordneten Elemente ab, nicht die Elemente der nächsten Ebene (d. h. untergeordnete Elemente).

$("div>p") wählt alle Tags in

als

$(".class_1+div") Wählt das nächste

aus, dessen Attributklasse „class_1“ ist.

$(".class_1").next("div") Der Effekt ist der gleiche wie oben.

$(".class_1~div") wählt alle

gleichgeordneten Elemente hinter dem Element aus, dessen Attributklasse „class_1“ ist.

$(".class_1").nextAll("div") Der Effekt ist der gleiche wie oben.

$(".class_1").siblings("div") Der Unterschied zu den beiden oben genannten Selektoren besteht darin, dass dieser Selektor nicht zwischen Vorher und Nachher unterscheidet. Er wählt alle

-Elemente derselben Generation aus .

3. Filterselektoren

Filterselektoren beginnen alle mit einem Doppelpunkt (:). Filterselektoren können in Basisfilterung, Inhaltsfilterung, Sichtbarkeitsfilterung, Attributfilterung und untergeordnete Elemente unterteilt werden und Filterselektoren für Formularobjekteigenschaften.

1. Grundlegender Filterselektor

$("div:first") wählt das erste

-Element aus.

$("div:last") wählt das letzte

-Element aus.

$("input:not(.class_1)") Wählt -Elemente aus, deren Attributklasse nicht „class_1“ ist.

$("input:even") wählt das -Element aus, dessen Index gerade ist.

$("input:odd") wählt das -Element aus, dessen Index ungerade ist.

$("input:eq(1)") Wählt das -Element mit dem Index gleich 1 aus.

$("input:gt(1)") Wählt -Elemente mit einem Index größer als 1 aus. (Hinweis: größer als 1, nicht einschließlich 1)

$("input:lt(1)") Wählt -Elemente mit einem Index kleiner als 1 aus. (Hinweis: weniger als 1, nicht einschließlich 1)

$(":header") wählt alle

,

,

... auf der Webseite aus.

$("div:animated") wählt das

-Element aus, das die Animation ausführt.

$(":focus") wählt das Element aus, das gerade den Fokus erhält.

2. Inhaltsfilterselektor

$("div:contains('I')") Wählt das

-Element aus, das den Text „I“ enthält.

$("div:empty") wählt das leere Element

aus, das keine untergeordneten Elemente (einschließlich Textelemente) enthält.

$("div:has(p)") wählt das

-Element aus, das das

-Element enthält.

$("div:parent") wählt

-Elemente aus, die untergeordnete Elemente haben (einschließlich Textelemente).

3. Sichtbarkeitsfilterauswahl

$(":hidden") wählt alle unsichtbaren Elemente aus, $("input:hidden") wählt alle unsichtbaren

$("div:visible") wählt alle sichtbaren

4. Attributfilterselektor

$("div[id]") wählt das

-Element aus.

$("div[title=text]") Wählt das

-Element aus, dessen Attributtitel „text“ ist.

$("div[title!=text]") Wählt

-Elemente aus, deren Attribut title nicht gleich „text“ ist. (Hinweis:
-Elemente ohne den Attributtitel werden ebenfalls ausgewählt)

$("div[title^=text]") Wählen Sie das

-Element aus, dessen Attributtitel mit „text“ beginnt. .

$("div[title$=text]") wählt das

-Element aus, dessen Attributtitel mit „text“ endet.

$("div[title*=text]") Wählt das

-Element aus, das „text“ im Attributtitel enthält.

$('div[title|="text"]') Wählt das

-Element aus, dessen Attributtitel gleich „text“ ist oder dem „text“ vorangestellt ist. (Hinweis: Das Präfix bedeutet, dass der Zeichenfolge ein „-“ folgt.)

$('div[title~="text"]') Wählt Elemente aus, deren Attributtitel das Zeichen „text“ im durch Leerzeichen getrennten Wert enthält.

$("div[id][title$='text']") Wählt das

-Element aus, das das Attribut id hat und dessen Attributtitel mit „text“ endet.

5. Filterselektor für untergeordnete Elemente

$("div.one:nth-child(2)") wählt das

unter dem übergeordneten Element mit der Attributklasse „one“ aus zweites untergeordnetes Element.

$("div.one:first-child(2)") Wählt das erste untergeordnete Element unter dem übergeordneten Element

mit der Attributklasse „one“ aus.

$("div.one:last-child(2)") Wählt das letzte untergeordnete Element unter dem übergeordneten Element

aus.

$("div.one:first-child(2)") Wenn sich unter dem übergeordneten Element

nur ein untergeordnetes Element mit der Attributklasse „one“ befindet, wählen Sie dieses untergeordnete Element aus.

6. Filterselektor für Formularobjektattribute

$("#form1 input:enabled") wählt die im Formular verfügbaren

$("#form1 input:disabled") Wählt das -Element aus, das im Formular nicht verfügbar ist.

$("input:checked") Aktivieren Sie das ausgewählte Kontrollkästchen.

$("select:selected") Wählen Sie das ausgewählte Element im Dropdown-Feld aus.

(Hinweis: Wenn Sie im Element das Attribut „disabled“ auf „disabled“ setzen, kann dieses Element nicht verfügbar sein)

4. Formularauswahl

$(":input") Wählt aus Alle -,