Fast alle typischen Effekte auf modernen Websites basieren auf dem dynamischen Ändern von CSS-Eigenschaften von Elementen. In der Regel erfolgen diese Änderungen ereignisabhängig.

Beispiel

<!doctype html><head>
<meta charset="utf-8">
<title>Test</title>
<style>
.hg_grau { background-color: #DEDEDE; }
.hg_gelb { background-color: #FBF840; }
.hg_zyan { background-color: #40FBD0; }
</style>
<script src="js/libs/jquery-1.6.4.min.js"></script>
</head><body>
<div id="zoom_div" class="hg_grau" style="zoom: 1; margin: 20px; 
text-align: center; font-size: 20px;">ZOOMWECHSEL</div>
<div id="hg_div" class="hg_gelb" style="padding: 20px; 
text-align: center; font-size: 20px;">FARBWECHSEL</div>
<script>
$(document).ready( function() {
   var zoom = 1.0;
   $('#zoom_div').click( function() {
      zoom += 0.2; 
      $(this).css('zoom', zoom); 
   } );
   $('#zoom_div').dblclick( function() {
      zoom = 1; 
      $(this).css('zoom', zoom); 
   } );
   $('#hg_div').mouseover( function() {
      $(this).removeClass('hg_gelb'); 
      $(this).addClass('hg_zyan'); 
   } );
   $('#hg_div').mouseout( function() {
      $(this).removeClass('hg_zyan'); 
      $(this).addClass('hg_gelb'); 
   } );
} );
</script></div></body></html>

Erläuterung

Das Beispiel zeigt zum besseren Verständnis ein komplettes HTML5-Dokument. Im Kopfbereich befindet sich ein style-Bereich, in dem Formate für drei Klassen definiert werden. Es handelt sich jeweils um Hintergrundfarbdefinitionen. Im body-Bereich des Dokuments gibt es zwei div-Bereiche. Der erste hat die id zoom_div, der zweite die id hg_div. Unterhalb davon ist ein Script notiert, das ereignisabhängig CSS-Eigenschaften der beiden div-Bereiche ändert.

Auf die Verarbeitung von Events (Ereignissen) in jQuery wird im Abschnitt Event-Handling noch näher eingegangen.

Alle Ereignisbehandlungen im Beispiel haben den folgenden Aufbau:

$('[Selektor]').[Eventname]( function() {
// Code, der bei Eintreten des Events ausgeführt wird
} );

Dem Ereignis, für das durch den Selektor angegeben wird, auf welches oder welche Elemente es sich bezieht, wird eine anonyme Funktion zugeordnet. Darin kann der Code notiert werden, der die Eigenschaften des oder der ausgewählten Elemente ändert, wenn das Ereignis eintritt.

Jedem der beiden div-Bereiche werden im Beispiele zwei Ereignis-Handlerfunktionen zugeordnet: dem div-Bereich mit der id zoom_div Handlerfunktionen für die Ereignisse click (Mausklick auf den Elementbereich) und dblclick (Doppelklick auf den Elementbereich), und dem div-Bereich mit der id hg_div Handlerfunktionen für die Ereignisse mouseover (solange sich der Mauszeiger über dem Elementbereich befindet) und mouseout (wenn der Mauszeiger den Elementbereich verlässt).

Die jQuery-Objektfunktionen, die zum Einsatz kommen, sind css(), addClass() und removeClass(). Die Objektfunktion css() ist sowohl ein “Getter” als auch ein “Setter”. Im obigen Beispiel wird css() als “Setter” aufgerufen, d.h. es wird ein neuer Eigenschaftswert gesetzt. Dabei werden zwei Parameter übergeben. Der erste ist die CSS-Eigenschaft, und der zweite der Wert. Wenn Sie den zweiten Parameter weg lassen, wird css() zur “Getter”-Funktion. Mit einer Anweisung wie var zoom = $(this).css('zoom'); in der gleichen Objektfunktion würde in der Variablen zoom der aktuelle Wert der CSS-Eigenschaft zoom des Elements mit der id zoom_div gespeichert.

Mit addClass() können Sie CSS-Klassen, die in separaten Stylesheet-Dateien oder in einem style-Bereich im Dokumentkopf definiert sind, hinzufügen. Mit removeClass() können Sie solche Klassen entfernen. Dabei ist es unerheblich, ob Elemente, auf die Sie diese jQuery-Funktionen anwenden, in HTML ein class-Attribut haben oder nicht.

Für das Arbeiten mit CSS-Klassen bietet jQuery außerdem noch die Funktionen hasClass() und toggleClass() an. Mit einer Abfrage wie if($(this).hasClass("sichtbar")) können Sie herausfinden, ob ein Element aktuell eine CSS-Klasse namens sichtbar zugeordnet hat oder nicht. Und mit toggleClass("sichtbar") müssen Sie das je nach gewünschtem Verhalten gar nicht mehr wissen. Ist eine CSS-Klasse aktuell zugewiesen, wird toggleClass() sie so entfern, wie es removeClass() tun würde. Ist die Klasse dagegen aktuell nicht zugewiesen, wird toggleClass() sie zuweisen, so wie addClass() es tun würde.