jQuery Selectors – DOM-Elemente gezielt auswählen
jQuery Selectors bilden eine wichtige Komponente der jQuery-Bibliothek und erleichtern die Manipulation und Interaktion mit HTML-Elementen. Wir stellen Ihnen die am häufigsten verwendeten Selektoren mit praktischen Beispielen vor.
Was sind jQuery Selectors?
jQuery-Selektoren wählen Elemente basierend auf ihren Attributen, Klassen, IDs, Typen oder Positionen im DOM aus. Auch die Kombination mehrerer Bedingungen ist möglich, um komplexe Selektoren zu erstellen. Nachdem die Objekte selektiert wurden, können Sie Aktionen wie das Hinzufügen von Event-Handlern mit jQuery.on(), das Ändern von CSS-Stilen oder das Auslesen von Elementinhalten ausführen. Der Gebrauch von Selektoren ist auch in einem CMS wie WordPress nützlich: Wenn Sie in WordPress mit jQuery arbeiten, können Sie Elemente so schnell und effizient auswählen und bearbeiten.
Mit Webspace von IONOS erhalten Sie Zugriff auf dedizierten Speicherplatz für Ihre Webprojekte. Die Click&Build-Apps geben Ihnen die Möglichkeit, nach einer 1-Klick-Installation eine auf Ihre Bedürfnisse zugeschnittene Website zu erstellen.
Wie nutzt man Selektoren in jQuery?
Die allgemeine Syntax für die Verwendung von jQuery-Selektoren lautet:
$(selector)
selector ist hierbei das Kriterium, nach dem Sie Elemente auf Ihrer Website auswählen können. Die Kombination von Selektoren mit Funktionen wie jQuery.ajax() oder jQuery.each() ermöglicht es zudem, auf selektierte DOM-Elemente zuzugreifen, asynchron Daten abzurufen und Schleifenoperationen auf diesen durchzuführen. So können Sie dynamische Inhalte auf Ihrer Website einfach anzeigen und aktualisieren.
Durch die Integration der IONOS API in Ihre Hosting-Projekte können Sie Ihre Arbeitsprozesse sicher und effizient managen. Die API-Dokumentationen von IONOS geben Ihnen umfassende Informationen und unterstützen Sie dabei, das volle Potenzial der API auszuschöpfen.
Eine Liste der wichtigsten jQuery Selectors
Hier sind einige Beispiele für die am häufigsten verwendeten Selektoren in jQuery:
Elementselektoren:
// Wählt alle <p>-Elemente auf der Seite aus
$("p")
Klassenselektoren:
// Wählt alle Elemente mit der Klasse "classname" aus
$(".classname")
ID-Selektoren:
// Wählt das Element mit der ID "elementID" aus
$("#elementID")
Attribut-Selektoren:
// Wählt alle <input>-Elemente mit dem Attribut "type" gleich "text" aus
$("input[type='text']")
Hierarchische Selektoren:
// Wählt alle <li>-Elemente, die direkte Kinder von <ul>-Elementen sind, aus
$("ul > li")
Filter-Selektoren:
// Wählt das erste <p>-Element auf der Seite aus
$("p:first")
In unserem jQuery-Tutorial lernen Sie, wie Sie jQuery in Ihr Projekt einbinden können und erhalten einen kompakten Überblick zu Selektoren und ihrer Syntax.
Ein Beispiel für die Anwendung von jQuery Selectors
Im Folgenden verwenden wir jQuery Selektoren, um alle <p>-Elemente auf einer Website auszuwählen und deren Textinhalte zu ändern:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("Ein neuer Text für alle Paragraphen.");
});
</script>
</head>
<body>
<p>Erstes Paragraph</p>
<p>Zweites Paragraph</p>
<p>Drittes Paragraph</p>
</body>
</html>
Die Funktion $(document).ready() stellt sicher, dass der jQuery-Code erst ausgeführt wird, wenn der DOM vollständig geladen ist. Mit dem Selektor $("p") wählen wir dann alle <p>-Elemente auf der Seite aus. Die text()-Methode wechselt schließlich den Textinhalt aller selektierten <p>-Elemente zu “Ein neuer Text für alle Paragraphen.”.
Deploy Now von IONOS bietet Ihnen eine benutzerfreundliche Lösung, um Ihre Webseiten automatisiert über GitHub zu deployen. In YAML-Dateien können Sie den Actions-Workflow nach Ihren Bedürfnissen ändern. Informationen zum Besucherwachstum, der Sitzungsdauer und dem Besuchsverlauf stehen Ihnen im kostenlosen Dashboard zur Verfügung.
Ähnliche Artikel
ESB ProfessionalShutterstock jQuery.removeClass() – Klassen von HTML-Elementen entfernen
Die Funktion jQuery.removeClass() erlaubt eine dynamische Anpassung von Webseiten. Sie können CSS-Klassen basierend auf Benutzerinteraktionen oder bestimmten Ereignissen entfernen. Beispielsweise dient die Methode dazu, Zustände, Animationen oder visuelle Effekte auf Elementen zu beeinflussen. Dadurch wird Ihr Frontend interaktiver und ansprechender.
whiteMoccaShutterstock jQuery.animate(): So entwerfen Sie Animationen für Ihre Website
Die jQuery.animate()-Methode vereinfacht die Animationserstellung für interaktive Benutzererlebnisse auf Webseiten. Sie bietet verschiedene vorgefertigte Effekte wie das Ein- und Ausblenden von Elementen, das Schwenken oder das Skalieren. Diese Aktionen können einfach angewendet werden, ohne dass umfangreicher eigener Code erforderlich ist. Wir erläutern Ihnen die Syntax und Verwendung der…
jQuery AJAX – so funktioniert asynchrone Datenübertragung
jQuery AJAX-Methoden dienen dem asynchronen Datenaustausch zwischen einer Webseite und einem Server, ohne die Seite neu zu laden. Ihre Vorteile liegen u. a. in der verbesserten Nutzungserfahrung und der einfacheren Integration von Daten im JSON- oder XML-Format. Diese leistungsstarken Funktionen ermöglichen, interaktive und ansprechende Webanwendungen zu erstellen.
