jQuery-Bücher - Klicken Sie auf ein Cover für weitere Informationen zum Buch
Eine Einf�hrung in jQuery und die Konzepte, die man ben�tigt um es zu verwenden.
Hinweis: Dieses Tutorial ist eine �bersetzung von "How jQuery Works" ins Deutsche.
Die Grundlagen
Dieses einf�hrende Tutorial hat den Zweck, dich mit jQuery vertraut zu machen. Falls du noch keine Testseite angelegt hast, erzeuge eine HTML-Seite mit folgendem Inhalt:
<html>
<head>
<script type="text/javascript" src="pfad/zu/jquery.js"></script>
<script type="text/javascript">
// Hier kommt dein Code rein
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html> |
Du musst das src-Attribut im script-Tag anpassen, so dass es auf deine Kopie von jquery.js zeigt. Wenn bei dir jquery.js im gleichen Verzeichnis liegt wie die HTML-Datei, dann sieht das wie folgt aus:
<script type="text/javascript" src="jquery.js"></script>
|
Du kannst deine Kopie von jQuery von der Downloading jQuery Seite herunterladen.
Code ausf�hren bei "Document Ready" - sobald das Dokument dazu bereit ist
Das erste was viele JavaScript-Programmierer machen, ist dem Dokument einen Code hinzuzuf�gen, der �hnlich diesem ist:
window.onload = function(){ ... }
|
Dabei wird der Code angegeben, der ausgef�hrt werden soll, wenn die Seite geladen ist. Problematisch dabei ist aber, dass der Code nicht ausgef�hrt wird, bevor alle Bilder fertig geladen wurden (das inkludiert Banner-Werbung). Der Grund, warum man �berhaupt auf window.onload zur�ckgreift ist, dass man sicherstellen will, dass das Dokument fertig geladen ist, bevor man JavaScript-Code ausf�hrt. Wird JavaScript Code zu fr�h ausgef�hrt, dann kann das zu Problemen f�hren.
Um diese Probleme zu umgehen, gibt es bei jQuery eine einfache Anweisung, die man verwenden kann. Diese ist als das "Bereit-Ereignis" (engl. "ready event") bekannt:
$(document).ready(function(){
// jQuery-Beispiele hier einf�gen
});
|
Dieser Code �berpr�ft das Dokument und wartet bis dieses bereit ist um manipuliert zu werden - genau was wir brauchen. Kopier dieses Code Schnippsel und f�ge es zum Skript-Bereich ("// Hier kommt dein Code rein") deiner Testseite hinzu. Die restlichen jQuery-Beispiele m�ssen innerhalb dieser Callback-Funktion eingef�gt werden, so dass diese dann ausgef�hrt werden, wenn das Dokument dazu bereit ist.
Bei Mausklick etwas machen
Das erste, das wir ausprobieren werden ist, dass etwas passiert, wenn ein Link geklickt wird. Dazu f�gen wir innerhalb der ready-Funktion ("// jQuery-Beispiele hier einf�gen") den folgenden Code ein:
$("a").click(function(){
alert("Danke fuer den Besuch!");
});
|
Speicher dein HTML-Dokument und lade die Testseite in deinem Browser neu. Wenn du auf den Link klickst, sollte ein Browser-Popup mit der Meldung "Danke fuer den Besuch!" ge�ffnet werden, bevor die jQuery-Seite sich �ffnet.
F�r "Klick" und die meisten anderen Ereignisse kann man das Standardverhalten des Browsers verhindern (in diesem Fall das �ffnen des Links) indem man "false" bei der Ereignisbehandlung zur�ckgibt:
$("a").click(function(){
alert("Thanks for visiting!");
return false;
});
|
Eine CSS-Klasse hinzuf�gen
Eine andere �bliche Aufgabe ist das Hinzuf�gen (oder Entfernen) von CSS-Klassen zu Elementen:
Wenn du folgende CSS-Deklaration in den header des HTML-Dokumentes einf�gst:
<style type="text/css">a.test { font-weight: bold; }
</style>
|
und dann den zuvor angef�hrten addClass-Aufruf durchf�hren l�sst, dann werden alle A-Elemente fett ("bold") dargestellt. Um die CSS-Klasse zu entfernen kannst du den Aufruf removeClass in analoger Weise verwenden.
Spezialeffekte
jQuery stellt einige Spezialeffekte zur Verf�gung mit deren Hilfe deine Webseite sich von anderen abheben kann. Um das zu testen kannst du diesen Klick-Handler verwenden:
$("a").click(function(){
$(this).hide("slow");
return false;
});
|
Wenn du jetzt auf einen Link klickst, sollte dieser langsam verschwinden.
Verkettung (Die Magie von jQuery)
jQuery verwendet ein interessantes Konzept um seinen Code kurz und einfach zu halten. F�r alle die mit objektorientierter Programmierung vertraut sind, sollte dieses Konzept einfach nachvollziehbar sein.
kurz und b�ndig: Jede jQuery-Methode gibt das Objekt selbst zur�ck, wodurch es m�glich ist Verkettungen zu verwenden:
$("a").addClass("test").show().html("foo");
|
Jede einzelne Methode (addClass, show, und html) gibt das jQuery-Objekt zur�ck, wodurch es m�glich ist fortw�hrend eine weitere Methode anzuwenden.
Man kann beeinflussen, auf welche der ausgew�hlten Elemente bestimmte Methoden angewandt werden sollen:
$("a")
.filter(".clickme")
.click(function(){
alert("Du wirst jetzt diese Seite verlassen.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();
|
Dieses Beispiel funktioniert f�r den folgenden HTML Code:
<a href="http://google.com/" class="clickme">Ich zeige eine Nachricht an</a>
<a href="http://yahoo.com/" class="hideme">Ich verschinde</a>
<a href="http://microsoft.com/">Ich bin ein normaler Link</a>
|
Die Auswahl der betroffenen Elemente kann mit den folgenden Methoden beeinflusst werden:
* add(),
* children(),
* eq(),
* filter(),
* find(),
* gt(),
* lt(),
* next(),
* not(),
* parent(),
* parents() und
* siblings()
|
N�heres zu diesen Methoden findet man in der Dokumentation.
Rückruffunktion
Eine Rückruffunktion (englisch callback function) bezeichnet in der Informatik eine Funktion, die einer anderen Funktion als Parameter übergeben wird, und von dieser unter gewissen Bedingungen aufgerufen wird. Dieses Vorgehen folgt dem Entwurfsmuster der Inversion of Control. Es ist wichtig zu wissen, wie man eine R�ckruffunktion korrekt als Parameter �bergibt.
R�ckruffunktion ohne Parameter
Eine R�ckruffunktion ohne Parameter wird wie folgt �bergeben:
$.get('meineHTMLSeite.html', meineRueckruffunktion);
|
Der zweite Parameter ist hier einfach der Funktionsname (nicht als Zeichenkette und ohne Klammern)
R�ckruffunktion mit Parameter
Was macht man, wenn man der R�ckruffunktion Parameter �bergeben m�chte?
falsch:
$.get('meineHTMLSeite.html', meineRueckruffunktion(param1, param2));
|
Das wird nicht funktionieren, weil hier zuerst die Funktion meineRueckruffunktion(param1, param2) ausgef�hrt wird und deren Ergebnis dann als zweiter Parameter f�r $.get() verwendet wird.
richtig:
$.get('meineHTMLSeite.html', function(){
meineRueckruffunktion(param1, param2);
});
|
weitere Informationen finden sich auf der Dokumentationsseite.
jQuery-Bücher - Klicken Sie auf ein Cover für weitere Informationen zum Buch
|
