jQuery – Einstieg für Anfänger

Man hörts, man siehts, jQuery hier, jQuery da, die letzten Jahre wurde das Framework zum Juwel der JavaScript Welt. Es beherrscht Effekte, DOM Modifikationen, AJAX und noch viele weitere interessante Eigenschaften. Wer im Webdesign oder in der Entwicklung tätig ist wird sich früher oder später damit beschäftigen müssen. Wir wollen euch mit diesem Tutorial den Einstieg in die Welt von jQuery vereinfachen und euch die grundlegenden Eigenschaften und Anwendungsmöglichkeiten näher bringen. Unser Guide beinhaltet jedoch keine “click me” Beispiele, denn es soll euch inspirieren die Code-Beispiele selber auszuprobieren, zu verändern und zu verstehen.

Setup

Um zu starten, benötigen wir eine Kopie der jQuery Library welche ihr hier bekommt. Am besten benutzt ihr das jQuery Regular File, dieses ist nicht komprimiert und erlaubt einen Blick in die Funktionen des Frameworks. Ändert nun den Namen mit der Angabe der Versionsnummer auf ein simples jquery.js.

Starten wir nun mit dem berühmt-berüchtigten “Hello World” Beispiel.

Hello jQuery

Benutze nun deinen favourite HTML-Editor und starte mit einem leeren JavaScript File, speichere dieses unter my_jquery.js in den gleichen Ordner wie das jQuery File. Hier werden später unsere erstellten Funktionen vorhanden sein. Der Grosse Vorteil von jQuery ist, dass zentral in einem File alle Events gesteuert werden können.

Erstelle nun ein leere HTML Seite und schreibe oder kopiere folgenden Code in das File.

Diese Seite lädt lediglich das jQuery File (unbedingt darauf achten, dass der Pfad dorthin zeigt wo das jQuery File liegt) sowie, das zurzeit noch leere my_jquery.js. Speichere dieses File nun unter webdesign.html im gleichen Ordner wie die anderen 2 Files.

Let the show begin.

Da mit jQuery meistens das DOM (Document Object Model) manipuliert werden soll, müssen wir sicherstellen, dass gleich nach dem Laden die entsprechenden Events ausgeführt werden. Dazu verwenden wir den ready() Event.

Schreibe nun folgenden Code in das my-jquery.js File:

 $(document).ready(function() {
   // starte wenn DOM geladen ist
 });

Wir werden nun mithilfe von jQuery eine Alert Box hinzufügen, welche aufpopt sobald man auf einen Link klickt.

Füge nun folgendes in den body von webdesign.html:

 Link

Ergänze nun den $(document).ready Handler im my_jquery.js:

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

Der obenstehende Code macht folgendes: $(“a) ist ein Selektor und wählt alle a Elemente aus. $() instanziert ein neues jQuery Objekt. Die click() Funktion fügt jedem ausgewählten Objekt, in unserem Fall jedem Link, ein Klick Event hinzu.

Schau dir im Browser die webdesign.html Site an und geniesse dein erstes “Hello World” mit jQuery.

Selektoren und Events

Ein grosser Vorteil von jQuery ist die Unterstützung von CSS 3 Selektoren und XPath. Wenn du zum Beispiel jeweils den Link eines Listenelements wählen willst, benutzt du $(“div > ul a”). Um dies nun mit jQuery auszuprobieren erstellen wir ein neues CSS File und bennenen es screen.css. Dieses speichern wir in den selben Ordner wie die anderen Files. Nun erstellen wir einige Klassen welche wir nachher verwenden werden:

 .gray {
 	border: 1px solid #CCCCCC;
	list-style: none;
 }

 .blue {
 	color: #9DBED1;
 }

 .black {
 	color: #000000;
 }

Nun wechseln wir in das webdesign.html und fügen einerseits das eben erstellte Stylesheet im Head Bereich ein:

Und im Body können wir den Link nun entfernen und dafür eine Liste mit der Klasse “liste” erstellen:

Listenpunkt 1
Listenpunkt 2

Nun wechseln wir in my_jquery.js, und ersetzen den vorher erstellen Event der Alert Boxen durch folgenden:

$(document).ready(function() {
   $(".liste").addClass("gray");
});

Wenn ihr nun webdesign.html im Browser anschaut, erkennt ihr, dass der Liste ein grauer Balken hinzugefügt wurde und die Listenpunkte verschwunden sind. Was ist nun passiert – durch $(“.liste”) wurde ein Element mit der Klasse “liste” gesucht und mit .addClass wurde die CSS Klasse “gray” hinzugefügt.

Nun fügen wir noch weitere Klassen zu den Child-Elementen der Liste:

$(document).ready(function() {
   $(".liste").addClass("gray");
   $(".liste > li").addClass("blue");
});

Ihr habts bestimmt schon erraten, durch den CSS 3 Selektor wurden nun dem Listenelement li die Klasse “blue” hinzugefügt. Gehen wir nun einen Schritt weiter. Wir wollen einen Hover Effekt hinzufügen, jedoch nur auf das letzte Element der Liste.

Ergänzt nun den Event wie folgt:

 $(document).ready(function() {
   $(".liste").addClass("gray");
   $(".liste > li").addClass("blue");
   $(".liste li:last").hover(function() {
     $(this).addClass("black");
   },function(){
     $(this).removeClass("black");
   });
 });

Nice.
Es gibt jeder menge solcher Selektoren. Mehr Beispiele und eine Liste aller möglicher Ausdrücke findet ihr hier

Effekte

Wie einst David Copperfield lassen wir nun Elemente verschwinden und wieder erscheinen und dies nur mit der Hilfe von jQuery. Wir verwenden gleich unsere eben erstelle Liste mit der Klasse “liste”. Füge nun oberhalb der Liste einen Link ein

	Link

Listenpunkt 1
Listenpunkt 2

Wechsle nun in das my_jquery.js und lösche den vorher erstellten Code der Selektoren.. Wir werden die Animation toggle() verwenden. Mit diesem Effekt lassen sich sich Objekte, je nach aktuellem Zustand ein- oder ausblenden. Füge nun folgenden Code ein:

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".liste").hide('slow');
   },function(){
     $(".liste").show('fast');
   });
 });

Wenn du nun das webdesign.html im Browser anschaust wirst du feststellen dass sich die Liste bei Klick auf den Link ein- und ausblendet. Was passiert? Zuerst wird dem Link die Funktion toggle hinzugefügt. Danach wird die Klasse “liste” auf hidden gesetzt. Je nach Zustand wird die Klasse nun eingeblendet (show) oder ausgeblendet (hide). Simple as that. Erlaubte Parameter für den Speed der Animation sind übrigens: slow, normal oder fast.

Es stehen noch weitere Effekte zur Verfügung, diese findet ihr hier oder Fancy Effects sind mit dem interface plugin collection möglich.

Natürlich bietet jQuery noch vieles mehr, wie z.B. ein Ajax Modul, auch kann auf einfachste Weise ein Plugin geschrieben werden und dieses der Community zur Verfügung gestellt werden. Hier noch einige Links welche euch weiterhelfen rund um das Thema. Ich wünsche euch viel Spass mit jQuery.

Offizielle jQuery Dokumentation (eng.)
Liste aller Plugins welche von der Community erstellt wurden (eng.)
Dokumentation aller jQuery Funktionen (eng.)