jQuery Einführung

Aug 29 2009 Published by Florian Palme under jQuery

jQuery ist ein mächtiges und auch sehr beliebtes JavaScript-Framework! Ich möchte Euch heute eine Einführung in jQuery geben und ein paar Dinge zeigen.

Zu beginn müsst Ihr euch die jQuery-Bibliothek zu downloaden. Dazu geht auf die jQuery-Page und klickt auf den großen Button rechts. Nun können wir beginnen!

[ 1 ] Wir bereiten erst einmal unser HTML-Document vor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Einführung</title>
</head>
 
<body>
</body>
</html>

Nachdem wir die Datei abgespeichert haben, binden wir die jQuery-Bibliothek in den -Bereich der HTML-Datei ein. (Bitte denkt daran, die JS-Datei in den gleichen Ordner zu packen, wie eure HTML-Datei. Ansonsten Dateipfade anpassen. )

<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js "></script>

Als nächstes schreiben wir unseren ersten jQuery-Code. Dieser Teil kommt wieder in den -Bereich, unter den oberen Teil.

<script type="text/javascript" language="javascript">
$(function(){
     //Hier stehen weitere Anweisungen
});
</script>

Alle Anweisungen, welche in dieser Funktion stehen, werden erst Ausgeführt, wenn die ganze Seite geladen ist. Somit gehen wir Sicher, dass unser Code immer funktioniert.

[ 2 ] Als erstes Zeige ich Euch, wie ihr HTML-Elemente ganz einfach Anzeigen (Aufklappen) und Verstecken (Zuklappen) könnt. Wir schreiben also folgenden HTML-Code in den -Bereich der HTML-Datei:

<b id="klapp">Auf- / Zuklappen</b>
 <div class="klappen">Mich kann man Auf- und Zuklappen!</div> 
<div class="nichtklappen">Mich kann man <b>nicht</b> Auf- und Zuklappen!</div>

Anderst, wie normal in JavaScript, benötigen wir keinen Funktionsaufruf im HTML-Bereich. Das übernehmen für uns so genannte “Selectoren” & “Event-Helper”. Selectoren geben an, auf welchem Element ein Event-Helper ausgeführt werden soll. Event-Helper bestimmen, wann eine Funktion ausgeführt werden soll. Dazu gehören z.B. “click”, “hover”, “mouseup”, “focus” und noch viele mehr.

Selectoren: Selectoren zeigen auf einen bestimmten Tag im HTML-Breich. Genauso, wie in CSS, können ID’s, Klassen und normale Tags angesprochen werden (#MeineId, .meineKlasse, span). In unserem Fall möchten wir, bei einem Klick auf das b-Tag mit der ID “klapp” das Div mit der Klasse “klappen” Auf- / Zuklappen. Also sprechen wir die ID an: $(“#klapp”).

Event-Helper: Wie oben schon gesagt, bestimmen Event-Helper, bei welcher User-Aktion (Mausklick, Tastendruck, …) eine Funktion ausgeführt werden soll. In unserem Beispiel verwenden wir den Event-Helper “click”. Hängen wir unserem Selector also den Event-Helper mit einer Funktion an: .click(function(){});. Euer JS-Code müsste nun so aussehen:

$(function(){
	$("#klapp").click(function(){
 
	});
});

Nun müssen wir das Div mit der Klasse “klappen” verstecken. Dazu benötigen wir nur einen weiteren Selector (welcher auf “.klappen” zeigt) und eine Effekt-Funktion (hide, show).

$(function(){
	$("#klapp").click(function(){
		$(".klappen").hide(); //Hier verstecken wir das Div mit der Klasse klappen
	});
});

Bei jedem Klick würde jQuery nun versuchen, das Div zu verstecken. Also prüfen wir, ob das Div schon versteckt ist, wenn nicht, verstecken wir es. Beim verstecken wird der CSS-Style “display” auf “none” gestellt. Wir können mit der jQuery-Funktion .css Prüfen, ob das Div versteckt ist.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
	});
});

Jetzt einfach noch eine else-Anweisung an die If-Abfrage packen und das Div wieder anzeigen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
		else
		{
			$(".klappen").show();	
		}
	});
});

Nun öffnet euer HTML-Dokument im Browser und testet eure soeben geschrieben jQuery-Funktion!

Beispiel ansehen

Kostenloser Download

[ 2 ] Sicherlich ist das nichts besonders, aber mit dem fast gleichem Code, kann man einen ganz anderen Effekt erzielen. Wir setzten nun in die Effekt-Funktion hide() & show() jeweils eine Zahl.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide(1000);
		}
		else
		{
			$(".klappen").show(1000);	
		}
	});
});

Beispiel ansehen

Kostenloser Download

[ 3 ] Es gibt aber noch eine weitere Möglichkeit, ein Element Auf- bzw Zuklappen zu lassen. Ändern wir doch mal show(1000) zu slideDown(1000) und hide(1000) zu slideUp(1000).

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").slideUp(1000);
		}
		else
		{
			$(".klappen").slideDown(1000);	
		}
	});
});

Beispiel ansehen

Kostenloser Download

[ 4 ] Lassen wir das Div doch mal Aus- / Einfaden. Also ändern wir wieder die Effekt-Funktionen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").fadeOut(1000);
		}
		else
		{
			$(".klappen").fadeIn(1000);	
		}
	});
});