Anzeige
Tutorialbeschreibung

jQuery - Eine Einführung

jQuery - Eine Einführung

JavaScript ist längst nicht mehr aus dem Web-Alltag wegzudenken. Kein Wunder, zu groß sind die Vorteile, die diese Sprache bietet. Ein Problem gibt es allerdings: Will man wirklich ansprechende Ergebnisse erzielen, muss man sich vergleichsweise gut mit dieser Sprache auskennen. Und sollen dann auch noch Ajax-Applikationen erstellt werden, sollten tiefgreifende JavaScript-Kenntnisse vorhanden sein. Hapert es hier, sind gute Ergebnisse kaum möglich. Genau an dieser Stelle kommt das JavaScript-Framework jQuery ins Spiel. Was es damit auf sich hat und wie man es effektiv einsetzt, wird in mehreren Tutorials auf psd-tutorials.de gezeigt.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Eine Frage, die im Zusammenhang mit jQuery immer wieder auftaucht: Was ist eigentlich ein Framework und was hat man davon, wenn man es einsetzt? Ein solches Framework ermöglicht die Wiederverwendbarkeit von Code. Diese Wiederverwendbarkeit wird durch einen abstrakten, dabei aber festgelegten Rahmen garantiert. Als Entwickler bewegt man sich also, wenn man ein solches Framework verwendet, innerhalb dieses Rahmens und richtet sich nach den im Framework enthaltenen Entwurfsmustern. Damit das in dieser Stelle nicht in die Theorie der Softwareentwicklung abdriftet: Ein Framework ist also nichts anderes als eine wiederverwendbare, halbfertige Anwendung, auf deren Basis sich Applikationen erstellen lassen.
Solche Frameworks gibt es auch für JavaScript. Zweifellos eines der populärsten Frameworks ist dabei jQuery.

Bilder



 
Einer der größte Vorteil von jQuery ist zweifellos dessen geringe Größe von gerade einmal 16KB. Dadurch werden die Ladezeiten der Seiten durch das Einbinden des Frameworks nur unwesentlich erhöht. (Da gibt es deutlich ladeintensivere Frameworks).
Was aber leistet jQuery eigentlich?
  • DOM-Manipulation
  • Ajax-Funktionalitäten
  • Zahlreiche Effekte stehen zur Auswahl
  • Erweitertes Event-System
Diese Aufzählung zeigt, wie leistungsfähig das Framework tatsächlich ist. Und die genannten Funktionalitäten können Sie nun ganz einfach in Ihrer Webseite nutzen.
jQuery läuft momentan fehlerfrei unter folgenden Browsern:
  • Firefox 2
  • Internet Explorer 6+
  • Safari 2.0.2+
  • Opera 9+
  • Chrome

jQuery einbinden
Die offizielle Projektwebseite finden Sie unter http://jquery.com/. Von dort können Sie das Framework herunterladen. Der Download besteht aus einer JavaScript-Datei. Um das Framework nutzen zu können, ist nun zunächst einmal nichts anderes nötig, als diese Datei in die betreffende Seite einzubinden. Das geschieht genau so, wie man das von herkömmlichen JavaScript-Dateien her gewohnt ist.
<head>
 <script src="jquery.js" type="text/javascript"></script>
</head>

In diesem Beispiel wird davon ausgegangen, dass die jquery.js im gleichen Verzeichnis wie die zugrundeliegende HTML-Datei liegt. Das ist allerdings nicht die einzige Möglichkeit. Denn man kann jQuery tatsächlich auch nutzen, ohne dass das Framework lokal gespeichert werden muss. Bereitgestellt wird das Ganze von der Google AJAX Libraries API. Dabei handelt es sich um ein von Google initiiertes Projekt, über das sich zahlreiche Open-Source-JavaScript-Bibliotheken einbinden lassen. Der Aufruf mittels script-Element sieht in diesem Fall folgendermaßen aus:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Alternativ dazu lässt sich das auch über google.load() realisieren. Dafür muss zunächst die AJAX Library API von Google eingebunden werden.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Anschließend lässt sich jQuery ganz einfach laden.
<script type="text/javascript">
/* <![CDATA[ */
google.load("jquery", "1.3.2");
/* ]]> */
</script>

Welche dieser beiden Varianten Sie letztendlich verwenden, bleibt dabei freilich Ihnen überlassen. Allerdings ist die Zweite etwas langsamer, da hier zwei Anfragen an den Server gesendet werden müssen. (Wobei dieser Geschwindigkeitsnachteil eigentlich kaum messbar ist). Bei beiden Varianten können Sie explizit die jQuery-Version angeben, die eingebunden werden soll. Welche Versionen momentan zur Verfügung stehen, können Sie auf der Seite http://docs.jquery.com/Downloading jQuery nachlesen.

Bilder



Passen Sie, wenn Sie eine andere Version als 1.3.2 verwenden wollen, einfach den URL innerhalb des script-Elements an. Soll also jQuery 1.2.3 eingebunden werden, sähe der Aufruf folgendermaßen aus:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Auch im Zusammenhang mit der Google AJAX Libraries API kann man unterschiedliche jQuery-Versionen verwenden. Welche das genau sind, steht auf der Seite http://code.google.com/intl/de-DE/apis/ajaxlibs/.

Bilder



 
Momentan sind die folgenden Varianten möglich:
 
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3.0
  • Version 1.3.1
  • Version 1.3.2
Einbinden lassen sich diese Versionen immer auf die gleiche Weise. Wollen Sie also beispielsweise Version 1.2.6 nutzen, dann sähe der Aufruf folgendermaßen aus:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

So kann man alle verfügbaren jQuery-Versionen verwenden. Das gilt übrigens auch für die Variante mit google.load().
<script type="text/javascript">
/* <![CDATA[ */
google.load("jquery", "1.3.2");
/* ]]> */
</script>

Hilfreich ist das übrigens auch, wenn man mehrere JavaScript-Frameworks, die von der Google AJAX Libraries API unterstützt werden, gleichzeitig einbinden will. In diesem Fall kombiniert man einfach die Angaben.
<script type="text/javascript">
/* <![CDATA[ */
google.load("jquery", "1.3.2");
google.load("mootools", "1.2.3");
/* ]]> */
</script>

 
Einen Überblick darüber, welche Frameworks auf diese Weise nutzbar sind, können Sie sich unter http://code.google.com/intl/de-DE/apis/ajaxlibs/ verschaffen:

Bilder



 
Momentan lassen sich die folgenden Frameworks ansprechen:
  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)
  • Ext CoreNew!
  • Chrome FrameNew!
Da die wichtigsten Frameworks unterstützt werden, bleiben also kaum Wünsche offen.


Hallo, Welt!
Wie es gute Programmierer-Sitte ist, wird der Einstieg in jQuery anhand eines einfachen "Hallo, Welt"-Beispiels gezeigt. So können Sie auch gleich überprüfen, ob die Bibliothek korrekt eingebunden wurde. Neben der jQuery-Integration folgt dabei der erste direkte Zugriff auf das Framework. Als Ergebnis wird ein Meldungsfenster ausgegeben, in dem die Zeichenfolge Hallo, Welt! angezeigt wird.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
 google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
 $("a").click(function() {
 alert("Hallo, Welt!");
 });
});
/* ]]> */
</script>

[Beispiel anzeigen]

An dieser Stelle soll noch nicht explizit auf die Syntax eingegangen werden. Wichtig ist momentan lediglich, dass zunächst über $(document).ready(function()) ein sogenanntes ready-Element registriert wird. Dadurch wird sichergestellt, dass die entsprechenden DOM-Events zur Verfügung stehen. Anschließend wird der Selektor a angegeben, durch den alle a-Elemente des Dokuments ausgewählt werden. Durch die click()-Funktion weist man im aktuellen Fall jedem Link das Klick-Event zu.

 
Im Dokumentkörper werden auf diese Weise sämtliche a-Elemente, also Hyperlinks, angesprochen.
<a href="#">Klick mich!</a>

Sieht man sich das Ergebnis im Browser an, ergibt sich folgendes Bild:

Bilder



Nach dem Anklicken des Hyperlinks wird ein einfaches Meldungsfenster angezeigt. Realisiert wird das letztendlich über die bekannte JavaScript-Funktion alert(). So einfach lässt sich also jQuery nutzen. (Auch wenn man das Framework für solche einfachen Sachen natürlich normalerweise nicht verwendet. Die Funktionsweise ist aber auch bei komplexeren Anwendungen identisch).


Fazit
JavaScript-Frameworks stellen für jeden Entwickler eine enorme Arbeitserleichterung dar. Kein Wunder, schließlich erledigen die Frameworks im Hintergrund die Arbeit, während man "vorne" oftmals schon mit wenigen Zeilen Code ansprechende Ergebnisse erzielen kann. Da macht auch jQuery keine Ausnahme.



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Triggertrix
  • 07.02.2014 - 19:08

Entweder andere haben mehr zu lesen bekommen als ich oder das ist wirklich die absolut geringste Einführung die man sich vorstellen kann… ich habe jetzt nichts mehr gelernt als ich vorher wusste… schade

Portrait von Inhumantore
  • 29.10.2010 - 17:55

Sehr schön, noch verständlicher gehts echt nicht ;)

Portrait von Lothaar71
  • 30.09.2010 - 13:57

Dasist doch ein hilfreicher Einstieg in die Materie.

Portrait von Peter_PSD_Tut
  • 13.09.2010 - 18:47

Sehr verständlich, wann gibt es mehr?

Portrait von cwhowe
  • 23.02.2010 - 13:26

sehr gut hoffe ich werde die weiteren Beispiele anhand der Grundlagen auch verstehen

Portrait von egonP
  • 11.02.2010 - 21:21

Danke, mit dieser Einführung gehe ich jetzt mal an jquery ran!

Portrait von dagge
  • 16.12.2009 - 09:08

Super Erklärung, ich vermutete ja unter jQuery was gaaanz kompliziertes, aber jettz trau ich mich da auch drüber.
Besten Dank !

Portrait von silv
  • 20.11.2009 - 13:31

gut erklärt...sehr verständlich. danke

Portrait von blasco99
  • 20.11.2009 - 09:28

Sehr schön und verständlich erklärt

Danke dafür

Portrait von neverend1992
  • 19.11.2009 - 18:10

gute einleitung, sehr verständlich und auch für Anfänger ausfürhlich genug!

Portrait von ronnykilian
  • 19.11.2009 - 13:51

verständlich erklärt, danke dafür! Wünsche mir noch mehr derartige Workshops!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 19.11.2009 - 08:48

vielen Dank für den Workshop, er hat mich neugierig gemacht

Portrait von itDieter
  • 19.11.2009 - 08:16

Danke für die Einführung. Hoffe es gibt mehr davon. LG itDieter

Portrait von sloshed
  • 15.11.2009 - 11:59

Schön erklärt. Warte nun auf die folgenden Tutorials.

Portrait von cruz
  • 15.11.2009 - 10:55

Finde es gut, das das Thema jQuery mal erklärt wird, aber die Einführung ist meiner Meinung nach viel zu kurz geworden...

Portrait von parrot2603
  • 14.11.2009 - 23:54

Vielen Dank,
ich bin schon sehr gespannt, wie es weiter geht.
Gruß
Parrot

Portrait von spacle
  • 14.11.2009 - 12:43

sehr... toll ähm für meinen geschmack war es zu wenig und nur eine kleine einführung und kein tut daher auch nur 3 von 5 punkten

Portrait von Nerosmeel
  • 14.11.2009 - 11:15

Sehr schön erklärt, hoffe auf weitere tiefer gehende Tutorials ;-)

Portrait von weichei9k
  • 14.11.2009 - 10:35

schön detaliert dagestellt

x
×
×