Der Start mit jQuery 1 - Wiley-VCH · Der Start mit jQuery 1 In diesem Kapitel g jQuery holen g Eine Testumgebung erstellen g jQuery in einer Webseite verwenden g Code ausführen,

1Der Start mit jQueryIn diesem Kapitel

g jQuery holen

g Eine Testumgebung erstellen

g jQuery in einer Webseite verwenden

g Code ausführen, nachdem eine Webseite geladen wurde

V ielleicht lesen Sie dieses Buch, weil Sie eine Möglichkeit suchen, Bilder auf Ihrer Websiteelegant anzuzeigen. Vielleicht wollen Sie, dass Elemente auf Ihrer Seite ein- und ausge-

blendet werden. Oder vielleicht wollen Sie den Besuchern Ihrer Seite die Möglichkeit eröff-nen, Dateien hochzuladen. jQuery kann Ihnen dabei helfen, Ihre Webseite schnell und einfachum Hunderte interessante, interaktive Effekte zu ergänzen.

In diesem Kapitel erhalten Sie einen Überblick, wie jQuery funktioniert, wie Sie es auf Ihreneigenen Webseiten verwenden und wie Sie Ihre erste einfache Webseite mit einem jQuery-Ef-fekt erstellen.

Was jQuery für Sie tun kannjQuery stellt Webentwicklern und -designern eine einfache Möglichkeit zur Verfügung, ausge-feilte Effekte fast ohne Code zu erzeugen. Da sich jQuery so leicht implementieren lässt, wirdes auch immer beliebter. Beispiele für jQuery finden Sie überall im Netz. Facebook und Twit-ter verwenden zum Beispiel eine ganze Reihe von jQuery-Effekten.

Posten Sie einen neuen Tweet bei Twitter, wird die Seite nicht neu geladen. Stattdessen ruftder Code auf der Webseite eine jQuery-Funktion auf, die dafür sorgt, dass Ihr neuer Tweet er-scheint und alle anderen Tweets auf Ihrer Seite nach unten wandern. Ein weiteres jQuery-Fea-ture bei Twitter ist die Benachrichtigung, wenn ein neuer Tweet erscheint (siehe Abbil-dung 1.1).

Klicken Sie auf die Benachrichtigung, erscheinen die neuen Tweets auf Ihrer Seite und die äl-teren Tweets gleiten nach unten. Die Webseite wird nie neu geladen, sondern der Inhalt derSeite dynamisch geändert.

Eine Definition von jQueryUm jQuery zu verstehen, hilft es, ein bisschen über JavaScript zu wissen – eine Programmier-sprache, die Ihr Webbrowser versteht. JavaScript-Code kann mit Bildern und Text auf IhrerWebseite arbeiten – zum Beispiel ein Bild verbergen, Text verschieben oder den Inhalt nacheiner gewissen Zeit (oder wenn ein Besucher Ihrer Seite etwas tut, zum Beispiel den Mauszei-

25

Abbildung 1.1: Twitter benutzt eine ganze Reihe von jQuery-Funktionen.

ger über einen Link bewegt) verändern. JavaScript-Code kann dafür sorgen, dass ein Bild er-scheint, wenn jemand auf einer Webseite einen Button anklickt; er kann ein Fenster aufgehenlassen, nachdem der Besucher 30 Sekunden auf der Webseite unterwegs war, oder er kannprüfen, ob ein Besucher Ihrer Webseite ein Formular korrekt ausgefüllt hat. JavaScript ist sta-bil und wird allgemein verwendet, um Interaktivität und dynamische Effekte auf Webseiten zuermöglichen. Aber JavaScript ist eine vollständige Programmiersprache und um sie effektivbenutzen zu können, müssen Sie lernen, wie man programmiert.

jQuery ist eine Zusatzbibliothek für JavaScript. Stellen Sie sich jQuery als JavaScript-Codevor, der für Sie geschrieben wurde. Im Allgemeinen müssen Sie nur ein oder zwei Zeilen Codeauf Ihrer Seite einbinden, der den jQuery-Code aufruft. Die ganze harte JavaScript-Arbeit erle-digt jQuery dann für Sie.

Effekte und Ereignisse in jQueryjQuery ermöglicht es Ihnen, das Erscheinungsbild, die Position oder das Verhalten eines Ele-ments einer Webseite einfach zu ändern. In Kapitel 2 gehe ich detaillierter auf HTML-Elemen-te ein; für den Moment reicht es, sich ein Element als ein Ding auf einer Webseite vorzustel-len, zum Beispiel ein Bild, ein Textabschnitt, ein Hyperlink, eine Tabelle oder eine Überschrift.

jQuery für Dummies

26

jQuery-Code ermöglicht es Ihnen, Text- und Bildelemente auf einer Webseite mit verschie-densten Effekten zu versehen, zum Beispiel:

¡ hide: Verbirgt ein Element auf Ihrer Webseite.

¡ show: Zeigt ein Element auf Ihrer Webseite an, wenn es verborgen war.

¡ slideDown: Lässt ein Element auf Ihrer Webseite wie eine Leinwand nach unten gleiten.

¡ slideUp: Lässt ein Element auf Ihrer Webseite nach oben gleiten.

¡ fadeIn: Blendet ein verborgenes Element auf Ihrer Webseite langsam ein.

¡ fadeOut: Blendet ein Element auf Ihrer Webseite langsam aus.

¡ animate: Animiert ein Element auf Ihrer Webseite in eine bestimmte Richtung.

Sie können jQuery-Effekte auf Elemente auf Ihrer Seite anwenden, Sie können mit jQueryaber auch bestimmen, wann diese Effekte eingesetzt werden. Sie können genau festlegen,wann ein Element auf der Seite ausgeblendet, verschoben, animiert und so weiter wird. Hierein paar der Ereignisse, die jQuery zum Auslösen eines Effekts benutzen kann:

¡ load: Der Effekt tritt ein, wenn eine Webseite komplett in den Webbrowser geladen oderwenn ein Element auf einer Seite (zum Beispiel ein Bild) geladen wurde.

¡ mouseover: Der Effekt tritt ein, wenn der Mauszeiger über eine bestimmte Position aufeiner Webseite bewegt wird.

¡ mouseout: Der Effekt tritt ein, wenn der Mauszeiger von einer bestimmten Position aufeiner Webseite wegbewegt wird.

¡ change: Ändert sich der Wert von etwas (zum Beispiel der Text in einem Feld auf einemWebformular), wird ein Ereignis ausgelöst. Das ist nützlich, um sicherzustellen, ob je-mand die richtigen Informationen in ein Textfeld eingegeben hat.

Plugins verwendenDie wirkliche Leistungsstärke, die hinter jQuery steckt, sind die vielen Hundert Plugins, die eszum Erzielen erstaunlicher Effekte benutzt. Plugins sind JavaScript-Programme, die jQueryverwenden und erweitern. Ein Beispiel eines beliebten und beeindruckenden Plugins findenSie auf der Lightbox-Plugin-Webseite unter http:/leandrovieira.com/projects/jquery/lightbox. Dieses Plugin ermöglicht es den Besuchern Ihrer Seite, ein Bild anzukli-cken und damit eine größere Version des Bildes über der Seite schwebend angezeigt zu be-kommen (siehe Abbildung 1.2).

In diesem Buch werden Ihnen eine Reihe von jQuery-Plugins begegnen, die alle frei sind, ein-fach angewendet werden können und eine einfache Webseite besser aussehen lassen.

1 z Der Start mit jQuery

27

Abbildung 1.2: Ein Lightbox-Plugin für jQuery

jQuery installierenBevor Sie jQuery benutzen können, müssen Sie eine Version herunterladen. Dann müssen Sieentscheiden, wo es untergebracht werden soll. In diesem Abschnitt erkläre ich die grundle-genden Schritte, um eine Version von jQuery zu erhalten und diese dann am richtigen Ort ab-zulegen – je nachdem, ob Sie auf Ihrem PC oder auf einem Webserver arbeiten. Anschließendzeige ich Ihnen, wie Sie eine Codezeile in Ihrer HTML-Datei oder Webseite einbinden, umjQuery-Effekte auf Ihrer Webseite zu erhalten.

jQuery herunterladenUm eine Version von jQuery zu erhalten, gehen Sie wie folgt vor:

1. Surfen Sie zu jquery.com und klicken Sie auf den Button DOWNLOAD (JQUERY); auf derrechten Seite (siehe Abbildung 1.3).

Durch den Klick auf diesen Button erhalten Sie direkt die neueste Version von jQuery. Inmeinem Fall ist der Dateiname jquery–1.7.1.min.js. Ihre Version ist eventuell neuerund besitzt eine andere Nummer, aber das macht keinen Unterschied für den Code und dieBeispiele in diesem Buch aus.

jQuery für Dummies

28

Abbildung 1.3: Laden Sie die neueste Version von jQuery unter jquery.com herunter.

Das min im Dateinamen bedeutet, dass die Datei minifiziert wurde. Dabei wurdenunnötige Leerzeichen und Kommentare entfernt, sodass die Datei kleiner wird.Im Allgemeinen ist es am besten, die minifizierte Version von jQuery zu verwen-den.

2. Speichern Sie die jQuery-Datei.

Abhängig vom verwendeten Browser erscheint ein Dialogfenster, in dem Sie gefragt wer-den, ob Sie diese Datei öffnen oder speichern wollen.

Wenn der Browser kein Dialogfenster anzeigt, wird Ihnen stattdessen eine Seitemit JavaScript-Code präsentiert. In diesem Fall wählen Sie DATEI 9SPEICHERN UNTER

und speichern die Datei (siehe Abbildung 1.4).

3. Speichern Sie diese Datei in einem Ordner Ihrer Wahl auf Ihrem Computer.

1 z Der Start mit jQuery

29

Abbildung 1.4: Speichern der jQuery-Datei in einem Ordner

Einen Ordner für Übungszwecke einrichtenNachdem Sie nun eine lokale Version der jQuery-Datei vorliegen haben, brauchen Sie einPlätzchen auf Ihrem Computer, an dem Sie HTML-Dateien erstellen können, die jQuery be-nutzen. Dazu gehen Sie wie folgt vor:

1. Erstellen Sie einen Ordner auf Ihrem Computer, der sich schnell erreichen lässt, undgeben Sie ihm den Namen webtest.

Auf einem PC können Sie den Ordner auf Laufwerk C: als C: webtest anlegen. Aufeinem Mac können Sie den Ordner auf dem Schreibtisch erstellen.

2. Erstellen Sie im Ordner webtest zwei Ordner namens js und images.

In Abbildung 1.5 sehen Sie meinen Ordner webtest und die Unterordner darin.

3. Kopieren oder verschieben Sie die jQuery-Datei (in meinem Fall jquery–1.7.1.min.js)in den Ordner js.

jQuery für Dummies

30

Abbildung 1.5: Der Ordner webtest mit den Unterordnern js und images

jQuery von einer Webseite aus aufrufenNachdem Sie Ihr Verzeichnis eingerichtet und die jQuery-Datei im Ordner js gespeicherthaben, können Sie Ihre erste Webseite erstellen.

Für den Rest des Buches benötigen Sie einen HTML-Editor oder zumindest einenTexteditor. Benutzen Sie einen PC, können Sie Notepad über START 9ALLE PROGRAM-

ME 9ZUBEHÖR 9NOTEPAD starten. Auf dem Mac können Sie TextEdit über PROGRAMME 9TEXTEDIT benutzen.

Verwenden Sie TextEdit auf dem Mac, müssen Sie darauf achten, zuerst FORMAT 9 IN

REINEN TEXT UMWANDELN aufzurufen.

In den folgenden Schritten erstellen Sie eine HTML-Seite und fügen eine Codezeile hinzu, diedie Seite mit der jQuery-Bibliothek verbindet. Diese Seite macht nichts besonders Spannen-des, aber es ist ausgesprochen wichtig, den jQuery-Code korrekt in Ihrer Webseite einzubin-den. jQuery funktioniert schon dann nicht richtig, wenn Sie nur ein Zeichen falsch eingeben,seien Sie daher sorgfältig.

1 z Der Start mit jQuery

31

Um Ihre Seite anzulegen, gehen Sie wie folgt vor:

1. Öffnen Sie den Text- oder HTML-Editor Ihrer Wahl.

2. Geben Sie den folgenden Code im Textdokument ein:

<!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Strict//EN''''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd''>

<html><head><title>Meine Testseite</title></head><body><p>Dies ist meine Testseite.</p></body></html>

Listing 1.1: Grundlegender Code zum Anlegen einer Seite

Sie können diesen und die weiteren in diesem Buch verwendeten Codes unterwww.downloads.fuer–dummies.de herunterladen und in Ihren Text- oderHTML-Editor einfügen.

3. Speichern Sie diese Datei im Ordner webtest (den Sie im letzten Abschnitt angelegthaben) unter dem Namen test.html.

Egal welchen Editor Sie verwenden, achten Sie darauf, dass Sie Ihre Dateien mitder Endung .html abspeichern, nicht mit .txt.

Sie müssen nun noch die Codezeile einfügen, mit der die jQuery-Bibliothek mit dieserSeite verbunden wird.

4. Fügen Sie direkt nach der HTML-Zeile <title>Meine Testseite</title> die folgendeCodezeile ein:

<script type=''text/javascript'' src=''js/jquery-1.7.1.min.js''></script>

Der Dateiname von jQuery (hier jquery–1.7.1.min.js) muss dem Namen der Dateientsprechen, die Sie von jquery.com heruntergeladen haben. Mit dieser Zeile wird diejQuery-Bibliothek aufgerufen. Wenn Sie später dieser Webseite ein paar einfache Code-zeilen hinzufügen, weiß Ihr Webbrowser, wo er jQuery findet.

5. Speichern Sie die Datei test.html erneut.

Dieses Mal wird Ihre Datei mit der zusätzlichen Codezeile abgespeichert.

jQuery für Dummies

32

Eine Webseite auf Ihrem Computer betrachtenSie haben eine einfache HTML-Seite erstellt, die Sie nun in Ihrem Browser betrachten sollten.Um die Seite zu öffnen, gehen Sie wie folgt vor:

1. Starten Sie den Browser Ihrer Wahl.

In diesem Beispiel verwende ich Safari.

2. Wählen Sie DATEI 9DATEI ÖFFNEN (oder ABLAGE 9DATEI ÖFFNEN).

Es erscheint ein Dialogfenster zum Öffnen von Dateien.

3. Wechseln Sie zum Ordner webtest und wählen Sie die oben erstellte Datei test.htmlaus.

4. Klicken Sie auf OK.

Ihre Webseite erscheint nun in Ihrem Browser (siehe Abbildung 1.6).

Diese Seite enthält den Titel Meine Testseite und die Textzeile Dies ist meine Test-seite. Der jQuery-Code ist über Ihre Webseite erreichbar, aber Sie verwenden ihn nochnicht.

Ein erster jQuery-CodeNachdem Sie nun wissen, wie Sie eine einfache Webseite mit einem <script>-Tag erstellen,das die jQuery-Bibliothek integriert oder aufruft, können Sie Ihren ersten jQuery-Effekt er-zeugen. In diesem Abschnitt fügen Sie Ihrer Seite ein Bild hinzu und schreiben jQuery-Code,der Informationen zu diesem Bild in einer Alert-Box anzeigt. Das ist nicht die spannendsteAnwendung für jQuery, aber sie zeigt die grundlegenden Techniken, die Sie in diesem Buchverwenden werden.

So fügen Sie Ihrer HTML-Seite ein Bild hinzu:

1. Suchen Sie sich eine kleine .gif-Bilddatei und speichern Sie sie im Ordner images,den Sie im Ordner webtest angelegt haben.

Verwenden Sie möglichst ein Bild, das nicht größer als 300x300 Pixel ist.

Haben Sie kein .gif-Bild zur Hand, können Sie folgende Datei herunterladen:http://media.wiley.com/spa–assets/site/dummies2/include/images/topnav/home.gif

Diese Datei enthält ein kleines Bild eines Hauses. Wählen Sie DATEI 9SEITE SPEI-

CHERN UNTER und speichern Sie dieses Bild im Ordner images unter webtest.

1 z Der Start mit jQuery

33

Abbildung 1.6: Eine einfache Webseite mit Code, der jQuery aufruft

2. Öffnen Sie die Datei test.html in einem Texteditor.

3. Fügen Sie nach der Zeile <p>Dies ist meine Testseite</p> folgenden Code ein:

<img src=''images/home.gif'' height=''28'' width=''28'' alt=''Dies ist ein Testbild.''>

Wenn Sie eine Bilddatei mit einem anderen Namen verwenden, ändern Sie home.gif ent-sprechend ab.

Schauen Sie sich das <img>-Tag einmal genauer an. Es enthält Code, der als At-tribute bezeichnet wird. Die Attribute sind src, height, width und alt. Jedesdieser Attribute enthält Informationen zum Bild. Im src-Attribut finden Sie denDateinamen und den Ablageort für das Bild. Die Attribute height und widthenthalten die Größe des Bildes in Pixeln. Das Attribut alt gibt zusätzlichen Textan, der eingeblendet wird, wenn der Mauszeiger über das Bild bewegt wird oderwenn das Bild nicht angezeigt werden kann.

4. Speichern Sie die Datei test.html, lassen Sie sie aber im Texteditor geöffnet.Betrachten Sie Ihre Seite erneut im Webbrowser, sieht sie wie in Abbildung 1.7 aus.

jQuery für Dummies

34

Abbildung 1.7: Die Seite test.html mit einem Bild

Jetzt können Sie jQuery-Code einsetzen. In den folgenden Schritten fügen Sie Code hinzu,der Informationen über das Bild ausgibt:

1. Ist test.html noch nicht in Ihrem Texteditor geöffnet, öffnen Sie die Datei jetzt.

2. Finden Sie die <script>-Zeile, mit der Sie jQuery aufrufen.

3. Unter dieser Zeile – nach dem </script>-Tag – fügen Sie folgenden Code ein:<script type=''text/javascript''>$(document).ready(function()

// Hier passiert etwas

);</script>

Dieser Code wird Ihnen im Buch wieder und wieder begegnen. Mit $(document).readywird eine jQuery-Funktion aufgerufen, die den Browser anweist, nach dem Laden einesbestimmten Teils der Seite etwas zu tun. Allerdings müssen Sie ihm immer noch sagen,was zu tun ist.

1 z Der Start mit jQuery

35

Das Dollarzeichen im Code bedeutet, dass der Code mit jQuery interagiert, indemer eine jQuery-Funktion aufruft. Das $-Zeichen ist eine Kurzform für das Code-wort jQuery.

Die Zeile // Hier passiert etwas ist ein Kommentar. Die beiden Schräg-striche weisen den Webbrowser an, den Text, der in der Zeile danach folgt, zu ig-norieren. Es ist häufig praktisch, Code mit Kommentaren zu versehen, damit Sieselbst wissen, was noch zu tun ist oder was getan wurde.

4. Ersetzen Sie die Zeile // Hier passiert etwas durch diesen Code:alert(jQuery('img').attr('alt'));

Erinnern Sie sich an das $-Zeichen? Die eben angegebene Codezeile kann auchwie folgt geschrieben werden:alert($('img').attr('alt'));

5. Speichern Sie die Datei, aber lassen Sie sie im Texteditor geöffnet. Schauen Sie sie sichim Browser an.

Die hinzugefügte Zeile weist den Browser an, eine JavaScript-Alert-Box zu öffnen, wenndie Datei fertig geladen ist. Abbildung 1.8 zeigt diese Alert-Box. Dabei wird der Text ange-zeigt, der sich im alt-Attribut des Bildes befindet. In Abbildung 1.8 sehen Sie auch dengesamten Quellcode für test.html.

Abbildung 1.8: Eine Alert-Box zeigt den Text des alt-Attributs des Bildes.

jQuery für Dummies

36

6. Ändern Sie den alert-Code, um die Höhe des Bildes auszugeben:alert(jQuery('img').attr('height'));

7. Speichern Sie die Datei test.html und betrachten Sie sie in Ihrem Webbrowser.In der Alert-Box wird nun die Höhe des Bildes angezeigt.

Wie jQuery mit Ihrer Webseite zusammenarbeitet

Im Prinzip enthält eine Webseite ein <script>-Tag, über das die jQuery-Bibliothek ein-gebunden wird, und einen <script>-Block mit JavaScript-Code, in dem sich Aufrufe vonFunktionen aus der jQuery-Bibliothek befinden.

Das Verwenden von JavaScript-Code für den Aufruf von jQuery-Funktionen ist zunächstvielleicht etwas verwirrend, aber machen Sie sich keine Gedanken. Entscheidend ist, einGespür dafür zu bekommen, wie der Code in diesem Kapitel funktioniert und was die ein-zelnen Elemente für eine Bedeutung haben. Im Folgenden erkläre ich Ihnen test.htmlZeile für Zeile, um es klarer zu machen:

¡ <!doctype ...>: Dieses lange Element weist den Webbrowser darauf hin, welcheHTML-Version im folgenden Code benutzt wird. Sie sollten es an den Anfang jederHTML-Seite stellen, die Sie anlegen.

¡ <html>: Dieses Element kennzeichnet den Anfang der HTML-Seite.

¡ <head>: Dieses Element kennzeichnet den Kopfabschnitt. Hier finden sich normaler-weise der Titel der Seite und Skriptelemente.

¡ <title>Meine Testseite</title>: Diese Zeile beschreibt den Titel der Seite.

¡ <script src=''js/jquery–1.7.1.min.js''></script>: Diese Zeile stellt denOrt der jQuery-Bibliothek bereit.

¡ <script type=''text/javascript''>: Dieses Skript-Tag definiert für den Brow-ser, dass es sich bei allem innerhalb dieses Tags um JavaScript-Code handelt.

¡ $(document).ready(function() : Das Dollarzeichen ist ein Alias für die jQuery-Funktion. Die Funktion ready wartet darauf, dass die Webseite geladen ist, dann wirdder Code in ihr ausgeführt.

¡ alert(jQuery('img').attr('height'));: Die alert-Funktion öffnet einePopup-Alert-Box. Die folgende jQuery-Funktion ruft wiederum die jQuery-Funktionattr auf. Diese Funktion gibt den Wert des in den Anführungszeichen angegebenenAttributs zurück – in diesem Fall die Höhe. Beachten Sie, dass sich vor der attr-Funktion der Text img befindet. Kurz gefasst besagt diese Funktion: »Suche nachallen img-Elementen, die im HTML-Code enthalten sind, und gib für das erste dieserElemente den Wert des Attributs height zurück.«

¡ );: Diese Zeichen schließen die geschweiften und die runden Klammern, die in derZeile $(document).ready(function() geöffnet wurden.

¡ </script>: Dieses Tag schließt das <script>-Tag und beendet den JavaScript-Codeblock.

1 z Der Start mit jQuery

37

¡ </head>: Dieses Tag schließt den Kopfabschnitt des HTML-Codes.

¡ <body>: Dieses Tag öffnet den Rumpfbereich, in dem sich vor allem HTML-Code, Textund Bilder befinden.

¡ <p>Dies ist meine Textseite.</p>: Diese Zeile ist eine Textzeile, die auf derSeite erscheint.

¡ < img src=''images/home.gif'' height=''28'' width=''28'' alt=''Dies istein Testbild.''>: Dieses img-Element zeigt auf der Webseite ein Bild mit einerReihe von Attributen an.

¡ </body>: Dieses Tag schließt den Rumpfbereich der Seite.

¡ </html>: Dieses Tag schließt die HTML-Seite.

Sie können Elemente und Text in jQuery-Funktionen mit einfachen oder doppel-ten Anführungszeichen umschließen, aber am besten verwenden Sie einfacheAnführungszeichen. Doppelte Anführungszeichen werden am besten im HTML-Code benutzt. Dies ist zum Beispiel eine jQuery-Funktion mit einfachen Anfüh-rungszeichen:

alert($('img').attr('width'));

und dies ist HTML-Code mit doppelten Anführungszeichen:

<img src=''images/home.gif'' height=''28'' width=''28'' alt=''Dies ist einTestbild.''>

jQuery für Dummies

38