Verwendung von jQuery Selectors und CSS Selectors sowie Grundlagen ihrer Funktionsweise

Neulich habe ich jemanden interviewt, der die Front-End-Zertifizierung von freeCodeCamp abgeschlossen hat. Er hatte auch ein ziemlich angesehenes Bootcamp absolviert, in dem die Teilnehmer sechs Wochen lang von 8 bis 20 Uhr codierten. Huch!

Seine Programmierkenntnisse waren großartig, aber ich war überrascht zu sehen, dass seine Kenntnisse in CSS fehlten. Und mit Mangel meine ich, dass er nicht wusste, wie man eine Klasse auswählt, um einen Stil anzuwenden. Dies wirkt sich nicht unbedingt negativ auf ihn aus. Wenn überhaupt, wird hervorgehoben, wie viele Programmierer CSS anzeigen.

Viele Leute halten das Erlernen von CSS für unwichtig, da Designer das CSS normalerweise für Sie implementieren können. Obwohl dies zutrifft, müssen Sie (als Programmierer) häufig einige grundlegende CSS-Kenntnisse haben, um ein Element auszuwählen und es anzuweisen, etwas zu tun, wenn etwas anderes passiert.

Zum Beispiel ist die Green Sock Animation Platform (GSAP) wahrscheinlich zu programmgesteuert, um sich auf Designer zu konzentrieren. Es erfordert einen Entwickler mit CSS- und Programmierkenntnissen.

Ich sage nicht, dass jeder Entwickler ein CSS-Master sein muss. Aber ich denke, wenn Sie sich als Full-Stack-Entwickler bezeichnen wollen, sollten Sie die Grundlagen von CSS kennen. Und die Grundlagen beginnen mit dem Selektor .

Haftungsausschluss: jQuery-Selektoren sind nicht nur für jQuery verfügbar - sie sind tatsächlich CSS-Selektoren. Wenn Sie jedoch so etwas wie ich sind, haben Sie jQuery gelernt, bevor Sie CSS richtig gelernt haben, und daher automatisch Selektoren mit jQuery verknüpft. Obwohl dieser Artikel sich mit CSS-Selektoren befasst, hilft er Ihnen, wenn Sie auch Erläuterungen zu jQuery-Selektoren benötigen.

Der CSS-Selektor

Ich finde es immer hilfreich, mit Code zu spielen. Hier ist ein einfacher CodePen zum Spielen mit einfachen Selektoren.

In HTML gibt es drei Möglichkeiten, Elemente zu kennzeichnen oder zu kategorisieren. Der erste Weg ist der breiteste: nach Tag-Namen. Zum Beispiel können Sie allediv s auf Ihrer Seite mit der einfachen Auswahl auswählen div. Hey, das war einfach!

Der zweite Weg ist wahrscheinlich der, den Sie am häufigsten verwenden: das classAttribut. Sie können nach Klasse auswählen, indem Sie einen Punkt ( .) verwenden. Im obigen Beispiel können Sie also alle auswählenElemente mit Klasse, die sectionich .sectionals Selektor verwende.

Der dritte Weg wird oft überbeansprucht, ist aber immer noch nützlich, und das ist das idAttribut. IDs sollten Ihre Elemente identifizieren, genau wie Ihre SSN (in den USA) Sie als Person identifizieren könnte. Das bedeutet, dass IDs auf der gesamten Seite eindeutig sein sollten. Um ein Element mit einer bestimmten ID auszuwählen, verwenden Sie das Hashtag ( #) oder Octothorpe, wie ich es gerne nenne. Um das Element mit der ID von auszuwählen, verwende otherich #other.

Dies sind die grundlegendsten Selektoren. Um es noch einmal zusammenzufassen:

  • Auswahl nach Tag-Name (kein Präfix)
  • Wählen Sie nach Klassennamen (Präfix von .)
  • Auswahl nach ID (Präfix von #)

Mit diesen drei Selektoren können Sie fast alles auf Ihrer Webseite auswählen.

Quiz 1

  1. Wie würden Sie alle Absatz-Tags auf der Seite auswählen? (Hinweis: Absatz-Tags sind p)
  2. Wie würden Sie alle Artikel mit der Klasse auswählen button-text?
  3. Wie würden Sie das Element mit der ID von auswählen form-userinput?

Fühlen Sie sich frei, Ihre Antworten in den Kommentaren zu teilen!

Müssen alle IDs eindeutig sein?

Dies ist ein kleiner Exkurs, den ich für sehr wichtig halte. Wenn Sie jedoch nur hier sind, um zu lernen, wie Sie Selektoren verwenden, können Sie mit dem nächsten Abschnitt fortfahren

Bei einem Namen wie ID würden Sie davon ausgehen, dass jede HTML-ID eindeutig sein muss, sonst funktioniert Ihr HTML-Dokument nicht. constWenn Sie versuchen, zwei Variablen zu haben , werden Sie von vielen Editoren angeschrien. Würde HTML nicht auch schreien?

Das Problem ist, HTML wird dich nicht anschreien. Tatsächlich wird Ihnen niemand sagen, dass etwas nicht stimmt. Möglicherweise finden Sie einen Fehler, der auf einer nicht eindeutigen ID beruht. Aber Sie werden sich selbst verrückt machen, wenn Sie versuchen, die Grundursache des Fehlers herauszufinden, da es sich um einen sehr subtilen Fehler handelt.

Das obige Beispiel zeigt, warum doppelte IDs ein Problem auf Ihrer Webseite verursachen können. Erstens gibt es tatsächlich zwei divs mit der ID other. Wenn Sie die Stile für kommentieren #other, sehen Sie, dass beide Elemente tatsächlich gestylt werden. Dies könnte Sie denken lassen: "Nun, hey, ich kann IDs und Klassennamen austauschbar verwenden!"

Nicht so schnell. Wenn Sie im JavaScript-Bereich nachsehen, werden Sie feststellen, dass ich bestimmte Elemente anhand ihrer Elementbezeichnung ausgewählt habe: Tag-Name, Klassenname oder ID. Sie werden dies bemerken document.getElementsByTagNameund document.getElementsByClassNameeine Sammlung aller übereinstimmenden HTML-Elemente zurückgeben. document.getElementByIdGibt nur das erste HTML-Element zurück, das mit der passenden ID gefunden werden kann. Sie können dies überprüfen, indem Sie die getVanillaSelectorsFunktion auskommentieren und die Konsole überprüfen.

Wenn Sie die JavaScript- querySelectorAllMethode verwenden (die einen CSS-Selektor als Eingabe verwendet), erhalten Sie ein völlig anderes Ergebnis.

Und nur um sich mit Ihnen anzulegen, macht jQuery trotz einer ähnlichen Syntax etwas anderes querySelectorAll.

Ich habe keine Erklärung für das unterschiedliche Verhalten. Ich kann Ihnen jedoch sagen, wie Sie dies vermeiden können. Hier sind meine Regeln:

  1. Verwenden Sie niemals IDs. Verwenden Sie classstattdessen Attribute.
  2. Wenn ich eine ID verwenden muss, benennen Sie sie so, dass sie auch dann eindeutig ist, wenn ein ähnliches Element auf der Seite vorhanden ist. zum Beispielmenu-item-01

Manchmal müssen Formulare und ihre Eingabefelder IDs haben. In diesem Fall können Sie Regel Nummer 2 folgen. So würde ich ein Formular für die Benutzeranmeldung benennen:

Auf diese Weise haben zwei Formulare auf derselben Seite (sagen wir user-signupund user-signin) garantiert eindeutige IDs. Auch wenn die userID-Felder zwischen den Formularen ähnlich sind.

Selektoren kombinieren

Manchmal schneidet ein einzelner Selektor einfach nicht. Manchmal müssen Sie jeden erhalten div, der einen Klassennamen von hat section. In anderen Fällen benötigen Sie jedes Element mit einem Klassennamen, der sectionein untergeordnetes Element für eine divID ist user-signup. Es gibt viele mögliche andere Auswahlkombinationen.

In diesem Abschnitt lernen Sie drei Möglichkeiten zum Kombinieren von Selektoren kennen, und ich bin zuversichtlich, dass diese 90% Ihrer Anforderungen erfüllen. Wenn Sie feststellen, dass mehr als 11% Ihrer Bedürfnisse nicht erfüllt sind, beschweren Sie sich bei mir und ich werde das bearbeiten, um 89% Ihrer Bedürfnisse zu sagen :).

Beginnen wir nach wie vor mit einem CodePen:

Selektoren für ein einzelnes Element kombinieren

OK, zuerst behandeln wir das Kombinieren von Selektoren für ein einzelnes Element. Dies bedeutet, dass Sie das Element auswählen, dessen Tag-Name xUND-Klassenname yUND-ID lautet z. Natürlich brauchen Sie nicht alle drei, aber Sie können alle drei kombinieren.

Angenommen, wir möchten alle divs mit der Klasse von auswählen item. Dazu kombinieren wir beide : div.item. Es geht von allgemein nach spezifisch von links nach rechts. Das wählt alle divTags aus, die AUCH den Klassennamen haben item. Es ist wichtig zu beachten, dass zwischen und kein Leerzeichen steht . Durch Hinzufügen eines Leerzeichens wird der Selektor vollständig geändert , wie ich im nächsten Abschnitt erläutern werde.div.item

Wenn Sie das entsprechende CSS auskommentieren, sehen Sie, dass das sectionmit dem Klassennamen von itemnicht rot wurde. Das liegt daran, dass es kein divTag ist.

Sie können dasselbe Muster mit Klassennamen und IDs ausführen. Wenn Sie jedoch die ID eines Elements haben, können Sie auch einfach die ID verwenden. Es gibt keinen Grund, eine ID mit einem bestimmten Klassennamen auszuwählen. Wenn Sie die oben genannten ID-Regeln befolgt haben, haben Sie ohnehin nur ein Element mit dieser ID.

Aus Gründen der Parität finden Sie hier ein Beispiel für die Auswahl der divwith-Klasse itemund der ID von other: div.item#other. Wiederum geht es von links nach rechts am allgemeinsten zu spezifischer.

Höchstwahrscheinlich verwenden Sie diese Syntax, um ein Element mit mehreren Klassen auszuwählen. Trennen Sie dazu einfach alle Klassen durch Punkte. Um alle Elemente auszuwählen, die BEIDE Klassen itemund haben section, würden Sie verwenden .item.section. Die Reihenfolge spielt keine Rolle, wenn Sie es auf diese Weise tun, also .section.itemwird es auch funktionieren.

Mit diesem einen Trick können Sie Ihre Selektoren genauer festlegen.

Der "Kind" -Selektor

Die zweite Möglichkeit, Selektoren zu kombinieren, ist die Verwendung des Selektors „Kind“, wie ich ihn gerne nenne. Es gibt zwei Möglichkeiten, dies zu tun, also beginne ich mit der allgemeinsten.

Erstens können Sie wählen jedes Kind eines bestimmten Elements durch einen Raum hinzufügen. Um beispielsweise alle untergeordneten Elemente itemdes #otherElements auszuwählen , wäre dies der Fall #other .item. Beachten Sie den Abstand zwischen den Selektoren.

Zweitens können Sie mit gt; unmittelbare& untergeordnete Elemente eines bestimmten Elements auswählen . Ein „unmittelbares Kind“ eines Elements ist eines, das nur eine Ebene tief ist. Im Beispiel gibt es t wo .iElemente tem enthalten in t he #otihrem Element, aber einer von t he .item Elemente in verpackt a .wrappro Element, so dass man ist kein unmittelbares Kind.

Um Ihnen ein Bild zu geben, sehen Sie Folgendes, wenn Sie alles unter dem #otherElement zusammenklappen:

Diese beiden sind die einzigen direkten Kinder des #otherElements. Um nur das direkte Kind .itemvon #other, die Sie verwenden würden #other > .item, das das direkte Kind würde wählen, b ut nicht denjenigen undernea th .wrappro. Geschickt, was?

Quiz 2

  1. Wie würden Sie alle Absatz-Tags auswählen, die zu sectionElementen gehören ? (Hinweis: Absatz-Tags sind p)
  2. Wie würden Sie alle Elemente mit der Klasse von auswählen button-text, die Nachkommen von Elementen mit der Klasse von sind button?
  3. Wie würden Sie das Element mit der Klasse auswählen, die form-inputein direktes untergeordnetes Element von formElementen ist?
  4. Bonusfrage : Erklären Sie, was dieser Selektor auswählt: header.title > form.user-signup button.button-danger

Nach wie vor können Sie Ihre Antworten in den Kommentaren teilen!

Alles zusammenfügen - im wahrsten Sinne des Wortes

Sie können kombinierte Selektoren kombinieren. Ja wirklich. Die obige Bonusfrage zeigt ein Beispiel dafür, aber ich habe am Ende des Beispielcodepens einige Kombinationen hinzugefügt.

Beispielsweise können Sie mit .items alle s auswählen , die Kinder von divs mit der Klasse parent-itemvon sind div.parent-item .item. Whoa!

Sie können auch direkte Nachkommen auswählen. Wenn Sie beispielsweise alle divs mit einer Klasse von auswählen item, sind dies direkte Nachkommen von divs mit einer Klasse von parent-item: div.parent-item > div.item.

Und schließlich können Sie, um sich mit Ihnen anzulegen, den gesamten DOM-Baum entlang gehen : div.parent-item .coolest-item .item. itemKlasse, die Kind zu coolest-itemKlasse ist, die Kind zu divKlasse ist parent-item.

Beachten Sie, dass es im Allgemeinen keine gute Idee ist, beim Verschachteln von Selektoren über zwei oder drei Tiefenstufen hinauszugehen. Dann geraten Sie in seltsame Bereiche der Spezifität, die Sie effektiver lösen können, indem Sie Ihre CSS-Klassen besser benennen. Aber das liegt außerhalb des Rahmens dieses Artikels. Wenn Sie mehr wissen möchten, lassen Sie es mich wissen und ich werde darüber schreiben.

Bonus: Verwenden Sie Chrome DevTools, um einen Selektor zu erhalten

Mit Chrome DevTools können Sie die Auswahl aller Elemente abrufen, die Sie im DOM auswählen können. Hier ist wie:

  1. Öffnen Sie Chrome DevTools. Da Sie ein Element auswählen, klicken Sie mit der rechten Maustaste auf das Element, das Sie auswählen möchten, und klicken Sie auf "Überprüfen":

2. Klicken Sie mit der rechten Maustaste auf das DOM-Element, das Sie auswählen möchten, und bewegen Sie den Mauszeiger über "Kopieren". Klicken Sie dann auf "Kopierauswahl:".

3. Das war's! Der Selektor, den ich übrigens kopiert habe, ist #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingausgewählt. Sie können den se lector into document.querySelector oder jQuery kopieren und das Element abrufen.

Hoffentlich war dieser Artikel hilfreich! Wenn es Ihnen gefallen hat, geben Sie mir bitte ein paar Klatschen, damit mehr Leute es sehen. Vielen Dank!