Styling mit jQuery
Styling mit jQuery
Styling mit jQuery ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
In allen bisherigen Beispielen haben wir mit HTML-DOM-Objekten gearbeitet.
Mit jQuery können wir auch die Styles von HTML-Elementen verändern.
jQuery stellt dafür einige Methoden bereit.
Klasse
In den ersten Beispielen werden wir die Verwendung von Klassen mit jQuery kennenlernen.
Im folgenden Beispiel binden wir unsere jQuery-Bibliothek in HTML ein und definieren zwei Klassen namens pink und yellow, die den Text pink beziehungsweise gelb färben.
Fangen wir an 🚀
Beispiel
Wir haben ein <p>-Element zwischen den <body>-Tags eingefügt.
Dieses Element besitzt derzeit noch keine Klasse.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Beispiel 2
Fügen wir nun mithilfe der addClass()-Methode die Klasse pink zum Absatzelement hinzu.
Auf dem Vorschaubildschirm sehen wir, dass sich die Farbe des Textes „Lorem ipsum“ in Pink ändert.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
removeClass()-Methode
Wenn wir Klassen aus HTML-Elementen entfernen möchten, verwenden wir die removeClass()-Methode.
Wir haben unser Beispiel unten geändert und zunächst die Klasse pink in unserem HTML-Element definiert. Sobald der DOM geladen ist, wird die Klasse pink aus unserem p-Element entfernt.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggleClass
toggleClass()-Methode
Wie der Name bereits sagt, gilt für diese Methode:
Wenn eine Klasse im Zielelement vorhanden ist, wird sie entfernt, andernfalls wird sie hinzugefügt.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>CSS-Methode
css()-Methode
Wir haben die Methoden zum Hinzufügen und Entfernen von Klassen kennengelernt.
Sehen wir uns nun die CSS-Methode an, mit der wir Inline-Styles für unsere HTML-Nodes definieren.
Die CSS-Methode akzeptiert zwei Parameter.
- Der erste Parameter ist der Name der zuzuweisenden Eigenschaft.
- Der zweite Parameter ist der Wert der zuzuweisenden Eigenschaft.
Das folgende Beispiel zeigt verschiedene Verwendungen der CSS-Methode.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
jQuery-API
Wir haben mit jQuery viele Manipulationsoperationen am DOM kennengelernt.
Neben den erlernten Methoden bietet jQuery noch viele weitere Manipulationsmethoden.
Sie können die gesamte API über den unten stehenden Link durchsuchen.
Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
Wir haben Styling mit jQuery gelernt.
Im nächsten Abschnitt lernen wir die Ereignisverwaltung in jQuery kennen.
Häufig gestellte Fragen
Ist die Lektion „Styling mit jQuery“ kostenlos?
Ja — der vollständige Text von „Styling mit jQuery“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Styling mit jQuery“?
Styling mit jQuery Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Styling mit jQuery“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.