JQuery - eine Bibliothek von Methoden, die in der Sprache geschrieben sindJavaScript, das die Arbeit mit HTML-Seitenelementen vereinfachen soll. Diese Bibliothek vereinfacht auch die Auswahl dieser Elemente erheblich, da sie eine Reihe von Selektoren unterstützt, von denen die meisten aus CSS entlehnt sind. In diesem Artikel werden wir detailliert auf alle jQuery-Selektoren eingehen und Beispiele für deren Verwendung geben.
CSS und jQuery
Wie oben erwähnt, werden Selektoren in jQuery von CSS ausgeliehen, es gibt hier jedoch einige ABER.
- Erstens unterstützt jQuery nur Selektoren, die DOM-Elemente auswählen, d. H. Sie können nicht mit Ereignisselektoren arbeiten, z. B. Hover und Pseudoelementen der ersten Zeile.
- Zweitens verfügt jQuery über viele andere Selektoren, die Sie in CSS-Regeln nicht gesehen haben. Wenn Sie also bereits alle CSS-Elemente kennen, ist dieser Artikel für Sie weiterhin relevant.
Grundelemente
Diese Selektoren werden am häufigsten verwendet, da dies die einfachste und zuverlässigste Methode zur Auswahl von Elementen ist. Diese Gruppe stimmt vollständig mit den CSS-Selektoren überein:
| Wähler | Auswahlbeschreibung |
| $ ("*") | Alle Elemente auf der Seite fallen in die Auswahl |
| $ ("b") | Elemente mit dem ausgewählten Tag aus dem HTML-Markup fallen in die Auswahl, in diesem Beispiel die Elemente ... |
| $ (". classA") | Elemente mit der angegebenen Klasse fallen in die Auswahl ( ) |
| $ ("# IDone") | Elemente mit der angegebenen ID ( ) fallen in die Auswahl |
Wie in CSS können Sie mehrere auswählenjQuery-Selektoren gleichzeitig. Sie können mit einem Komma geschrieben werden. Verwenden Sie beispielsweise den jquery-Selektor nach Tag-Name und ID - $ ("# IDone, b"). Es ist auch zulässig, über ein Tag + eine Klasse oder ein Tag + eine ID auszuwählen, z. B. $ ("b.classA").
Attributselektoren
Bei Verwendung verschiedener CMS kann dies auftretenEine Situation, in der ein HTML-Markup-Element nicht auf eine ID oder Klasse festgelegt werden kann. Das gleiche Problem tritt bei der Verarbeitung von benutzergenerierten Inhalten auf. Dies wirft das Problem der Auswahl bestimmter Elemente auf, ist jedoch mit der Attributauswahl von jquery leicht zu lösen.
| Wähler | Auswahlbeschreibung |
| $ ("div [Attribut]") | Verarbeitet alle Elemente mit dem angegebenen Attribut, wobei dessen Wert nicht berücksichtigt wird |
| $ ("div [attribute =" value "]") | Bei der Auswahl eines Elements werden dessen Attribut und Wert berücksichtigt |
| $ ("div [attribute! =" value "]") | Wählt das Element aus, für das das angegebene Attribut einen anderen als den angegebenen Wert hat. Elemente, die dieses Attribut nicht haben, fallen ebenfalls in die Auswahl. |
| $ ("div [attribute ^ =" value "]") | Wählt ein Element aus, für das das angegebene Attribut mit der im Wert angegebenen Zeichenfolge beginnt |
| $ ("div [attribute $ =" value "]") | Wählt das Element aus, dessen angegebenes Attribut mit der durch value angegebenen Zeichenfolge endet |
| $ ("div [attribute * =" value "]") | Wählt ein Element aus, dessen angegebenes Attribut die im Wert in einem beliebigen Teil angegebene Zeichenfolge enthält |
| $ ("div [attribute ~ =" value "]") | Wählt ein Element aus, für das das angegebene Attribut das im Wert angegebene Wort enthält (eine Folge von Zeichen ohne Leerzeichen). |
| $ ("div [attribute | =" value "]") | Wählt ein Element aus, dessen angegebenes Attribut mit dem in value angegebenen Wert übereinstimmt, oder beginnt damit, gefolgt von einem Bindestrich |
Sie können Attribute kombinieren, um Ihre Suche nach passenden Elementen einzugrenzen, z. B. $ ("img [width = 500] [height = 260]").
Auswahl der Elemente nach Inhalten
Erforschen Sie den Inhalt von HTML-Seitenelementen undDie Auswahl der gewünschten Version basierend auf den Ergebnissen ist eine einzigartige Funktion von jQuery. Mit einer solchen Technik können Sie beispielsweise einen Abfrage-Selektor für den im Absatz enthaltenen Text erstellen (<p> Text </ p>).
| Wähler | Auswahlbeispiel | Auswahlbeschreibung |
| : enthält () | $ ("p: enthält (" Wert ")") - Wählt alle <p> Absätze aus, die die Zeichenfolge "Wert" enthalten. | Wählt das Element aus, das das angegebene enthältLinie. Das Element ist auch dann in Ordnung, wenn sich die angegebene Zeichenfolge in ihrem untergeordneten Element befindet. Denken Sie daran, dass bei dieser Auswahl zwischen Groß- und Kleinschreibung unterschieden wird, sodass "Text" nicht mit dem angegebenen "TEXT" übereinstimmt. |
| : hast () | $ ("p: has (b)") - Wählt alle <p> -Elemente aus, die <b> enthalten. | Wählt ein Element aus, das ein anderes in Klammern angegebenes Element enthält. Dieser Selektor berücksichtigt auch untergeordnete Elemente. |
| : Elternteil | $ ("p: parent") - wählt alle <p> aus, die etwas enthalten. | Wählt ein Element aus, das etwas enthält |
| : leer | $ ("p: leer") - wählt alle leeren <p> aus. | Wählt ein Element aus, das nichts enthält. |
Jeder der dargestellten Selektoren wählt ein bestimmtes Element aus dem Code in der Abbildung unten aus.
Dieser JQuery-Selektor kann auch mit anderen kombiniert werden. Beispielsweise wählt $ ("p.mail: enthält (" E-Mail ")") alle Absätze mit der Klasse "Mail" aus, die die Zeichenfolge "E-Mail" enthalten.
Auswählen von Mitgliedern nach Hierarchie
Diese Methode ist absolut identisch mit den Selektoren vonCSS. Sie können Elemente basierend auf ihrer Position relativ zu Geschwisterelementen in der DOM-Struktur auswählen. Hier ist es besser, jquery-Selektoren sofort mit Beispielen zu analysieren.
| Auswahlbeispiel | Auswahlbeschreibung |
| $ ("ul> li") | Wählt alle Elemente mit dem <li> -Tag aus, die direkte Nachkommen (untergeordnete Elemente) von <ul> sind |
| $ ("ul a") | Wählt alle mit <a> gekennzeichneten Elemente aus, die Nachkommen einer beliebigen Stufe von <ul> sind |
| $ ("h1 + p") | Wählt das mit <p> gekennzeichnete Geschwisterelement unmittelbar nach <h1> aus |
| $ ("li ~ a") | Wählt das Element mit dem <a> -Tag aus, das unmittelbar auf das <li> folgt. Möglicherweise sind sie hier jedoch keine Geschwister, müssen jedoch einen gemeinsamen Vorfahren haben |
| $ ("li: erstes Kind") | Wählt ein Element mit dem <li> -Tag aus, das das erste untergeordnete Element seines übergeordneten Elements ist, z. B. <ul> |
| $ ("li: letztes Kind") | Wählt ein Element mit dem Tag <li> aus, das das letzte untergeordnete Element seines übergeordneten Elements ist, z. B. <ul> |
| $ ("li: n-tes Kind (3)") | Wählt ein Element mit dem Tag <li> aus, das das dritte untergeordnete Element des übergeordneten Elements ist. Anstelle eines Tripletts können Sie natürlich auch eine andere Zahl verwenden. |
| $ ("li: Einzelkind") | Wählt die Elemente mit dem Tag <li> aus, deren Eltern nur direkte Nachkommen (Kinder) haben. |
Unabhängig davon lohnt es sich, über den jquery li selector zu sprechen:n-tes Kind (n), da Sie damit mehr als bestimmte Zahlen angeben können. Er kann also alle geraden Elemente auswählen, wenn anstelle von n die Konstante gerade oder ungerade angegeben wird, wobei ungerade angegeben wird. Sie können auch einen Ausdruck anstelle von n verwenden, z. B. wählt $ ("li: n-tes Kind (2n + 3)") jedes zweite Element ab dem dritten direkten Kind aus.
Arbeiten mit Formularfeldern
Das Eingabe-Tag weist je nach Typattribut viele verschiedene Variationen auf. JQuery bietet spezielle Selektoren zur Auswahl verschiedener Arten von Eingabefeldern.
| Wähler | Auswahlbeispiel | Auswahlbeschreibung |
| : Taste | $ ("input: button") | Wählt alle Schaltflächen aus |
| : Kontrollkästchen | $ ("Eingabe: Kontrollkästchen") | Kontrollkästchen |
| : Datei | $ ("Eingabe: Datei") | Felder zum Hochladen von Dateien |
| : Bild | $ ("Eingabe: Bild") | Bildeingabefelder |
| : Passwort | $ ("Eingabe: Passwort") | Passwortfelder |
| : Radio | $ ("Eingabe: Radio") | Radio Knöpfe |
| : zurücksetzen | $ ("Eingabe: Zurücksetzen") | Tasten zurücksetzen |
| : einreichen | $ ("input: submit") | Formular-Senden-Schaltflächen |
| : Text | $ ("Eingabe: Text") | Felder für Text |
| : Eingabe | $ (": Eingabe") | Alle Formularfelder |
| : geprüft | $ ("Eingabe: aktiviert") | Markierte Felder in Kontrollkästchen oder Optionsfeldern |
| : ausgewählt | $ ("Option: ausgewählt") | Optionsmenüpunkte |
| : deaktiviert | $ ("Eingabe: deaktiviert") | Deaktivierte Formularfelder |
| : aktiviert | $ ("Eingabe: aktiviert") | Enthaltene Formularfelder |
Positionsauswahl
Der jQuery-Positionswähler ist dem Hierarchieselektor sehr ähnlich. Es wählt ein Element anhand seiner Position aus der Liste der Elemente aus, die der vorherigen Bedingung entsprechen.
| Wähler | Beschreibung |
| : zuerst | Funktioniert mit dem ersten Element aus einer übereinstimmenden Liste |
| : letzte | Mit dem letzten Eintrag aus der Liste |
| : Gleichung (n) | Wählt ein Element aus der Liste anhand seines Index (n) aus. Beachtung! Elemente, die der jQuery-Auswahlbedingung entsprechen, werden von 0 nummeriert! |
| : lt () | Wählt alle Elemente aus der Liste bis zum Element mit dem Index n aus |
| : gt () | Wählt alle Elemente aus der Liste aus, die hinter dem Element mit dem Index n stehen |
| : sogar | Wählt Elemente mit einer geraden Indexnummer aus |
| : seltsam | Wählt Elemente mit einer ungeraden Indexnummer aus |
Andere Selektoren
Diese Selektoren können nicht angehängt werdenjede Gruppe, aber sie sind nicht weniger wichtig. Mit dem Selektor: not (), der als Boolescher Wert bezeichnet werden kann, können Sie beispielsweise eine Bedingung oder einen Teil davon "umdrehen", indem Sie aus ungeeigneten Bedingungen auswählen.
Ebenfalls nützlich ist der versteckte Selektor:, der das 0x0 px-Bildelement erweitert, um den gesamten Bildschirm auszufüllen, z. B. durch Drücken einer Taste.
| Wähler | Beschreibung |
| : nicht () | Wählt Elemente aus, die nicht der in Klammern angegebenen Bedingung entsprechen |
| : animiert | Wählt Elemente aus, die gerade von jQuery animiert werden |
| : versteckt | Wählt Elemente mit Anzeigeeigenschaft aus:none, type = "hidden" und mit einer Höhe und Breite von 0px. Gilt auch für Elemente, die versteckte Elemente enthalten, auf eine der oben genannten Arten. Beachtung! Ein Element mit der Sichtbarkeit "versteckt" wird nicht in die Auswahl der Abfrage aufgenommen |
| : sichtbar | Umgekehrt: versteckt |
| : Header | Wählt die Elemente h1, h2, h3, h4, h5 und h6 aus |
Was ist der beste Weg, um Selektoren zu verwenden?
Website-Optimierung ist eine wichtige Aufgabe, weil vonDie Qualität der Ausführung hängt von der Auslastung des Servers, der Benutzererfahrung sowie der Antwortzeit der Schnittstelle ab. Es gibt viele Bücher über die Optimierung von Skripten in jQuery und JavaScript im Allgemeinen, die jedoch den Rahmen dieses Artikels sprengen. Wir geben nur ein paar einfache Tipps, die die Leistung von Skripten bei der Auswahl von Elementen erheblich verbessern.
- Versuchen Sie, mit einfachen jQuery-Selektoren auszukommen.
- Bei Auswahl mehrerer Elemente zur VerarbeitungVersuchen Sie, sie zu einer Gruppe zusammenzufassen, und wählen Sie nicht jede einzeln aus. Dies kann über eine Klasse oder unter Verwendung spezifischerer Selektoren erfolgen.
- Versuchen Sie, mithilfe der Auswahl nach Position die Liste, aus der die Auswahl getroffen wird, so gering wie möglich zu halten. Dadurch wird die Geschwindigkeit beim Auffinden des gewünschten Elements erheblich verringert.
Ein Beispielskript mit jQuery und seinen Selektoren:
Fazit
Nachdem Sie nun alle Selektoren von jQuery kennen, hoffen wir, dass Ihnen die Beispiele dabei geholfen haben, die gewünschte Bedingung aus mehreren verschiedenen Selektoren zu erstellen.
