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.
|
