# 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()](https://www.ionos.at/digitalguide/websites/web-entwicklung/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](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-jquery/) arbeiten, können Sie Elemente so schnell und effizient auswählen und bearbeiten.

Tipp Mit [Webspace](https://www.ionos.at/hosting/webspace "Webspace mieten bei IONOS") 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:

```javascript
$(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()](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-ajax/) oder [jQuery.each()](https://www.ionos.at/digitalguide/websites/web-entwicklung/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.

Tipp Durch die Integration der [IONOS API](https://developer.hosting.ionos.de "IONOS Entwickler 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:**

```javascript
// Wählt alle <p>-Elemente auf der Seite aus
$("p")
```

**Klassenselektoren:**

```javascript
// Wählt alle Elemente mit der Klasse "classname" aus
$(".classname")
```

**ID-Selektoren:**

```javascript
// Wählt das Element mit der ID "elementID" aus
$("#elementID")
```

**Attribut-Selektoren:**

```javascript
// Wählt alle <input>-Elemente mit dem Attribut "type" gleich "text" aus
$("input[type='text']")
```

**Hierarchische Selektoren:**

```javascript
// Wählt alle <li>-Elemente, die direkte Kinder von <ul>-Elementen sind, aus
$("ul > li")
```

**Filter-Selektoren:**

```javascript
// Wählt das erste <p>-Element auf der Seite aus
$("p:first")
```

In unserem [jQuery-Tutorial](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/ "jQuery-Tutorial – alle Grundlagen zu Selektoren und Syntax") 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
<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 &lt;p&gt;-Elemente auf der Seite aus. Die text()-Methode wechselt schließlich den Textinhalt aller selektierten &lt;p&gt;-Elemente zu “Ein neuer Text für alle Paragraphen.”.

Tipp [Deploy Now](https://www.ionos.at/hosting/deploy-now "Automatische Deployments mit IONOS") 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.


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-selectors/](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-selectors/) for AI/LLM consumption.