Einfache Effekte

Nun möchten wir unser erstes JQuery-Süppchen kochen. Um JQuery zu nutzen müssen wir mit Javascript programmieren. Das geht zum einen direkt in der Html-Umgebung oder extern. Ich bevorzuge die zweite Variante und werde sie hier auch nutzen.

  1. Zuerst erstellen wir eine Datei mit einer .js-Endung z.B. js_main.js.
  2. Diese Datei bindest du in deine Html-Seite (im Head- oder Bodybereich) mit folgendem Code:
  3. Die .js-Datei öffnest du nun in einem Editor.
  4. Und schreibst folgendes in diese Datei.

    		$(document).ready(function() { 
			
			// unser JQuery-Skript!
			
		});
    Der Code bewirkt, dass alles was in dieser Funktion steht aufgeführt wird, wenn das Dokument fertig geladen wurde. In Javascript selbst gab es damals oftmals Probleme, da manche Html-Elemente noch gar nicht definiert wurden. JSler kennen das Problem ;)
Dort wo das Kommentar // unser JQuery-Skript! steht können wir die .js-Datei jetzt füllen.

Selektion eines Elementes

In JQuery kann man die einzelnen Elemente anwählen wie bei der Syntax von CSS. Bevor wir die folgenden Effekte verwenden können, muss zuerst definiert werden, welches Element wir ändern wollen. ansprechen können wir Elemente mit folgendem Code:
$("#css_id");
$(".css_klasse");
$(".css_klasse input");

Allgemein gelten hier alle Regeln, die auch in CSS gelten. Zusätzlich gibt es noch ein paar weitere Tricks bei denen man beispielsweise das x-te Element einer Klasse anwählen kann. Eine komplette Liste der Selektoren gibt es hier.

Nun möchten wir diese Elemente mit Effekten beeinflussen.

show() und hide()

Mit diesen zwei Methoden lässt sich Inhalt verstecken bzw. zeigen. ansprechen können wir das ganze so [BEISPIEL 1]: 
$(document).ready(function() { 
	$("a").click(function () {
		if($(this).attr("href") == "zeigen") {
			$(".kasten").show(); 
		} else {
			$(".kasten").hide(); 
		}
		return false;
	});
});

Hier wird außerdem ein Event aufgerufen, das click-Event. In der Dokumentation von JQuery gibt es noch weitere Events wie z.B. den hover.

Wenn das Attribut "href" zeigen lautet, wird show() aufgerufen, ansonsten hide(). Das return false am Schluss ist sehr wichtig, damit der Link nicht als Weiterleitung verstanden wird. Ansonsten würden wir auf eine neue Seite kommen.

slideUp() und slideDown()

Diese Effekte sind eigentlich analog zu hide und show nur dass hier eine nette Animation zum Vorschein kommt. Der Code sieht so aus [BEISPIEL 2]: 
$(document).ready(function() { 
	$("a").click(function () {
		if($(this).attr("href") == "zeigen") {
			$(".kasten").slideDown(300); 
		} else {
			$(".kasten").slideUp(300); 
		}
		return false;
	});
});

Als Parameter übergeben wir bei SlideDown bzw. Up noch die Dauer der Animation in Millisekunde und schon haben wir eine schicke Animation!

fadeIn() und fadeOut()

Der 3. Effekt ist analog zu slideUp und slideDown nur dass hier der Inhalt langsam ein- bzw. ausgeblendet wird [BEISPIEL 3]: 
$(document).ready(function() { 
	$("a").click(function () {
		if($(this).attr("href") == "zeigen") {
			$(".kasten").fadeIn(1000); 
		} else {
			$(".kasten").fadeOut(1000); 
		}
		return false;
	});
});

Jetzt haben wir schonmal einen kleinen Einstieg geschaffen. Es gibt noch vieles zu JQuery, doch das kommt in den anderen Tutorials ;)

Fragen (0, davon 0 beantwortet)


Kommentare (0)

Autor Kommentar
« Zurück