Arten von Selektoren in JQuery - Lernen Sie die verschiedenen Arten von JQuery-Selektoren kennen

Inhaltsverzeichnis:

Anonim

Einführung in JQuery Selectors und ihre t

Wenn Sie mit JavaScript arbeiten, befinden Sie sich häufig in einer Situation, in der Sie Inhalte auf der Seite suchen und ändern müssen. In diesen Fällen müssen Sie die Selektorunterstützung in JQuery verwenden. JQuery erleichtert das Auffinden von Elementen der Seite anhand von Typen, Werten, Attributen usw. Diese Elemente basieren auf CSS-Selektoren. Wenn Sie ein wenig geübt haben, werden Sie feststellen, dass das Auffinden von Elementen auf den Seiten ein Kinderspiel ist. Abhängig von ihrer Verwendung können wir verschiedene Typen von JQuery-Selektoren in verschiedene Typen einteilen. Werfen wir einen Blick auf einige der am häufigsten verwendeten Selektoren.

Verwenden eines Selektors

Es folgt eine Syntax eines JQuery-Selektors:

  • $ (Selector) .methodenname ():

Bei Bedarf können Sie mehrere Selektoren verketten, indem Sie zwischen den Methoden ein „.“ Einfügen.

  • $ (Selektor) .methode1 () .methode2 () .methode3 ();

Arten von Selektoren in JQuery

Hier sind die verschiedenen Selektortypen in JQuery

1) Grundlegende JQuery-Selektoren

Wir können Seitenelemente anhand ihrer ID, Klasse oder ihres Tag-Namens auswählen. Bei Bedarf kann auch eine Kombination davon verwendet werden. Im Folgenden sind einige grundlegende Selektoren aufgeführt:

  • : Header-Selektor - Dies ist ein grundlegender Selektortyp, mit dem wir Elemente mit ihren HTML-Überschriften finden können. Dazu verwenden wir den ausführlichen Selektor $ ("section h1, section h2, section h3") oder den viel kürzeren Selektor $ ("section: header").
  • : target Selector - Dieser Selektor findet Ziele der Seite oder des Hashs der URI des Dokuments. Zum Beispiel, wenn der URI auf der Seite "https://example.com/#test" lautet. Dann wählt der Selektor $ (“h2: target”) das Element aus

    .

  • : animierter Selektor - Mit diesem Selektor werden alle Elemente mit Animation gesucht. Beachten Sie, dass die Animation, die ausgewählt werden soll, ausgeführt werden muss, wenn der Selektor ausgeführt wird.

2) Selektoren basierend auf Index

JQuery verfügt über einen eigenen Satz indexbasierter Selektoren, die eine nullbasierte Indexierung verwenden. Es folgen einige Beispiele:

  • : eq (k) Selector - Dieser Selektor gibt das Element am Index k zurück. Es unterstützt auch negative Indexwerte.
  • : lt (k) Selector - Dieser Selektor gibt alle Elemente zurück, deren Index kleiner als k ist. Ebenso wie oben werden auch negative Werte akzeptiert
  • : gt (n) Selektor - Dieser Selektor ist ähnlich: lt (k) Selektor, außer dass er für Indexwerte größer oder gleich k funktioniert.

3) Untergeordnete Selektoren

Mit JQuery können Sie untergeordnete Elemente basierend auf ihrem Typ oder Index auswählen.

  • : first-child - Dieser Selektor gibt alle Elemente zurück, die das erste Kind ihrer Eltern sind.
  • : first-of-type - Mit diesem JQuery-Selektor werden alle Elemente ausgewählt, die das erste Geschwister sind
  • : last-child - Wie der Name schon sagt, wählt dieser Selektor das letzte Kind des Elternteils aus.
  • : last-of-type - Hiermit werden alle untergeordneten Elemente ausgewählt, die in einem übergeordneten Element den letzten Typ haben. Wenn es mehr als ein übergeordnetes Element gibt, werden mehrere Elemente ausgewählt.
  • : only-of-type - Wir können den only-of-type-Selektor verwenden, um alle Elemente auf der Seite zu finden, die Geschwister desselben Typs haben.
  • : only-child - In Situationen, in denen Sie Elemente suchen und auswählen müssen, die das einzige untergeordnete Element des übergeordneten Elements sind, können Sie diesen Selektor verwenden. Wenn ein Elternteil auf der Seite mehr als ein Kind hat, wird es ignoriert.

4) Attributselektoren

Elemente können basierend auf ihren Attributen ausgewählt werden. Es folgen einige gebräuchliche Attributselektoren:

  • $ (“(Attribute | = 'valuehere')”) - Der “Attribut enthält Präfix-Selektor” wählt alle Elemente mit Attributen aus, bei denen der Wert der angegebenen Zeichenfolge entspricht oder mit dieser beginnt, gefolgt von einem Bindestrich.
  • $ (“(Attribute ~ = 'valuehere')”) - Gibt alle Elemente mit Attributen zurück, bei denen der Wert ein bestimmtes Wort enthält, das durch Leerzeichen getrennt ist.
  • $ (“(Attribute * = 'valuehere')”) - Es werden Elemente ausgewählt, bei denen der Wert die angegebene Teilzeichenfolge enthält. Solange der Wert übereinstimmt, spielt der Ort keine Rolle

5) Inhaltsselektoren

Wie der Name schon sagt, werden diese JQuery-Selektoren zum Suchen und Auswählen von Inhalten in Elementen verwendet.

  • : enthält (Text) - Hiermit werden Elemente ausgewählt, in denen ein bestimmter Textinhalt enthalten ist. Beachten Sie bei der Verwendung dieses Selektors, dass bei diesem Test zwischen Groß- und Kleinschreibung unterschieden wird.
  • : has (selector) - Gibt Elemente zurück, die mindestens ein Element enthalten, das dem angegebenen Selektor entspricht. Zum Beispiel wird $ ("section: has (h1)") mit allen Abschnitten zurückgegeben, die ein h1-Element haben.
  • : empty - Dieser Selektor gibt die Elemente der Seite zurück, die keine untergeordneten Elemente enthalten, einschließlich Textknoten.
  • : parent - Mit diesem Selektor werden alle Elemente der Webseite ausgewählt, die mindestens einen untergeordneten Knoten haben. Sie können es als Inverse zum: leeren JQuery-Selektor betrachten.

6) Hierarchieauswähler

  • $ ("Vorfahr-Nachkomme") - Hiermit werden alle Nachkomme-Elemente eines übergeordneten Elements ausgewählt. Der Nachkomme in unserem Fall könnte ein Kind, ein Enkel und so weiter sein.
  • $ ("Parent> child") - Dies wird in Fällen verwendet, in denen nur das direkte Kind eines bestimmten Elternteils ausgewählt werden muss.
  • $ ("Vorherige + Nächste") - Für den Fall, dass wir alle Elemente auswählen müssen, die mit der Auswahl "Nächste" übereinstimmen und die das übergeordnete Element "Vorherige" haben. Die ausgewählten Elemente werden auch sofort von "vorherigen", dem Geschwister, fortgesetzt.

7) Sichtbarkeitsauswahl

Zwei Selektoren: sichtbar und: versteckt sind auch in JQuery verfügbar. Diese können verwendet werden, um sichtbare oder versteckte Elemente auf der Webseite zu finden. Jedes Element auf der Webseite wird als verborgen betrachtet, wenn:

  • Die Anzeige ist ordnungsgemäß auf "Keine" eingestellt.
  • Seine Breite und Höhe sind Null definiert.
  • Es wurde type = hidden im form-Element erwähnt.
  • Alle Vorfahren des Elements sind bereits ausgeblendet.

Denken Sie daran, dass ein Element, für das die Deckkraft auf Null gesetzt ist, weiterhin als sichtbar betrachtet wird, da es immer noch Platz beansprucht.

8) Formularauswahl

Um Zeit und Mühe zu sparen, verfügt JQuery über Sortierversionen von Selektoren für Eingabeelemente von Webformularen.

Zum Beispiel, während $ ("button, input (type = 'button')") funktioniert, um die Schaltfläche auf der Seite auszuwählen, können wir $ (": button") verwenden, um dies schnell zu tun.

Ebenso können wir mit $ (": radio") das Optionsfeld auswählen.

Fazit - Arten von Selektoren in JQuery

Selektoren sind eine der wichtigen Funktionen von JQuery. Die Auswahl in JavaScript ist nicht so intuitiv und robust. Durch das Hinzufügen von Selektoren über JQuery wird die Programmierung für das Web einfacher.

Empfohlene Artikel

Dies ist eine Anleitung zu den Typen von Selektoren in JQuery. Hier diskutieren wir die verschiedenen Arten von JQuery-Selektoren mit der Syntax. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren.

  1. jQuery-Methoden
  2. jQuery-Alternativen
  3. Verwendung von JQuery
  4. Was kann Javascript?
  5. jQuery querySelector
  6. Leitfaden zu JQuery-Fortschrittsbalken-Beispielen