200914Okt

jQuery-Tutorial: Einführung und Grundlagen

Das von John Resig entwickelte JavaScript-Framework jQuery zählt mittlerweile zu den beliebtesten Bibliotheken und ist zudem sehr einfach zu benutzen. Für alle, die den Einstieg in die wunderbare Welt von jQuery planen, habe ich eine Einführung in die Grundladen des Frameworks verfasst. Allem voran soll die Namensgebung "AJAX-Framework" geklärt sein, da unter Anderem bei Google die Rede von Google AJAX Libraries ist: Ajax (Asynchronous JavaScript and XML) bezeichnet den Vorgang einer asynchronen Datenübertragung zwischen Server und Browser, die durch das XMLHttpRequest-Objekt (XHR) bewerkstelligt wird. Ein JavaScript-Framework wie jQuery bietet hervorragende Möglichkeiten für Ajax-Anwendungen, kann aber auch für reines DOM-Scripting, also das Manipulieren von HTML-Elementen, verwendet werden.

jQuery

Das Projekt glänzt vor allem durch seine tolle Dokumentation und so gibt es im Tutorials-Bereich der Website schon viele Anleitungen (allerdings in Englisch). Die eigentliche Dokumentation ist bestens organisiert und sollte bei der jQuery-Entwicklung stets geöffnet sein. Neben der Referenz finden sich in der Dokumentation auch einfache Beispiele inklusive Quelltext.
Dieses Tutorial richtet sich an Webdesigner und Entwickler, die mit HTML/CSS und JavaScript vertraut sind. Auch wenn sich die Programmierung in jQuery simpel gestaltet, sollte man Kenntnisse über die DOM-Struktur und die allgemeine JavaScript-Syntax besitzen. Ein Besuch bei SelfHTML lohnt sich.

Um mit der Arbeit beginnen zu können, wird die jQuery-Bibliothek benötigt: Bei Google wird die aktuelle Version der Bibliothek gehostet und lässt sich somit direkt in Projekten einsetzen. Natürlich kann die Datei auch direkt von der Website heruntergeladen werden. Für dieses Tutorial empfehle ich die Benutzung von JS Bin — damit lässt sich HTML-, CSS- und JavaScript-Code direkt im Browser testen, ohne dass dafür Dateien erstellt werden müssen. JS Bin bietet das Einbetten diverser JavaScript-Frameworks per Knopfdruck (Dropdown-Menü "Include Library").
In jedem Fall muss also die Hauptbibliothek von jQuery im <head>-Bereich der Website eingebettet werden (JS Bin erledigt dies automatisch). Das HTML-Konstrukt sieht dann in etwa so aus (Charset-Encoding fehlt):

  • <!DOCTYPE html">
  • <html>
  • <head>
  • <title>jQuery Beispiel</title>
  • <script src="jquery.min.js" type="text/javascript"></script>
  • </head>
  • <body>
  • </body>
  • </html>

In diesem Tutorial werden hauptsächlich die Syntax und die Selektoren von jQuery behandelt. Ich werde lediglich mit Inline-Styles und -Scriptcode arbeiten — beides lässt sich natürlich als externe Datei einbetten.
Wir erstellen daher noch folgende Elemente (HTML/CSS):

  • <head>
  • <title>jQuery Beispiel</title>
  • <script src="jquery.min.js" type="text/javascript"></script>
  • <script type="text/javascript">
  • // jQuery-Code
  • </script>
  • <style type="text/css">
  • div#test {
  • width:100px;
  • height:100px;
  • background:#FF0000;
  • }
  • </style>
  • </head>
  • <body>
  • <div id="test">Ein Beispiel</div>
  • </body>

Das Konstrukt enthält jetzt eine rote Box mit der ID "test", jedoch noch keine JavaScript-Aktionen. Diese werden später dem noch leeren <script>-Bereich hinzugefügt. Die Platzierung dieses JavaScript-Bereichs (oder der externen Datei) innerhalb des HTML-Konstrukts ist für den zeitlichen Aufruf des Scripts verantwortlich — wird ein Script per <script> am Ende des HTML-Codes (zum Beispiel vor </body>) eingebettet, so wird es erst ausgeführt, nachdem die HTML-Datei geladen wurde. Eine bessere Möglichkeit bietet jedoch jQuery mit einer "Bereit"-Funktionalität, die ich gleich beschreiben werde.
In jQuery ist das Dollarzeichen ($) ein zentrales Element, da es als Selektor für DOM-Elemente eingesetzt wird. Ein wichtiger Code-Baustein ist also Folgender:

  • $("element")

Hieraus ergeben sich verschiedene Punkte, die wichtig bei der Verwendung von Selektoren sind:

  • Anführungszeichen müssen beachtet werden — die Elemente window, document, this sowie Funktionsparameter (Argumente) benötigen keine Anführungszeichen
  • neben CSS-Selektoren (ID, Klasse, Child, etc.) ist auch die Angabe von Standard-Elementen (div, p, a, usw.) möglich
  • innerhalb der Anführungszeichen können komplexe Selektoren (mehrere Elemente, Child-Elemente, uvm.) angegeben werden

In der Klammer können also neben einfachen Ausdrücken auch erweiterte Filter verwendet werden, wie man in den späteren Tutorials noch sehen wird. Die am häufigsten angewandten Selektoren dürften Folgende sein:

  • $("#id")
  • $(".klasse")
  • $("div, p, a, span, li")

Attribute und spezifische Selektoren werden im nächsten Tutorial behandelt. Nach Möglichkeit sollte man stets IDs ("#id") verwenden, da diese Elemente schneller angesprochen werden als Klassen oder Standard-Elemente — das macht sich allerdings nur in sehr großen HTML-Strukturen bemerkbar.
Wie eben schon erwähnt, kann mit jQuery definiert werden, wann JavaScript-Code ausgeführt wird. Der logischste Zeitpunkt dafür tritt ein, sobald die HTML-Datei und alle darin befindlichen Elemente (wie Bilder) geladen wurden: Das Dokument ist dann "fertig". So heißt auch die entscheidende Funktion in jQuery, die das Script zum Rollen bringt, wenn der HTML-Code vollständig übertragen wurde:

  • $(document).ready(function(){
  • // jQuery-Code
  • });

Dieser Aufruf sollte den kompletten jQuery-Code umschließen und die Basis für jedes jQuery-Projekt sein. Bevor wir den Code für unser kleines Beispiel finalisieren, müssen noch ein paar Dinge zur Syntax geklärt werden. Also zurück zum Dollarzeichen: Nur mit der Selektor-Funktion lässt sich noch nicht viel anstellen, da die Anweisungen in Form von DOM-Operationen fehlen. Diese folgen unmittelbar mit einem Punkt (.) auf den Selektor:

  • $("#test").css("color", "#FFFFFF");

Mit dieser Zeile würde also die Schriftfarbe des div-Containers mit der ID "test" auf "weiß" gesetzt werden. Die Terminologie von jQuery hat auch bei dieser Funktionsweise ein paar Besonderheiten:

  • die Werte (oder Funktionsparameter) sollten und müssen zum größten Teil in Anführungszeichen angegeben werden (ein Ausnahme bilden zum Beispiel einfache Integer-Zahlen)
  • jede DOM-Manipulation hat eine indiviuelle Anzahl von Argumenten
  • bei dem ".css()"-Manipulator (und auch bei ".animate()") können neben CSS-Eigenschaften auch JavaScript-typische Style-Eigenschaften verwendet werden

Bei dem Verändern und Animieren von bestehenden CSS-Einstellungen sollen oft mehrere Parameter übergeben werden. Im obigen Beispiel wird lediglich einer CSS-Eigenschaft ("color") ein Wert ("#FFFFFF") zugewiesen. Soll mehr als eine Eigenschaft verarbeitet werden, müssen geschweifte Klammern ({…}) in Verbindung mit einem Doppelpunkt (:) eingesetzt werden. Hier ein Beispiel:

  • $("#test").css({ "color": "#FFFFFF", "height": "25px" });

Hiermit wird also die Textfarbe wieder auf weiß eingestellt und die Höhe des div-Elements wird auf 25 Pixel gesetzt.
Nun gibt es noch die Möglichkeit, mehrere DOM-Manipulationen auf einmal vorzunehmen — im Beispiel eben verändert lediglich eine DOM-Manipulation (".css()") mehrere Attribute. Möchte man nun also noch zusätzlich den Text des Elements verändern, sieht der Code so aus:

  • $("#test").css({ "color": "#FFFFFF", "height": "25px" }).html("Neu");

Der DOM-Manipulator ".html()" stellt das Pendant zur JavaScript-Eigenschaft "innerHTML" dar und verändert den Text eines DOM-Elements. In unserem Beispiel wird also der Text des Test-Elements in "Neu" geändert. Die DOM-Funktionen wurden einfach aneinander gehängt (Chaining): Sie werden in jQuery nacheinander ausgeführt. So sind beliebig große Verkettungen möglich:

  • $("element").funktion1().funktion2().funktion3().funktion4();

Zur besseren Ansicht können die verketteten Funktionen in separate Zeilen geschrieben werden. In Verbindung damit werden wir zum Abschluss unseren Beispiel-Code mit den eben genannten Funktionen komplettieren:

  • <head>
  • <title>jQuery Beispiel</title>
  • <script src="jquery.min.js" type="text/javascript"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  • $("#test")
  • .css({ "color": "#FFFFFF", "height": "25px" })
  • .html("Neu");
  • });
  • </script>
  • <style type="text/css">
  • div#test {
  • width:100px;
  • height:100px;
  • background:#FF0000;
  • }
  • </style>
  • </head>
  • <body>
  • <div id="test">Ein Beispiel</div>
  • </body>

Die Datei kann auch separat angesehen werden. In den kommenden Tutorials werden erweiterte Selektoren, Animationen, Events und Ajax behandelt. Wer mehr über die Funktionen des Frameworks erfahren will, kann sich hierzu meine Framework Matrix ansehen.
Viel Spaß bei den ersten Schritten mit jQuery!