Erklärte jQuery-Selektoren: Klassenselektoren, ID-Selektoren und mehr

jQuery-Selektoren

jQuery verwendet CSS-Selektoren, um Teile oder Elemente einer HTML-Seite auszuwählen. Anschließend können Sie mithilfe von jQuery-Methoden oder -Funktionen etwas mit den Elementen tun.

Um einen dieser Selektoren zu verwenden, geben Sie ein Dollarzeichen und Klammern danach ein : $(). Dies ist eine Abkürzung für die jQuery()Funktion. Fügen Sie in den Klammern das Element hinzu, das Sie auswählen möchten. Sie können entweder einfache oder doppelte Anführungszeichen verwenden. Fügen Sie danach nach den Klammern und der Methode, die Sie verwenden möchten, einen Punkt ein.

In jQuery entsprechen die Klassen- und ID-Selektoren denen in CSS. Lassen Sie uns einen kurzen Überblick darüber geben, bevor wir fortfahren.

ID-Auswahl in CSS

Der CSS-ID-Selektor wendet Stile auf ein bestimmtes HTML-Element an. Der CSS-ID-Selektor muss mit dem ID-Attribut eines HTML-Elements übereinstimmen. Im Gegensatz zu Klassen, die auf mehrere Elemente innerhalb einer Site angewendet werden können, kann eine bestimmte ID nur auf ein einzelnes Element auf einer Site angewendet werden. Die CSS-ID überschreibt die Eigenschaften der CSS-Klasse. Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Hash-Zeichen (#), gefolgt von der ID des Elements.

Syntax

#specified_id { /* styles */ }

Sie können den ID-Selektor mit anderen Arten von Selektoren kombinieren, um ein ganz bestimmtes Element zu formatieren.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Hinweis zu IDs

ID sollte beim Styling nach Möglichkeit vermieden werden. Da es eine hohe Spezifität aufweist und nur überschrieben werden kann, wenn Sie Stile einbinden oder Stile hinzufügen . Das Gewicht der ID überschreibt Klassenselektoren und Typselektoren.

Denken Sie daran, dass der ID-Selektor mit dem ID-Attribut eines HTML-Elements übereinstimmen muss.

Spezifität

ID-Selektoren weisen eine hohe Spezifität auf, was es schwierig macht, sie zu überschreiben. Klassen haben eine viel geringere Spezifität und sind im Allgemeinen die bevorzugte Methode zum Stylen von Elementen, um Spezifitätsprobleme zu vermeiden.

Hier ist ein Beispiel für eine jQuery-Methode, die alle Absatzelemente auswählt und ihnen eine Klasse von "ausgewählt" hinzufügt:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Ok, zurück zu jQuery

In jQuery sind die Klassen- und ID-Selektoren dieselben wie in CSS. Wenn Sie Elemente mit einer bestimmten Klasse auswählen möchten, verwenden Sie einen Punkt ( .) und den Klassennamen. Wenn Sie Elemente mit einer bestimmten ID auswählen möchten, verwenden Sie das Hash-Symbol ( #) und den ID-Namen. Beachten Sie, dass bei HTML nicht zwischen Groß- und Kleinschreibung unterschieden wird. Daher wird empfohlen, HTML-Markup- und CSS-Selektoren in Kleinbuchstaben zu halten.

Auswahl nach Klasse:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Auswahl nach ID:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Sie können auch bestimmte Elemente zusammen mit ihren Klassen und IDs auswählen:

    Auswahl nach Klasse

    Wenn Sie Elemente mit einer bestimmten Klasse auswählen möchten, verwenden Sie einen Punkt (.) Und den Klassennamen.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    Sie können den Klassenselektor auch in Kombination mit einem Tag-Namen verwenden, um genauer zu sein.

      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Auswahl nach ID

    Wenn Sie Elemente mit einem bestimmten ID-Wert auswählen möchten, verwenden Sie das Hash-Symbol (#) und den ID-Namen.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Wie bei der Klassenauswahl kann diese auch in Kombination mit einem Tag-Namen verwendet werden.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Selektoren, die als Filter fungieren

    Es gibt auch Selektoren, die als Filter fungieren - sie beginnen normalerweise mit Doppelpunkten. Der :firstSelektor wählt beispielsweise das Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist. Hier ist ein Beispiel für eine ungeordnete Liste mit einigen Listenelementen. Der jQuery-Selektor unter der Liste wählt den ersten aus

  • Element in der Liste - das Listenelement "Eins" - und verwendet dann die .cssMethode, um den Text grün zu machen.

    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Hinweis: Vergessen Sie nicht, dass das Anwenden von CSS in JavaScript keine gute Vorgehensweise ist. Sie sollten Ihre Stile immer in CSS-Dateien angeben.

    Ein anderer Filter-Selektor :contains(text)wählt Elemente mit einem bestimmten Text aus. Platzieren Sie den Text, den Sie abgleichen möchten, in den Klammern. Hier ist ein Beispiel mit zwei Absätzen. Der jQuery-Selektor nimmt das Wort „Moto“ und ändert seine Farbe in Gelb.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    In ähnlicher Weise :lastwählt der Selektor das Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist. Der JQuery-Selektor unten wählt den letzten aus

  • Original text


  • Element in der Liste - das Listenelement „Drei“ - und verwendet dann die .cssMethode, um den Text gelb zu färben.

    $("li:last").css("color", "yellow");

    Hinweis: Im jQuery-SelektorWorldsteht in einfachen Anführungszeichen, da er sich bereits in zwei doppelten Anführungszeichen befindet. Verwenden Sie immer einfache Anführungszeichen in doppelten Anführungszeichen, um ein unbeabsichtigtes Beenden einer Zeichenfolge zu vermeiden.

    Mehrere Selektoren In jQuery können Sie mehrere Selektoren verwenden, um dieselben Änderungen mit einer einzigen Codezeile auf mehr als ein Element anzuwenden. Sie tun dies, indem Sie die verschiedenen IDs durch ein Komma trennen. Wenn Sie beispielsweise die Hintergrundfarbe von drei Elementen mit den IDs Katze, Hund und Ratte auf Rot setzen möchten, gehen Sie einfach wie folgt vor:

    $("#cat,#dog,#rat").css("background-color","red");

    Dies sind nur einige der Selektoren, die für die Verwendung in jQuery verfügbar sind. Im Abschnitt Weitere Informationen finden Sie einen Link zur vollständigen Liste auf der jQuery-Website.

    Mehr Informationen:

    • Vollständige Liste der jQuery-Selektoren