Ein umfassender Blick auf JQuery -Selektoren

Dieser Artikel profitierte von Peer Review von Matt Smith und Tim Severien. Vielen Dank an die Peer -Rezensenten von SitePoint für die Verbesserung der Inhaltsqualität!

Elemente auswählen ist für die Manipulation von Webseiten mit JQuery von grundlegender Bedeutung. Unabhängig davon, ob Sie Inhalte ändern, Ereignisse anfügen oder andere Aktionen ausführen, müssen Sie zuerst die richtigen Elemente ansprechen. In diesem Tutorial wird JQuery Selectors, eine Schlüsselkomponente der Bibliothek, untersucht.

Schlüsselkonzepte

• jQuery -Selektoren sind für die Ausrichtung auf Webseitenelemente für die Manipulation von Inhalten, den Ereignisanhang und mehr unerlässlich. Diese Selektoren verwenden Kriterien wie IDs, Klassen, Attribute oder Kombinationen davon.
• jQuery bietet eine breite Palette von Selektoren, einschließlich grundlegender, indexbasiertes, untergeordnetes, Attribut-, Inhalts-, Hierarchie-, Formular- und Sichtbarkeitsauswahl. Jeder Typ bietet eindeutige Auswahlfunktionen basierend auf bestimmten Bedingungen und Parametern.
• Verbesserungen in JQuery 3 verbesserten die Geschwindigkeit von benutzerdefinierten Selektoren wie :visible und :hidden (in einigen Fällen bis zu 17x schneller). Die Sichtbarkeit wird nun durch das Vorhandensein eines Layoutboxs von getClientRects.
bestimmt
• Caching ausgewählte Elemente steigert die Leistung, insbesondere bei zahlreichen Selektoren. Das Speichern der Auswahl in Variablen reduziert redundante DOM -Scans.
• Während viele JQuery -Selektoren CSS -Selektoren spiegeln, enthält JQuery auch seine eigenen benutzerdefinierten Selektoren für prägnantere und effizientere Elementauswahl.

JQuery Selektoren im Detail

jQuery -Selektoren identifizieren in erster Linie Elemente basierend auf Kriterien wie ID, Klasse, Attributen oder Kombinationen. Viele basieren auf CSS -Selektoren, aber JQuery erweitert die Funktionalität mit benutzerdefinierten Selektoren.

Grundlegende Selektoren

Elemente nach ID ($("#id")), Klasse ($(".class")) oder Tagname ($("li")) auswählen. Kombinieren Sie diese (z. B. $(".class tag")) oder verwenden Sie mehrere durch Kommas getrennte Selektoren (z. B. $("selectorA, selectorB, selectorC")).

Zusätzliche grundlegende Selektoren:

• :header: Wählt alle Überschriften aus (<h1></h1> bis <h6></h6>). Prägnanter als einzeln einzeln jedes Überschriften -Tag aufzulisten.
• :target: Wählt das Element aus, dessen ID mit der Url -Fragment -Kennung übereinstimmt (z. B. https://example.com/#myElement).
• :animated: Wählt Elemente aus, die derzeit eine Animation unterzogen werden (erfordert das JQuery Effects -Modul).

indexbasierte Selektoren

jQuery bietet Zero-basierte Indexauswahlern:

• :eq(n): Wählt das Element bei Index n (unterstützt positive und negative Indizes).
• :lt(n): Wählt Elemente mit einem Index von weniger als n.
aus
• :gt(n): Wählt Elemente mit einem Index aus, der größer oder gleich n.
• :first: Wählt das erste übereinstimmende Element aus.
• :last: Wählt das zuletzt übereinstimmende Element aus.
• :even: Wählt Elemente mit ebenen Indizes aus (0, 2, 4 ...).
• :odd: Wählt Elemente mit ungeraden Indizes aus (1, 3, 5 ...).

Interaktive Demo-Präsentation indexbasierter Selectoren

Child Selektoren

Diese Selektoren zielen auf Kinder an, basierend auf Index oder Typ:

• :first-child: Wählt das erste Kind jedes Elternteils aus.
• :first-of-type: Wählt das erste Geschwister seines Typs aus.
• :last-child: Wählt das letzte Kind jedes Elternteils aus.
• :last-of-type: Wählt das letzte Geschwister seines Typs aus.
• :nth-child(n): Wählt das N -te Kind aus (unterstützt verschiedene Ausdrücke wie Zahlen, even, odd, Formeln).
• :nth-last-child(n): Ähnlich wie :nth-child, zählt aber vom letzten Kind.
• :nth-of-type(n): Wählt das N -te Geschwister seines Typs aus.
• :nth-last-of-type(n): Ähnlich wie :nth-of-type, zählt aber vom letzten Geschwister.
• :only-child: Wählt Elemente aus, die das einzige Kind ihres Elternteils sind.
• :only-of-type: Wählt Elemente ohne Geschwister desselben Typs aus.

Interaktive Demo, die untergeordnete Selektoren zeigt

Attributausselungse

Elemente basierend auf Attributwerten auswählen:

• [attribute="value"]: Wählt Elemente mit dem genauen Attributwert aus.
• [attribute^="value"]: Wählt Elemente aus, deren Attributwert mit "Wert" beginnt.
• [attribute$="value"]: Wählt Elemente aus, deren Attributwert mit "Wert" endet.
• [attribute*="value"]: Wählt Elemente aus, deren Attributwert "Wert" enthält.
• [attribute|="value"]: Wählt Elemente aus, deren Attributwert gleich ist oder mit "Wert" gefolgt von einem Bindestrich.
• [attribute~="value"]: Wählt Elemente aus, deren Attributwert "Wert" als speicherns getrenntes Wort enthält.
• [attribute!="value"]: Wählt Elemente ohne Attribut oder mit einem anderen Wert aus.
• [attribute]: Wählt Elemente mit dem angegebenen Attribut unabhängig vom Wert aus.

Inhaltsauswahlern

Diese Selektoren zielen auf Elemente basierend auf ihrem Inhalt ab:

• :contains(text): Wählt Elemente aus, die den angegebenen Text enthalten (fallempfindlich).
• :has(selector): Wählt Elemente aus, die mindestens ein Element enthalten, das dem bereitgestellten Selektor entspricht.
• :empty: Wählt Elemente ohne Kinder aus.
• :parent: Wählt Elemente mit mindestens einem Kind aus.

Hierarchie -Selektoren

Diese Selektoren verwenden die DOM -Hierarchie:

• ancestor descendant: Wählt alle Nachkommen des Vorfahrelements aus.
• parent > child: Wählt direkte Kinder des übergeordneten Elements aus.
• prev next: Wählt das nächste Geschwister des prev Elements aus.
• prev ~ siblings: Wählt alle nachfolgenden Geschwister des prev Elements aus.

Formularauswahlern

vereinfachte Selektoren für Formularelemente:

• :button: Wählt Tastelelemente aus.
• :checkbox: Wählt Checkbox -Elemente aus.
• :radio: Wählt Optionsknopf Elemente.
• :text: Wählt Texteingangselemente aus.
• :password: Wählt Kennworteingangselemente aus.
• :submit: Wählt die Schaltflächenelemente der Sendung aus.
• :reset: Wählt die Schaltflächenelemente der Reset -RESET.
• :image: Wählt Bildschaltflächenelemente aus.
• :file: Wählt Dateieingabeelemente aus.
• :hidden: Wählt verborgene Formularelemente aus.
• :enabled: Wählt aktivierte Formularelemente aus.
• :disabled: Wählt deaktivierte Formularelemente aus.
• :checked: Wählt checkte Kontrollkästchen und Optionsschaltflächen sowie ausgewählte Optionen aus.
• :selected: Ausgewählte Optionen in <select></select> Elementen.

Sichtbarkeitsauswahl

• :visible: Wählt sichtbare Elemente aus.
• :hidden: Wählt versteckte Elemente aus.

jQuery 3 Änderungen

jQuery 3 führte Leistungsverbesserungen für :visible und :hidden ein und verfeinerte die Definition der Sichtbarkeit. Die Fehlerbehandlung für ungültige Selektoren wurde ebenfalls verbessert.

zwischen Leistung

zwischengewählte Elemente verbessert die Leistung, indem wiederholte DOM -Scans vermieden werden. Speichern Sie die Auswahl in Variablen zur Wiederverwendung.

Schlussfolgerung

Dieses Tutorial umfasst die JQuery -Selektoren umfassend. Denken Sie daran, das Caching für eine optimale Leistung zu verwenden. Das Verständnis dieser Selektoren ist für eine effektive jQuery -Entwicklung von entscheidender Bedeutung.

häufig gestellte Fragen (FAQs)

Der FAQS-Abschnitt aus der ursprünglichen Eingabe ist bereits gut strukturiert und umfassend. Ich würde vorschlagen, es so zu halten, wie es ist, vielleicht mit geringfügigen Formulierungen für einen verbesserten Fluss und Klarheit.

Das obige ist der detaillierte Inhalt vonEin umfassender Blick auf JQuery -Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!