Den meisten dürfte die jQuery Library ein Begriff sein, denn ohne dieses Framework funktioniert im Web 2.0 eigentlich kaum noch etwas. Durch den Einsatz von jQuery ist es ein leichtes DOM-Objekte zu manipulieren, AJAX-Funktionen in die Seite einzubauen und komplett ohne Flash oder andere Hilfsmittel die die Installation von Software auf dem Rechner der Nutzer erfordern einzubauen.

Ich möchte mit diesem Beitrag auch nicht zu sehr in den Aufbau und die Arbeit mit jQuery eingehen, viel mehr möchte die es vorstellen, schließlich wird es hier sicher noch in mehr als nur einem Artikel eine Rolle spielen. jQuery ist kostenlos und frei verfügbar und weit einfacher zu nutzen als normales JavaScript. Zudem gibt es eine Vielzahl an Plugins und fertigen Scripten von denen ich sicher auch einige hier ansprechen werde.

Die Hauptfrage die sich natürlich stellt ist: Wozu kann ich jQuery einsetzen? Eine generelle Antwort lässt sich hier nicht geben, die Möglichkeiten sind zu vielfältig. Fangen wir klein an: Sie möchten einen Mouseover-Effekt für bestimmte Elemente verwenden. Das geht natürlich recht einfach mit CSS, wobei die Pseudo-Klasse :hover bekanntlich Probleme mit dem Internet Explorer hat. Zudem ist der Effekt recht abgehackt, schöner wäre da doch ein Einblend-Effekt. Hier kommt jQuery ins Spiel.

Demo

Quellcode

<a class="demo" href="http://www.google.de">MouseOver</a>
<script type="text/javascript">
$("a.demo").mouseover(function(){
	$("a.demo").animate({
		backgroundColor: "#DD0000"
	}, 300);
});
$("a.demo").mouseout(function(){
	$("a.demo").animate({
		backgroundColor: "#FFFFFF"
	}, 300);
});
</script>

Das gezeigte Beispiel benötigt allerdings, um die Hintergrundfarbe zu animieren, ein erstes jQuery Plugin: Color Animations. Animationen mit Größe, Deckkraft oder Rahmenstärke lassen sich auch ohne diese Erweiterung realisieren.

Wer bisher noch nie mit jQuery gearbeitet hat sollte dies unbedingt einmal versuchen. jQuery ist gut dokumentiert und es gibt eine große Anzahl an Tutorials.

jQuery Website