Share
Selektoren sind von entscheidender Bedeutung. Die meisten jQuery-Methoden erfordern eine Art Elementauswahl, um von Nutzen zu sein. Zum Beispiel Anhängen eines klicken Bei einem Ereignis auf eine Schaltfläche müssen Sie zuerst die Schaltfläche auswählen.
Da gewöhnliche jQuery-Selektoren auf vorhandenen CSS-Selektoren basieren, sind Sie möglicherweise mit diesen vertraut. Es gibt jedoch auch einige Selektoren, die nicht so häufig verwendet werden. In diesem Tutorial konzentriere ich mich auf diese weniger bekannten, aber wichtigen Selektoren.
Dieser Selektor wird zu Recht als Universalselektor bezeichnet, da er alle Elemente im Dokument einschließlich des Elements auswählt , , >
Accentsconagua
$ ("section *") // Wählt alle Nachkommen aus $ ("section> *") // Wählt alle direkten Nachkommen $ ("section> *> *") // Wählt alle Nachkommen der zweiten Ebene $ ("section> *>) aus * a ") // Wählt Links auf der dritten Ebene ausDieser Wahlschalter ist extrem langsam, wenn er in Kombination mit anderen Elementen verwendet wird. Es hängt jedoch alles davon ab, wie der Selector verwendet wird und in welchem Browser er ausgeführt wird. In Firefox, $ ("# selector> *"). find ("li") ist langsamer als $ ("# selector> ul"). find ("li"). Interessanterweise wird Chrome ausgeführt $ ("# selector> *"). find ("li") etwas schneller. Alle Browser werden ausgeführt $ ("# selector *"). find ("li") langsamer als $ ("# selector ul"). find ("li"). Ich würde vorschlagen, dass Sie die Leistung vergleichen, bevor Sie diesen Wähler verwenden.
Hier ist eine Demo, die die Ausführungsgeschwindigkeit des All-Selektors vergleicht.
Du kannst den ... benutzen : animiert Selektor, um alle Elemente auszuwählen, deren Animation noch läuft, wenn dieser Selektor ausgeführt wird. Das einzige Problem ist, dass nur Elemente ausgewählt werden, die mit jQuery animiert wurden. Dieser Selektor ist eine jQuery-Erweiterung und profitiert nicht von der Leistungssteigerung des nativen Systems querySelectorAll () Methode.
Sie können auch keine CSS-Animationen mit jQuery erkennen. Sie können jedoch erkennen, wann die Animation mit der Endung endet Animationsende Veranstaltung.
Schauen Sie sich die folgende Demo an.
In der obigen Demo nur die ungerade Zahl div Elemente werden vor der Ausführung animiert $ (": animated"). css ("background", "# 6F9");. Als Ergebnis nur die div Elemente werden grün. Gleich danach rufen wir die animierte Funktion für den Rest der div Elemente. Wenn Sie auf klicken Taste jetzt alle div Elemente sollten grün werden.
Übliche Attributselektoren erkennen normalerweise, ob ein Attribut mit einem bestimmten Namen oder Wert vorhanden ist. Auf der anderen Seite die [attr! = "value"] Der Selektor wählt alle Elemente aus, die das angegebene Attribut nicht haben oder bei denen das Attribut vorhanden ist, aber keinem bestimmten Wert entspricht. Es ist äquivalent zu : nicht ([attr = "value"]). nicht wie [attr = "value"] , [attr! = "value"] ist nicht Teil der CSS-Spezifikation. Als Ergebnis verwenden $ ("css-selector"). nicht ("[attr = 'value']") kann die Leistung in modernen Browsern verbessern.
Der Ausschnitt unten fügt ein Nichtübereinstimmung Klasse für alle li Elemente, deren Datenkategorie Attribut ist nicht gleich css. Dies kann beim Debuggen oder beim Festlegen des korrekten Attributwerts mithilfe von JavaScript hilfreich sein.
$ ("li [data-category! = 'css']"). each (function () $ (this) .addClass ("mismatch"); // fügt eine Mismatch-Klasse hinzu, um die Selektoren herauszufiltern. $ (". Mismatch "). attr (" data-category ", attributeValue); // korrekten Attributwert setzen);In der Demo gehe ich zwei Listen durch und korrigiere den Wert der Kategorieattribute von Elementen.
Mit diesem Selektor werden alle Elemente ausgewählt, die die angegebene Zeichenfolge enthalten. Die übereinstimmende Zeichenfolge kann sich direkt im betreffenden Element oder in einem seiner Nachkommen befinden.
Das folgende Beispiel soll Ihnen helfen, diesen Selektor besser zu verstehen. Wir werden allen Vorkommen der Phrase einen gelben Hintergrund hinzufügen Lorem Ipsum.
Beginnen wir mit dem Markup:
Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und daraus ein Musterheft machte. Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert bleibt.
Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen populär gemacht, und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum.
Lorem Ipsum Wikipedia-LinkDiese Lorem Ipsum sollte nicht hervorgehoben werden.
Beachten Sie den Satz Lorem Ipsum tritt an sieben verschiedenen Orten auf. Ich habe in einem dieser Fälle absichtlich Small Caps verwendet, um zu zeigen, dass das Matching die Groß- und Kleinschreibung berücksichtigt.
Hier ist der JavaScript-Code, um alle Übereinstimmungen hervorzuheben:
$ ("Abschnitt: enthält ('Lorem Ipsum')"). each (function () $ (this) .html ($ (this) .html (). ersetzen (/ Lorem Ipsum / g, "Lorem Ipsum")););Die Anführungszeichen um die Zeichenfolge sind optional. Dies impliziert, dass beide $ ("Abschnitt: enthält ('Lorem Ipsum')") und $ ("Abschnitt: enthält (Lorem Ipsum)") wird im obigen Snippet gültig sein. Ich beziehe mich nur auf das Abschnittselement, daher sollte der Lorem-Ipsum-Text in den Listenelementen unverändert bleiben. Darüber hinaus ist der Text aufgrund des nicht übereinstimmenden Falls innerhalb des zweiten Sektion Element sollte auch nicht hervorgehoben werden. Wie Sie in dieser Demo sehen können, passiert genau das.
Dieser Selektor wählt alle Elemente aus, die mindestens ein Element enthalten, das einem bestimmten Selektor entspricht. Die Auswahl, die angepasst werden muss, muss kein direktes Kind sein. :hat() ist nicht Teil der CSS-Spezifikation. In modernen Browsern sollten Sie verwenden $ ("pure-css-selector"). has (Selektor) anstatt $ ("pure-css-selector: has (Selektor)") für verbesserte Leistung.
Eine mögliche Anwendung dieses Selektors ist die Manipulation von Elementen, die ein bestimmtes Element enthalten. In unserem Beispiel werde ich die Farbe aller Listenelemente ändern, die einen Link enthalten.
Dies ist das Markup für die Demo:
Hier ist der JavaScript-Code, um die Farbe der Listenelemente zu ändern:
$ ("li: has (a)"). each (Funktion (Index) $ (this) .css ("color", "crimson"););Die Logik hinter diesem Code ist ziemlich einfach. Ich durchlaufe alle Listenelemente, die einen Link enthalten, und setze deren Farbe auf Purpur. Sie können den Text in den Listenelementen auch bearbeiten oder aus dem DOM entfernen. Ich bin sicher, dass dieser Wahlschalter in vielen anderen Situationen verwendet werden kann. Sehen Sie sich eine Live-Version dieses Codes auf CodePen an.
Neben CSS-Selektoren mögen n-Kind (), jQuery verfügt auch über einen eigenen Satz von indexbasierten Selektoren. Diese Selektoren sind : eq (index), : lt (index), und : gt (index). Im Gegensatz zu CSS-basierten Selektoren verwenden diese Selektoren eine auf Null basierende Indizierung. Dies impliziert das während : n-te Kind (1) wählt das erste Kind aus, : eq (1) wählt das zweite Kind aus. Um das erste Kind auszuwählen, müssen Sie verwenden : eq (0).
Diese Selektoren können auch negative Werte annehmen. Wenn negative Werte angegeben werden, wird ab dem letzten Element rückwärts gezählt.
: lt (index) Wählt alle Elemente aus, deren Index unter dem angegebenen Wert liegt. Um die ersten drei Elemente auszuwählen, verwenden Sie : lt (3). Dies liegt daran, dass die ersten drei Elemente jeweils die Indexwerte 0, 1 und 2 haben. Bei Verwendung eines negativen Index werden alle Werte vor dem Element ausgewählt, das nach dem Rückwärtszählen erreicht wurde. Ähnlich, : gt (index) Wählt alle Elemente mit einem Index aus, der größer als der angegebene Wert ist.
: lt (4) // Wählt die ersten vier Elemente aus: lt (-4) // Wählt alle Elemente außer den letzten 4 aus: gt (4) // Wählt alle Elemente außer den ersten 5 aus: gt (-4) // Wählt die letzten drei Elemente aus : gt (-1) // Wählt nichts aus: eq (4) // Wählt das fünfte Element aus: eq (-4) // Wählt das letzte Element aus
Klicken Sie in der Demo auf verschiedene Schaltflächen, um die Index-Selektoren besser zu verstehen.
jQuery definiert viele Selektoren für die einfache Auswahl von Formularelementen. Zum Beispiel die :Taste Der Selektor wählt alle Schaltflächenelemente sowie Elemente mit der Typschaltfläche aus. Ähnlich, : Ankreuzfeld wählt alle Eingabeelemente mit dem Kontrollkästchen Typ aus. Für fast alle Eingabeelemente sind Selektoren definiert. Betrachten Sie das folgende Formular:
Ich habe hier zwei Textelemente und vier Kontrollkästchen erstellt. Das Formular ist ziemlich einfach, aber es sollte Ihnen eine Vorstellung davon geben, wie Formularselektoren funktionieren. Wir zählen die Anzahl der Textelemente mit :Text Selektor und aktualisieren Sie auch den Text in der ersten Texteingabe.
var textCount = $ (": text"). Länge; $ (". text-elements"). text ('Texteingaben:' + textCount); $ (": text"). eq (0) .val ('Programmatisch hinzugefügt!');ich benutze :Text Wählen Sie alle Texteingaben aus und anschließend die Längenmethode, um deren Anzahl zu berechnen. In der dritten Aussage verwende ich die zuvor diskutierte : eq () Selektor, um auf das erste Element zuzugreifen und später seinen Wert festzulegen.
Beachten Sie, dass ab jQuery 1.5.2, :Text kehrt zurück wahr für Elemente, für die kein Typattribut angegeben ist.
Schauen Sie sich die Demo an.
Wenn Sie jemals alle Überschriftenelemente auf einer Webseite auswählen möchten, können Sie die Kurzform verwenden $ (": header") Version statt der ausführlichen $ ("h1 h2 h3 h4 h5 h6") Wähler. Dieser Selektor ist nicht Teil der CSS-Spezifikation. Infolgedessen könnte eine bessere Leistung erzielt werden, wenn zuerst ein reiner CSS-Selektor und dann ein anderer verwendet wird .filter (": header").
Nehmen Sie zum Beispiel an, dass es eine gibt Artikel Element auf einer Webseite und hat drei verschiedene Überschriften. Nun könnten Sie verwenden $ ("Artikel: Kopfzeile") anstatt $ ("Artikel h1, Artikel h2, Artikel h3") der Kürze halber. Um es noch schneller zu machen, könnten Sie verwenden $ ("Artikel"). Filter (": Header"). Auf diese Weise haben Sie das Beste aus beiden Welten.
Um alle Überschriftenelemente zu nummerieren, können Sie den folgenden Code verwenden.
$ ("article: header"). each (Funktion (Index) $ (this) .text ((index + 1) + ":" + $ (this) .text ()); // fügt den Überschriften Zahlen hinzu );Probieren Sie diese begleitende Demo aus.
In diesem Lernprogramm wurden ungewöhnliche Selektoren beschrieben, auf die Sie bei der Verwendung von jQuery stoßen könnten. Während die meisten dieser Selektoren Alternativen haben, die Sie verwenden können, ist es dennoch gut zu wissen, dass diese Selektoren vorhanden sind.
Ich hoffe, Sie haben in diesem Tutorial etwas Neues gelernt. Wenn Sie Fragen oder Anregungen haben, kommentieren Sie dies bitte.
