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
:visible und :hidden (in einigen Fällen bis zu 17x schneller). Die Sichtbarkeit wird nun durch das Vorhandensein eines Layoutboxs von getClientRects. 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.
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). 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. :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
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
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. 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. 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. 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. :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!
Allgemeine Postgresql-Befehle
Was soll ich tun, wenn ich auf TikTok nur eine private Nachricht senden kann?
MySQL-Datenbank wiederherstellen
Was sind die gängigen Managementsysteme?
Waffenkammerkiste
Was bedeutet PS-Maske?
So löschen Sie Array-Elemente in JavaScript
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
