# jQuery.addClass() – gezielte Klassenmanipulation für Webseiteneffekte
Die Methode jQuery.addClass() ist eine präzise und benutzerfreundliche Möglichkeit, **Klassen zu Elementen hinzuzufügen** und somit die Darstellung und das Verhalten Ihrer Website zu kontrollieren. Wir zeigen Ihnen den Aufbau und die Funktionsweise von .addClass().
## Was ist die jQuery.addClass()-Methode?
Durch die Verwendung von .addClass() können Sie das Erscheinungsbild Ihrer Website dynamisch ändern. Es ist beispielsweise möglich, Stile anzupassen, Animationen zu entwerfen oder auf Benutzerinteraktionen zu reagieren, indem Sie die gewünschten Klassen zu den entsprechenden HTML-Elementen hinzufügen. Die Methode kann aber keine vorhandenen Klassen entfernen. Für diese Funktion sollten Sie [jQuery.removeClass()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-removeclass/) benutzen. Nach dem Hinzufügen werden die für die Klasse vorgesehenen **CSS-Stilregeln** auf die ausgewählten Elemente angewendet, um das gewünschte visuelle Verhalten zu erzielen. Sie können auch mit [jQuery in WordPress](https://www.ionos.de/digitalguide/hosting/blogs/wordpress-jquery/) arbeiten und so benutzerdefinierte Layouts und Effekte in Ihrem CMS erzeugen.
Tipp Mieten Sie Ihren persönlichen [Webspace](https://www.ionos.de/hosting/webspace "Webspace mieten bei IONOS") bei IONOS und profitieren Sie von mindestens 50 GB für Ihr Webprojekt. Dazu erhalten Sie ein kostenloses SSL-Wildcard-Zertifikat plus Domain. Suchen Sie sich den passenden Tarif mit maßgeschneiderten Funktionen aus.
## Wie sehen die Syntax und Parameter der jQuery.addClass()-Methode aus?
Die Funktion jQuery.addClass() akzeptiert **zwei Parameter**. Die allgemeine Syntax lautet:
```jQuery
$(selector).addClass(classname,function(index,currentclass))
```
- **classname**: Name der Klasse oder Klassen, die hinzugefügt werden sollen, durch ein Komma getrennt
- **function(index,currentclass)**: eine optionale Callback-Funktion, die für jedes ausgewählte Element aufgerufen wird
- **index**: der Index des aktuellen Elements in der ausgewählten Elementliste
- **currentclass**: die aktuelle Klasse des Elements
Die **Callback-Funktion** bietet Ihnen die Möglichkeit, zusätzliche Anpassungen oder Logik auf der Ebene jedes Elements durchzuführen, während Sie Klassen hinzufügen. Sie können beispielsweise den aktuellen Klassenwert überprüfen und basierend darauf weitere Klassen ergänzen.
Wenn Sie gerade erst in jQuery einsteigen, empfehlen wir Ihnen das [jQuery-Tutorial](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/) in unserem Ratgeber, worin Sie alle Grundlagen der jQuery-Bibliothek lernen können.
Tipp Die [IONOS API](https://developer.hosting.ionos.de "IONOS Entwickler API") ermöglicht Ihnen, Ihre IONOS Hosting-Produkte schnell und einfach zu konfigurieren. Mit dem Zugriffsschlüssel für die IONOS APIs können Sie Ihre Domains, DNS-Einstellungen und SSL-Zertifikate verwalten. Weitere Informationen finden Sie in der Dokumentation auf der [IONOS Entwickler API](https://developer.hosting.ionos.de/docs "IONOS Entwickler API") Informationsseite.
## Ein Beispiel für die Anwendung der jQuery.addClass() Methode
Um die Funktion von .addClass() zu demonstrieren, fügen wir im folgenden Beispiel dem p-Element die Klasse „.green“ hinzu, wodurch sowohl die Farbe als auch die Schriftgröße des Paragraphen geändert werden. Ausgelöst wird der Wechsel durch ein **Klickevent** des Buttons. Auch andere Methoden wie [jQuery.find()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-find/) oder [jQuery.ajax()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-ajax/) können bequem mit .addClass() verwendet werden.
```html
This is a jQuery.addClass() example.
jQuery add class to element demo
hash_910756ff984fff8a33686c603d029341cdc46e94
```
Im Browserfenster sehen wir, dass die Farbe und Größe des p-Elements nach Klicken des Buttons geändert wurden.
Vorher:
[](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/jquery-addclass-before.png) Zustand vor Hinzufügen der Klasse Nach Klicken des Buttons:
[](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/jquery-addclass-after.png) .addclass-Effekt im Browser Tipp Bringen Sie Ihr Projekt online mit [Deploy Now](https://www.ionos.de/hosting/deploy-now "Automatische Deployments mit IONOS") von IONOS. Durch das schnelle Setup und die automatische Framework-Erkennung realisieren Sie in wenigen Schritten Ihren Internetauftritt. Neben der Deploy Now Membership können Sie zusätzliche Ressourcen buchen, die monatlich kündbar sind. IONOS garantiert Ihnen 100 % Kundenfokus mit Deploy Now.
This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-addclass/](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-addclass/) for AI/LLM consumption.