jQuery - Vom Novizen zum Ninja

Transcription

60173-3 U1+U4 29.05.12 14:45 Seite 1
Aus dem Inhalt:
• Sich in jQuery verlieben
• Selektieren: Das Herz von jQuery
jQuery
Vom Novizen zum Ninja
jQuery ist die beliebteste JavaScript-Klassenbibliothek!
Als Programmierer sparen Sie enorm viel Zeit durch den
Einsatz von jQuery. Hier erfahren Sie, wie Sie mit jQuery
• Grundlegende Animationen und Effekte:
Verbergen und Aufdecken, Ein- und Ausblenden
• Animieren, Scrollen und Skalieren
• Bilder und Slideshows, Lightbox
• Expandierende Menüs, Accordion-Menüs
• Tabs, Tooltips und Panels
• Struktur, Ajax und Interaktivität
Ihrer Website beeindruckende Animationen und besondere
• Formulare, Kontrollelemente und Dialoge
Interaktivität verleihen können. Auch jQuery Mobile und
• Listen, Baumstrukturen und Tabellen
der Unterstützung mobiler Geräte ist ein eigenes Kapitel
• Plugins und fortgeschrittene Techniken
gewidmet. Lernen Sie mit diesem Buch die fortgeschrittenen
• Theme Rolling
Techniken und werden Sie zum echten jQuery-Ninja!
• jQuery Mobile
씰 Animationen und Bildergalerien mit jQuery
Wer die Besucher seiner Website beeindrucken will, wird an den
Animationen seine Freude haben, die mit jQuery über wenige Zeilen
Code erstellt werden können. Auch die Erstellung von Slideshows,
einer Lightbox, Bild-Miniaturübersichten und überblendbaren
Bildergalerien wird hier gezeigt.
씰 Formulare und Dialoge
Die Erstellung von Formularen ist oft eine lästige Aufgabe, aber auch
hier hilft jQuery. Nicht nur die Erstellung wird wesentlich einfacher –
Sie lernen auch, wie Sie Formulare blitzschnell validieren, dem Anwender
Über die Autoren:
Earle Castledine (aka Mr Speaker) ist als
bekannter JavaScript- und jQuery-Experte
weltweit an Entwicklungen beteiligt und auf
internationalen Konferenzen zu Web-Themen
mit Vorträgen vertreten.
Unterstützung anbieten und Elemente wie Checkboxen, Radio Buttons
oder Auswahllisten einsetzen. Dazu kommen Interaktionsmöglichkeiten
wie Datumswähler, Schieberegler und Drag and Drop.
씰 Plugins, Themes und fortgeschrittene Techniken
Über die Benutzung der üblichen UI-Komponenten hinaus bietet jQuery
eine fantastische Plugin-Architektur. In einem eigenen Abschnitt wird
verraten, wie Plugins erstellt werden und wie Sie sie grafisch an Ihre
Vorstellungen anpassen.
Know-how
ist blau.
Earle Castledine
Craig Sharkie
• CSS mit jQuery
Craig Sharkie arbeitete als Programmierer
für einige große Namen des Web, u. a. AOL,
Microsoft und Yahoo. Sein Weg hat ihn vom
Journalismus über die Beschäftigung als
Entwickler und einige internationale Vorträge
nun auch zur Tätigkeit als Buchautor geführt.
Auf www.buch.cd
jQuery Vom Novizen zum Ninja
Earle Castledine
Craig Sharkie
Castledine
Sharkie
Web-Entwicklung
jQuery
> Das JavaScript-Framework professionell einsetzen
> Interaktive Elemente in Webseiten integrieren
> Eindrucksvolle Animationen mit wenigen Zeilen Code erstellen
Der komplette Quellcode des Buches.
Scripte zum sofortigen Einsatz.
Besuchen Sie unsere Website
www.franzis.de
30,– EUR [D]
ISBN 978-3-645-60173-3
Profi-Wissen für alle jQuery-User
60173-3 Titelei_X 29.05.12 14:46 Seite 1
Earle Castledine / Craig Sharkie
jQuery
60173-3 Titelei_X 29.05.12 14:46 Seite 3
Earle Castledine
Craig Sharkie
jQuery
60173-3 Titelei_X 29.05.12 14:46 Seite 4
Bibliografische Information der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;
detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.
Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer
Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,
darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte
Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen
oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei
Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder
zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung
ist nur mit Zustimmung des Lizenzinhabers möglich.
© 2012 Franzis Verlag GmbH, 85540 Haar bei München
Authorized German translation of the English edition of jQuery Novice to Ninja 2nd ed (ISBN 9780987153012)
© 2012, SitePoint Pty Ltd.
This translation is published and sold by permission of O'Reilly Media, Inc.
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und
Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des
Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.
Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden,
sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller.
Lektorat: Anton Schmid
Satz: DTP-Satz A. Kugge, München
art & design: www.ideehoch2.de
Druck: GGP Media GmbH, Pößneck
Printed in Germany
ISBN 978-3-645-60173-3
5
Vorwort
Egal, welcher Typ von Ninja Sie sind – ein kochender, ein rechtsprechender oder gar ein
wahrer Ninja – Ihre Virtuosität beginnt damit, die grundlegenden Methoden Ihres Fachs
zu meistern. Sobald Sie diese beherrschen, liegt es in Ihren Händen als versierter Ninja,
dieses Wissen kreativ und originell anzuwenden.
In jüngster Zeit hat jQuery sich als einfaches, aber leistungsstarkes Instrument erwiesen,
um Webseiten zu kontrollieren und zu transformieren, wobei Sie selbst den widerspenstigsten und ältesten Browsern Ihren Willen aufzwingen können. jQuery ist eine
Bibliothek, die den beiden grundlegenden Zwecken dient, Elemente auf einer Webseite
zu verändern und sie mit Ajax-Requests zu versorgen. Natürlich muss man dazu einige
Befehle beherrschen, doch sie sind stimmig und leicht zu erlernen. Sobald Sie Ihre ersten
Aktionen geschrieben haben, werden Sie sich den jQuery-Bausteinen derart hingeben,
dass Ihre Freunde und Familie sich wünschen würden, Sie wären nie eingestiegen!
Ganz oben auf der Liste der jQuery-Bibliothek steht jQuery UI: ein Set mit ansehnlichen
Kontrollfunktionen und Widgets (wie Accordions, Tabs und Dialogen), das mit einer
Sammlung von umfangreichen Behaviors zur Implementierung eigener Kontrollfunktionen einhergeht. Mit jQuery UI basteln Sie mühelos fantastische Interfaces zusammen!
Im Grunde genommen ist jQuery ein Tool, mit dem wir die Benutzerfreundlichkeit
unserer Webseiten und damit die Erfahrungen der Nutzer verbessern können. Die
Benutzerfreundlichkeit bezieht sich auf die Untersuchung der Prinzipien zur beabsichtigten Effizienz oder Eleganz eines Objekts. Mit dem bloßen Schein von trendigem
Design hat jQuery nichts zu tun, vielmehr können wir damit unsere Seiten auf ebenso
raffinierte wie außergewöhnliche Weise rasch gestalten: das Spektrum reicht von der
gekonnten Ausarbeitung eines einfachen Sliding Panel bis hin zum Implementieren
einer ganz neuen Nutzer-Interaktion, die Sie fast im Schlaf erfinden können.
Ein Ninja zu werden bedeutet nicht, dass man eine API herauf- und herunterzubeten
lernt, denn das zeugt nur von einem guten Gedächtnis. Das wahre Können und sein
Nutzen entstehen dann, wenn Sie Ihr Wissen anwenden, um etwas Außergewöhnliches
zu vollbringen: etwas, das die vereinten bisherigen Erkenntnisse nutzt, um noch ein
wenig besser zu sein als alles, was bisher vollbracht wurde. Definitiv kein einfaches
Unterfangen, doch dank jQuery macht bereits der Versuch Spaß!
Wer dieses Buch lesen sollte
Wenn Sie ein Front-End-Webdesigner sind, der auf seinen Seiten mit coolen Interaktionen aufwarten möchte, das ganze Gerede über jQuery mitbekommen hat und herausfinden will, was daran wahr ist, wird Sie dieses Buch auf die richtige Spur bringen. Wenn
Sie sich mit JavaScript herumschlagen und von der Komplexität scheinbar harmloser
Aufgaben frustriert sind, zeigen wir Ihnen, wie jQuery helfen kann. Selbst wenn Sie mit
den Grundlagen von jQuery vertraut sind, aber Ihre Fähigkeiten auf ein höheres Level
6
Vorwort
bringen möchten, werden Sie tiefgreifende Einblicke und eine Fülle an Ratschlägen zu
guter Codierung erhalten.
Sie sollten bereits etwas Erfahrung mit fortgeschrittenem HTML und CSS-Regeln haben,
da jQuery Seitenelemente mit CSS-Stilen formatiert. Grundlegende Programmierkenntnisse sind hilfreich, denn jQuery basiert – trotz seiner schlauen Abstraktionen – immer
noch auf JavaScript. Angesichts dessen haben wir versucht, den Einsatz all unserer
JavaScript-Konzepte zu erklären, sodass Sie schnelle Erfolge erzielen werden.
Was in diesem Buch steht
Wenn Sie am Ende dieses Buchs angelangt sind, werden Sie in der Lage sein, ihren
bislang statischen HTML- und CSS-Webseiten mit dem Zauber von jQuery Leben einzuhauchen. Sie erfahren, wie Sie Elemente auf einer Seite auswählen, bewegen oder
gänzlich entfernen und wie Sie mit Ajax neue Elemente hinzufügen und animieren
können … kurzum, wie Sie es schaffen, HTML und CSS Ihrem Willen zu beugen! Wir
beschäftigen uns auch mit der umfangreichen Funktionalität der jQuery-UI-Bibliothek
und untersuchen das jüngst erschienene Framework von jQuery Mobile.
Dieses Buch umfasst die folgenden neun Kapitel sowie drei Anhänge. Wenn Sie die
Thematik vollständig erfassen wollen, lesen Sie es in der Reihenfolge vom Anfang bis
zum Ende durch; nach Bedarf steigen Sie einfach dort ein, wo Sie die Fortbildung zu
einem spezifischen Thema benötigen.
Kapitel 1: Sich in jQuery verlieben
Bevor wir all die Besonderheiten von jQuery vorstellen, geben wir einen Ausblick,
warum Sie jQuery überhaupt erst nutzen sollten: warum es zu mehr taugt als zum
Verfassen eigener JavaScripte und warum es besser ist als andere JavaScript-Bibliotheken. Wir frischen einige CSS-Konzepte auf, die den Schlüssel zum Verständnis für
jQuery darstellen, und führen Sie in die grundlegende Syntax ein.
Kapitel 2: Auswählen, Dekorieren und Verbessern
Der offenkundigste Vorteil von jQuery gegenüber bloßem JavaScript liegt in der Leichtigkeit, mit der Sie Ihre Zielelemente auf einer Seite auswählen können, um mit ihnen zu
spielen. Wir beginnen dieses Kapitel mit einem Exkurs in die Welt der jQuerySelektoren, mit denen Sie beliebige Elemente auf der Seite auswählen können, und
zeigen Ihnen, wie Sie die CSS-Eigenschaften dieser Elemente via jQuery frei anpassen.
Kapitel 3: Animieren, Scrollen und Skalieren
jQuery glänzt in Sachen Animation: egal, ob Sie ein Menü elegant ins Sichtfeld gleiten
lassen wollen oder ein Dialog über den Bildschirm huschen soll – jQuery macht's möglich! In diesem Kapitel erforschen wir die weitreichenden Animations-Features von
jQuery und übertragen diese anhand einfacher Interface-Komponenten in die Praxis.
Desweiteren werfen wir einen kurzen Blick auf Scroll- und Skalierungsfunktionen.
Vorwort
7
Kapitel 4: Bilder und Slideshows
Nachdem wir uns mit den Grundlagen von jQuery vertraut gemacht haben, können wir
uns nun an den Aufbau von zwei der beliebtesten jQuery-Widgets machen: Bildergalerien und Slideshows. Sie lernen, wie Sie eine Lightbox, scrollende Miniaturen-Übersichten und überblendbare Bildergalerien gestalten, sowie ein Fotoalbum im iPhoto-Stil.
Kapitel 5: Menüs, Tabs, Tooltips und Panels
Da Sie nun in der Lage sind, coole Widgets für die Benutzeroberfläche zu gestalten,
gehen wir einen Schritt weiter zu fortschrittlicheren Kontrollelementen: Drop-downMenüs, Accordions, Interfaces mit Tabs, Tooltips und verschiedene Arten von Inhaltsbereichen. Unsere Websites verwandeln sich zunehmend vom Broschürenstil der 1990er
zu den Rich Internet Applications des 21sten Jahrhunderts!
Kapitel 6: Struktur, Ajax und Interaktivität
Darauf haben Sie alle gewartet: Ajax! Um Applikationen im echten Desktop-Stil ohne
störende Unterbrechungen durch Seitenaktualisierungen zu erstellen, benötigen Sie
einen ausgeklügelten Weg, um Daten vom und zum Server zu bewegen. Und diesen
Weg beschreibt Ajax. jQuery beinhaltet zahllose Methoden zur Behandlung von AjaxAnfragen in einer simplen, Browser-übergreifenden Art, die Ihnen ein Lächeln aufs
Gesicht zaubern wird. Damit wird unser Code natürlich auch immer umfangreicher,
sodass es an der Zeit ist, über die besten Vorgehensweisen zur Strukturierung und Organisation nachzudenken.
Kapitel 7: Formulare, Kontrollelemente und Dialoge
Formulare sind – zum Verdruss vieler Entwickler – die Grundsteine einer jeden WebApplikation. Deshalb verraten wir Ihnen in diesem Kapitel, was uns jQuery in Sachen
Vereinfachung des Formular-Scripting zu bieten hat. Sie lernen, wie Sie Formulare
blitzschnell validieren, dem Anwender Unterstützung anbieten und Elemente wie
Checkboxen, Radio Buttons oder Auswahllisten einsetzen. Dann werfen wir einen Blick
auf einige unkonventionelle Wege der Interaktion: Datumswähler, Schieberegler sowie
Drag and Drop. Abgerundet wird dieses Kapitel von neuen Design-Ansätzen für modale
Dialoge und nicht-modale Benachrichtigungs-Stile. Was für ein Kapitel!
Kapitel 8: Listen, Baumstrukturen und Tabellen
Egal, wie sehr sich Ihre Applikation an »Web 2.0« orientiert – oftmals werden Sie auf
klassische Elemente wie simple Listen, einfache Baumstrukturen und die in der Vergangenheit reichlich missbrauchten Tabellen zurückgreifen. Dieses Kapitel beweist Ihnen,
dass jQuery selbst die langweiligste Aufgabe zu einem spaßigen Unterfangen machen
kann. Darüber hinaus erfahren Sie, wie Sie Listen dynamisch sortierbar machen und
Tabellen in hochfunktionale Datenraster konvertieren können.
8
Vorwort
Kapitel 9: Plugins, Themes und fortgeschrittene Techniken
jQuery bietet noch viel mehr als nur coole DOM-Manipulation, einfache Ajax-Anfragen
und ansprechende UI-Komponenten. Es verfügt über fortgeschrittene Funktionen, die
sich speziell an die Ninjas unter den Entwicklern wenden: eine fantastische PluginArchitektur, einen flexiblen und erweiterbaren Kern, frei anpassbare Ereignisse und
vieles mehr. Im letzten Kapitel behandeln wir die Themes von jQuery UI und verraten
Ihnen, wie Sie Ihre eigenen Plugins erstellen und diese grafisch an Ihre Vorstellungen
anpassen. Am Ende werfen wir noch einen Blick auf das brandneue jQuery-MobileFramework, mit dem Sie Ihre Ninja-Fähigkeiten auch auf mobile Geräte bringen
können.
Anhang A: Referenzmaterial
jQuery setzt auf Flexibilität und bietet viele Optionen zur Verwendung in einem breiten
Spektrum von Applikationen. Egal ob es sich um die Verwendung von Ajax, die Sicherstellung der Browser-Kompatibilität oder das Handling von Ereignissen handelt –
jQuery bietet die nötigen Funktionen, um auf nahezu alle denkbaren Anwendungsfälle
einzugehen.
Anhang B: JavaScript-Leckerbissen
Wir wissen alle, dass bei jQuery reines JavaScript unter der Haube steckt. Deshalb
bekommen Sie hier einen Crashkurs in Sachen JavaScript. Die erworbenen Grundkenntnisse helfen Ihnen dabei, die Funktionsweise von jQuery besser nachvollziehen zu
können.
Anhang C: Plugin-Helfer
jQuery bietet eine Vielzahl von Funktionen und Helfern, die Ihnen beim Entwickeln
eigener Plugins helfen. Im letzten Anhang werfen wir deshalb einen Blick auf praktische
Plugin-Helfer wie den jQuery-Stapel und Tools zum Komprimieren Ihrer Dateien.
Die Buch-Website
Unter http://www.buch.cd finden Sie die Website zum Buch. Diese enthält das CodeArchiv.
Während Sie sich durch dieses Buch arbeiten, stoßen Sie auf einige Referenzen zum
Code-Archiv. In diesem herunterladbaren ZIP finden Sie jede Zeile Code, die in diesem
Buch abgedruckt ist. Wenn Sie also schnell mal einen Code ausprobieren und sich die
Zeit zum Eintippen sparen möchten, laden Sie einfach die Archivdatei herunter.
Vorwort
9
Konventionen dieses Buchs
Auf den Buchseiten werden Sie auf einige unterschiedlich formatierte Textpassagen
stoßen. Die Formatierung dient zur Unterscheidung verschiedener Informationsarten:
Beispiel-Code
Code wird in einer Schriftart mit fester Zeichenbreite dargestellt. Beispiel:
<h1>Ein perfekter Sommertag </h1>
<p>Es war ein schöner Tag für einen Spaziergang im Park. Die Vögel sangen und die
Kinder waren noch in der Schule.</p>
Wenn sich der Code im Archiv des Buchs befindet, wird der Dateiname an oberster
Stelle angegeben:
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
Wenn nur ein Teil der Datei wiedergegeben wird, indizieren wir dies mit dem Wort
Auszug:
example.css (Auszug)
border-top: 1px solid #333;
Wenn einem bestehenden Beispiel neuer Code hinzugefügt wird, erscheint der neue
Code fettgedruckt:
function animate() {
new_variable = "Hallo";
}
Wo bereits existierender Code erforderlich ist, sorgen drei Punkte als Auslassungszeichen dafür, dass nicht jede Codezeile wiederholt werden muss:
function animate() {
…
return new_variable;
}
Einige Codezeilen sind so lang, dass sie nicht auf die Seitenbreite dieses Buchs passen
und aus Layoutgründen umgebrochen werden mussten. Ein ➥ indiziert so einen Zeilenumbruch, den Sie bei der Codeeingabe ignorieren sollten:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
➥ets-come-of-age/");
10
Vorwort
Tipps, Anmerkungen und Warnungen
Hey, Du!
Praktische Tipps helfen Ihnen weiter.
Ähm – entschuldigen Sie bitte…
Anmerkungen sind nützliche, aber nicht unbedingt erforderliche Zusatzinformationen,
die mit dem eigentlichen Thema zusammenhängen.
Stellen Sie sicher …
… dass Sie sich diese wichtigen Hinweise zu Gemüte führen.
Aufgepasst!
Warnungen vor typischen Fallstricken und Stolpersteinen, die Ihnen das Entwickler-Leben schwer
machen können.
11
Inhaltsverzeichnis
1
Sich in jQuery verlieben .............................................................................. 17
1.1
Was ist so gut an jQuery? ............................................................. 17
1.1.1
Browserübergreifende Kompatibilität ............................................ 18
1.1.2
CSS3-Selektoren ........................................................................... 18
1.1.3
Hilfreiche Utilities ......................................................................... 18
1.1.4
jQuery UI ....................................................................................... 19
1.2
Plugins ......................................................................................... 20
1.2.1
Das Markup sauber halten ............................................................ 21
1.2.2
Breite Akzeptanz ........................................................................... 22
1.3
Wo ist die Kehrseite der Medaille? ................................................ 22
1.4
jQuery herunterladen und einbinden ............................................ 23
1.4.1
jQuery herunterladen .................................................................... 23
1.4.2
Das Google Content Distribution Network (CDN) ............................ 24
1.4.3
Weitere CDN-Optionen .................................................................. 26
1.4.4
Nightlies und Github ..................................................................... 26
1.4.5
Unkomprimiert oder komprimiert? ................................................ 26
1.5
Die Anatomie eines jQuery-Scripts ............................................... 27
1.5.1
Das jQuery-Kürzel ......................................................................... 27
1.5.2
Ein jQuery-Statement analysieren ................................................. 28
1.6
DOM: Das Document Object Model ............................................... 29
2
Auswählen, Dekorieren und Verbessern ...................................................... 31
2.1
Sicherstellen, dass die Seite bereit ist .......................................... 31
2.2
Selektieren: Das Herz von jQuery .................................................. 32
2.2.1
Einfache Auswahl ......................................................................... 33
2.2.2
Die Auswahl eingrenzen ................................................................ 35
2.2.3
Unsere Auswahl checken .............................................................. 35
2.2.4
Filter ............................................................................................. 36
2.2.5
Mehrfachselektoren ...................................................................... 36
2.2.6
Werden Sie zum Selektions-Profi .................................................. 36
2.3
Dekorieren: CSS mit jQuery .......................................................... 37
2.3.1
CSS-Eigenschaften auslesen ......................................................... 37
2.3.2
CSS-Eigenschaften anwenden ....................................................... 38
2.3.3
Klassen ......................................................................................... 40
12
Inhaltsverzeichnis
2.4
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
2.4.7
2.4.8
2.5
2.5.1
2.5.2
Verbessern: Effekte mit jQuery ..................................................... 42
Elemente verbergen und aufdecken .............................................. 42
Elemente ein- und ausblenden ..................................................... 44
Progressive Anpassung ................................................................. 46
Neue Elemente hinzufügen ........................................................... 46
Vorhandene Elemente entfernen ................................................... 49
Inhalte modifizieren ...................................................................... 49
Grundlegende Animationen: Ein- und Ausblenden mit Flair ........... 50
Callback-Funktionen ..................................................................... 51
Ein paar Tricks .............................................................................. 52
Elemente beim Hovern akzentuieren ............................................. 52
Spoiler aufdecken ......................................................................... 54
3
Animieren, Scrollen und Skalieren .............................................................. 57
3.1
Animieren ..................................................................................... 57
3.1.1
CSS-Eigenschaften animieren ....................................................... 57
3.1.2
Farbanimationen ........................................................................... 59
3.1.3
Easing ........................................................................................... 60
3.1.4
Fortgeschrittenes Easing ............................................................... 61
3.1.5
Aufklappende Inhaltsbereiche ...................................................... 63
3.1.6
Die Animations-Warteschlange ..................................................... 65
3.1.7
Chaining: Aktionen aneinanderreihen ........................................... 66
3.1.8
Chaining pausieren ....................................................................... 66
3.1.9
Animierte Navigation .................................................................... 67
3.1.10 Animierte Navigation: Klappe, die Zweite! ..................................... 70
3.1.11 Die jQuery-UI-Bibliothek ................................................................ 71
3.1.12 Lassen Sie sich animieren! ............................................................ 73
3.2
Scrollen ........................................................................................ 73
3.2.1
Das Ereignis scroll ..................................................................... 73
3.2.2
Mitlaufende Navigationsleiste ...................................................... 74
3.2.3
Das Dokument scrollen ................................................................. 76
3.2.4
Benutzerdefinierte Scrollleisten .................................................... 78
3.3
Skalieren ...................................................................................... 79
3.3.1
Das Ereignis resize ..................................................................... 79
3.3.2
Skalierbare Elemente .................................................................... 81
4
Bilder und Slideshows ................................................................................ 89
4.1
Die Lightbox ................................................................................. 89
4.1.1
Die benutzerdefinierte Lightbox .................................................... 89
4.1.2
Troubleshooting mit console.log ................................................ 93
4.1.3
ColorBox: Ein Lightbox-Plugin ....................................................... 94
Inhaltsverzeichnis
4.2
4.3
4.3.1
4.3.2
4.3.3
13
Bilder mit Jcrop zuschneiden ........................................................ 97
Slideshows ................................................................................. 100
Slideshows mit Cross-Fading ...................................................... 100
Scrollende Slideshows ................................................................ 112
Ein Slideshow-Widget im iPhoto-Stil ........................................... 118
5
Menüs, Tabs, Tooltips und Panels ............................................................. 125
5.1
Menüs ........................................................................................ 125
5.1.1
Expandierende Menüs ................................................................ 125
5.1.2
Indikatoren für offene/geschlossene Menüs ............................... 130
5.1.3
Menü per Hover aus- und einklappen .......................................... 131
5.1.4
Drop-down-Menüs ...................................................................... 132
5.2
Accordion-Menüs ....................................................................... 135
5.2.1
Ein einfaches Accordion .............................................................. 135
5.2.2
Accordions mit mehreren Ebenen ................................................ 139
5.2.3
Accordion-Menüs mit jQuery UI ................................................... 140
5.3
Tabs ........................................................................................... 141
5.3.1
Einfache Tabs ............................................................................. 141
5.3.2
Tabs mit jQuery UI ....................................................................... 143
5.4
Panels und Panes ....................................................................... 146
5.4.1
Aufklappbares Login-Formular .................................................... 146
5.4.2
Ein animiertes Overlay ................................................................ 147
5.5
Tooltips ...................................................................................... 150
5.5.1
Einfache Tooltips ........................................................................ 150
5.5.2
Fortgeschrittene Tooltips und Dialoge ......................................... 153
6
Struktur, Ajax und Interaktivität ................................................................ 159
6.1
Ideale Vorgehensweisen bei der Strukturierung ......................... 159
6.1.1
Sauberes jQuery ......................................................................... 159
6.1.2
Client-seitiges Templating ........................................................... 164
6.1.3
Browser Sniffing (… ist ganz böse!) ............................................. 167
6.2
Ajax Crash-Kurs .......................................................................... 168
6.2.1
Was ist Ajax? ............................................................................... 168
6.2.2
Remote-HTML laden .................................................................... 169
6.2.3
Hyperlinks erweitern mit Hijax ..................................................... 169
6.2.4
HTML mit Selektoren herauspicken ............................................. 171
6.2.5
Fortgeschrittene Anwendung von load ....................................... 172
6.2.6
An die Zukunft denken: on und off ............................................. 172
6.2.7
Daten auslesen mit $.getJSON ................................................... 174
6.2.8
Twitter-Suche auf Client-Seite ..................................................... 175
14
Inhaltsverzeichnis
6.2.9
6.2.10
6.2.11
6.2.12
6.2.13
6.3
6.3.1
6.3.2
Das jQuery-Ajax-Arbeitspferd ...................................................... 176
Globale Ajax-Einstellungen ......................................................... 177
Externe Scripts mit $.getScript laden ...................................... 177
GET- und POST-Anfragen .............................................................. 178
jQuery-Ajax-Ereignisse ................................................................ 179
Interaktivität mit Ajax ................................................................. 180
Eine Ajax-Fotogalerie .................................................................. 181
Image Tagging ............................................................................. 192
7
Formulare, Kontrollelemente und Dialoge ................................................. 199
7.1
Formulare ................................................................................... 199
7.1.1
Einfache Formularvalidierung ...................................................... 200
7.1.2
Prüfung mit dem Validation-Plugin .............................................. 204
7.1.3
Indikator für Maximallänge ......................................................... 206
7.1.4
Feldbezeichnungen im Eingabefeld ............................................. 208
7.1.5
Alle Checkboxen prüfen .............................................................. 209
7.1.6
Inline-Bearbeitung ...................................................................... 210
7.1.7
Automatisches Vervollständigen ................................................. 215
7.1.8
Sterne-Bewertung ....................................................................... 217
7.2
Kontrollelemente ........................................................................ 222
7.2.1
Buttons ....................................................................................... 223
7.2.2
Datumswähler ............................................................................. 224
7.2.3
Schieberegler .............................................................................. 226
7.2.4
Drag and Drop ............................................................................. 229
7.2.5
jQuery UI sortable ................................................................... 235
7.2.6
Fortschrittsbalken ....................................................................... 237
7.3
Dialoge und Meldungen ............................................................. 238
7.3.1
Einfacher modaler Dialog ............................................................ 239
7.3.2
jQuery-UI-Dialog .......................................................................... 241
7.3.3
Benachrichtigungen im Growl-Stil ............................................... 244
7.3.4
Videospiel-Retro: 1-up! ............................................................... 247
8
Listen, Baumstrukturen und Tabellen ........................................................ 251
8.1
Listen ......................................................................................... 251
8.1.1
Mehrfachauswahl per jQuery UI .................................................. 251
8.1.2
Listen sortieren ........................................................................... 256
8.2
Listen in Auswahlfeldern manipulieren ....................................... 258
8.3
Baumstrukturen ......................................................................... 262
8.3.1
Expandierbarer Kategorien-Baum ................................................ 262
8.3.2
Ereignis-Delegierung ................................................................... 265
Inhaltsverzeichnis
8.4
8.4.1
8.4.2
8.4.3
8.4.4
15
Tabellen ..................................................................................... 267
Fixe Kopfzeilen ............................................................................ 267
Sich wiederholende Kopfzeilen ................................................... 270
Datenraster ................................................................................. 272
Zeilen mit Checkboxen auswählen .............................................. 280
9
Plugins, Themes und fortgeschrittene Techniken ...................................... 283
9.1
Plugins ....................................................................................... 283
9.1.1
Ein Plugin erzeugen .................................................................... 283
9.2
Fortgeschrittene Techniken ........................................................ 290
9.2.1
jQuery erweitern .......................................................................... 290
9.2.2
Ereignisse ................................................................................... 300
9.3
jQuery-Tricks für echte Ninjas ..................................................... 308
9.3.1
Konflikte vermeiden .................................................................... 308
9.3.2
Animationen in Warteschlangen ................................................. 309
9.3.3
JavaScript-Objekte wie jQuery-Objekte behandeln ...................... 311
9.4
Theme Rolling ............................................................................ 312
9.4.1
Galerie-Themes verwenden ......................................................... 312
9.4.2
Eigene Themes gestalten ............................................................ 313
9.4.3
Themes auf Ihre Komponenten anwenden .................................. 314
9.5
jQuery macht mobil .................................................................... 316
9.5.1
Spielen Sie Ihren Trumpf aus! ..................................................... 317
A
Referenzmaterial ...................................................................................... 329
A.1
$.ajax-Optionen ........................................................................ 329
A.1.1
Flags ........................................................................................... 329
A.1.2
Einstellungen .............................................................................. 330
A.1.3
Callbacks und Funktionen ........................................................... 332
A.2
$.support-Optionen .................................................................. 333
A.3
Ereignisse .................................................................................. 336
A.3.1
Ereignis-Eigenschaften ................................................................ 336
A.3.2
Ereignis-Methoden ...................................................................... 336
A.3.3
DIY-Ereignis-Objekte ................................................................... 337
B
JavaScript-Leckerbissen ............................................................................ 339
B.1
JavaScript – eine zwanglose Sprache ......................................... 339
B.2
Gleichheits-Operatoren .............................................................. 340
B.3
Truthiness und Falsiness ............................................................ 341
B.4
jQuery demaskieren ................................................................... 342
16
C
Inhaltsverzeichnis
Plugin-Helfer ............................................................................................. 343
C.1
Selektor und Kontext .................................................................. 343
C.2
Der jQuery-Stapel ....................................................................... 344
C.3
Komprimierung .......................................................................... 345
Stichwortverzeichnis ................................................................................ 347
17
1
Sich in jQuery verlieben
Sie beherrschen semantisches HTML und können es mit meisterhaftem CSS unterstützen, um Ihre Gestaltungsideen in hinreißende Webseiten umzusetzen, die deren Besucher begeistern. Wie Sie jedoch beim Gestalten des nächsten Facebook- oder TwitterBeitrags merken, kommen Sie aber heutzutage selbst mit inspirierendem Design und
makellosem HTML nicht weit. Welches Teil fehlt uns also noch im Front-End-Puzzle?
Es ist JavaScript. Diese Programmiersprache galt so viele Jahre als schwarzes Schaf der
Webentwickler-Familie. Mit JavaScript fügen Sie Ihrer Seite komplexes Verhalten,
ausgeklügelte Interaktionen und besonderes Flair hinzu. Um den schlafenden Riesen
namens JavaScript zu wecken, müssen Sie sich nur reinknien und die nächsten Jahre mit
dem Erlernen der Programmiersprache zubringen: Funktionen, Klassen, Designmuster,
Protoypen, Closures …
Oder Sie greifen auf ein Geheimnis zu, das Sie vermutlich mit einigen der größten
Namen im Web teilen – wie Amazon, Google, Microsoft, Mozilla, Twitter und WordPress: Benutzen Sie jQuery! Weltweit verwenden Gestalter und Entwickler die jQueryBibliothek, um rasch und elegant ihre interaktiven Ideen zu implementieren und das
Puzzle der Webentwicklung zu vervollständigen.
In diesem Kapitel sehen wir uns an, was die Qualität von jQuery ausmacht und wie es
HTML und CSS auf natürlichere Weise ergänzt als unser alter Freund und bitterer
Widersacher: das gute alte JavaScript. Wir sehen uns auch an, was nötig ist, um jQuery
aufzurufen und zum Laufen zu bringen, um damit auf unseren aktuellen Seiten zu
arbeiten.
1.1
Was ist so gut an jQuery?
Sie haben sicher schon gehört, dass Sie mit jQuery einfach mit dem Document Object
Model (DOM) spielen, Effekte hinzufügen und Ajax-Anfragen ausführen können. Aber
was ist daran besser als etwa eine eigene Bibliothek zu schreiben oder eine der anderen
existierenden (ebenfalls ausgezeichneten) JavaScript-Bibliotheken zu nutzen?
Zuallererst – haben wir schon erwähnt, dass Sie durch jQuery einfach mit dem DOM
spielen, Effekte hinzufügen und Ajax-Requests ausführen können? Es ist tatsächlich so
einfach, dass es ein absoluter Spaß ist: Sie werden sich oft schwer zurückhalten müssen,
um von manchen Verrücktheiten, die Sie erfunden haben, wieder Abstand zu nehmen
und sich auf Ihren guten Ruf als Webdesigner zu besinnen (ach, was könnten wir für
coole Sachen kreieren, wenn da nicht der gute Geschmack wäre!). Doch müssen Sie eine
Vielzahl an bedeutenden Faktoren bedenken, wenn Sie Ihre kostbare Zeit in das Erlernen von JavaScript investieren.
18
1.1.1
Browserübergreifende Kompatibilität
Abgesehen davon, dass es Spaß macht, jQuery zu verwenden, zählt es zu den größten
Vorzügen von jQuery, dass es eine Menge vertrackter browserübergreifender Belange für
Sie regelt. Jeder, der schon ernsthafte Java-Scripte verfasst hat, wird bestätigen, dass
einen die browserübergreifenden Inkonsequenzen in den Wahnsinn treiben. Beispielsweise zerhaut es ein Design, das in Firefox und Internet Explorer 8 perfekt dargestellt
wird, im Internet Explorer 7. Oder eine Interface-Komponente, die tagelange Arbeit
kostete, funktioniert in allen bedeutenden Browsern – bis auf Opera unter Linux. Und
der Kunde pflegt gerade Opera unter Linux zu nutzen. Angelegenheiten wie diese sind
nie einfach aufzuspüren und noch schwerer komplett zu beheben.
Selbst wenn browserübergreifende Probleme einfach zu handhaben sind, erfordern sie
eine mentale Datenbank an Wissen. Nur auf dieses Wissen können Sie hoffen, wenn um
23:00 Uhr am Tag vor der Veröffentlichung eines großen Projekts ein verquerer
Padding-Bug auf einem Browser auftritt, den Sie zu testen vergessen haben!
Das jQuery-Team ist sich über die browserübergreifenden Probleme genau im Klaren
und weiß überdies, warum sie passieren. Dieses Wissen wurde in der Bibliothek niedergeschrieben – sodass jQuery für Sie die Vorsichtsmaßnahmen ergreift. Der Großteil des
Codes, den Sie verfassen, wird perfekt auf allen bedeutenden Browsern laufen – inklusive dem allen hinlänglich bekannten Sorgenkind namens Internet Explorer 6. Wir sind
uns fast sicher, dass Ihre Firma fortschrittlich genug ist, um Ihnen den Support für IE 6
nicht abzuverlangen, doch es dürfte Ihnen ein Gefühl von Sicherheit geben, dass jQuery
Ihnen auch hier den Rücken freihält.
Allein dieses Feature wird die durchschnittliche Menge von Entwicklern für den Rest
ihres Lebens von Kopfschmerzen befreien. Natürlich sollten Sie immer danach streben,
mit den neuesten Entwicklungen und besten Methoden Ihres Gewerbes Schritt zu
halten, doch wenn Sie die Jagd nach obskuren Browserfehlern jQuery überlassen können
(das seine Trefferquote mit jeder Version erhöht), gewinnen Sie mehr Zeit, um Ihre
Ideen umzusetzen.
1.1.2
CSS3-Selektoren
Die heutigen Technologien browserübergreifend konform zu schalten, ist schön und
gut, doch jQuery unterstützt auch die neue CSS3-Spezifikation für Selektoren. Ja, sogar
im Internet Explorer 6! Sie können sich für die Zukunft einen Vorsprung sichern, indem
Sie die CSS3-Selektoren ab sofort erlernen und in Ihren Produktionscode einbinden.
Das Auswählen und Verändern von Elementen gehört zu den Quellen der Kraft von
jQuery und mit CSS3-Selektoren haben Sie noch mehr Spielraum für Ihre Arbeit.
1.1.3
Hilfreiche Utilities
Zum Umfang von jQuery zählt auch eine Auswahl von Utility-Funktionen, die allgemeine Funktionen implementieren und beim Verfassen von jQuery-Code hilfreich sind
(oder schlicht bei JavaScript fehlen): Strings zu trimmen, um Objekte auf einfache Weise
zu präzisieren, und vieles mehr. Diese Funktionen sind per se schon praktisch, fördern
1.1 Was ist so gut an jQuery?
19
aber auch die nahtlose Integration von jQuery in JavaScript in Form von Codes, die
leichter zu schreiben und zu warten sind.
Ein erwähnenswertes Utility namens jQuery.support (oder $.support) testet, ob
bestimmte Funktionen auf dem aktuellen Browser des Nutzers verfügbar sind. Bislang
betrieben viele Entwickler das verpönte Browser-Sniffing, um den vom Anwender verwendeten Browser nebst Versionsnummer herauszufinden. Diese Praxis hat sich schon
immer als unbefriedigend und fehleranfällig erwiesen. Wenn Sie das support-Utility von
jQuery nutzen, können Sie testen, ob dem Anwender ein bestimmtes Feature zur Verfügung steht, und einfach Applikationen erstellen, die abwärtskompatibel auf älteren
Browsern laufen – oder auch auf solchen, die nicht standardkonform sind.
Zwar könnten Sie etwas mehr Leistung und ein paar besondere Features durch MicroBibliotheken gewinnen, die wie Modernizr1 mehr auf die Entdeckung unterstützter
Features ausgerichtet sind, doch ein echter Ninja nutzt lieber die zur Verfügung stehenden Komponenten. Es zeugt von schlechtem Stil, eine Micro-Bibliothek hinzuzufügen,
wenn es nicht unbedingt erforderlich ist.
1.1.4
jQuery UI
Mit jQuery wurden bereits einige eindrucksvolle Widgets und Effekte erzeugt, von
denen manche so hilfreich waren, dass sie ihren Weg in die Kern-Bibliothek von jQuery
fanden. Man denke nur an Plugins wie Dimensions von Paul Bakaus und Brandon Aaron
oder an Unwrap von Ben Alman. Wenn Sie jQuery und die jQuery-Community besser
kennenlernen, werden Sie auf weitere Beispiele stoßen. Dennoch hat das Team von
jQuery weise entschieden, übergeordnete Konstruktionen aus dem konzentrierten
Grundbestand der Bibliothek auszugrenzen und sie in eine übersichtliche Bibliothek zu
packen, die auf jQuery aufsetzt. Die erste Bibliothek dieses Typs heißt jQuery UI und die
jüngste (die wir uns in Kapitel 9 näher ansehen) jQuery Mobile. jQuery UI beinhaltet
eine Menagerie hilfreicher Effekte, ausgefeilter Widgets und ansprechender Themes.
Einige dieser Funktionen zeigt Bild 1.1.
Accordions, Schieberegler, Dialogfenster, Datumswähler und noch mehr – alles einsatzbereit! Sie würden eine Menge Zeit damit zubringen, solche Elemente in jQuery selbst zu
programmieren. Die jQuery-UI-Kontrollelemente sind frei konfigurierbar und ausgeklügelt genug, dass Sie Ihre wertvolle Zeit auf die wichtigen Dinge konzentrieren
können. Konzentrieren Sie sich lieber auf die Inhalte und Funktionen Ihres Projekts,
statt Stunden zu investieren, einen selbst gebauten Datumswähler auf einem halben
Dutzend Browsern zu testen!
1
http://www.modernizr.com/
20
Bild 1.1: Einige jQuery-UI-Widgets
Im Verlauf des Buchs werden wir Ihnen jQuery UI ausführlich vorstellen, dabei sogar
einige der verfügbaren flippigen Themes integrieren und Ihnen verraten, wie Sie eigene
Themes mithilfe des UI ThemeRoller gestalten.
1.2
Plugins
Das Team von jQuery hat große Sorgfalt darauf verwendet, die jQuery-Bibliothek
erweiterbar anzulegen. Indem nur ein Block von grundlegenden Features integriert ist,
doch ein Framework zur Erweiterung der Bibliothek bereitsteht, erstellen Sie auf einfache Weise Plugins, die Sie in all Ihren jQuery-Projekten immer wieder verwenden oder
mit anderen Entwicklern teilen können. Eine Menge weit verbreiteter Funktionen wurde
aus dem Kern der jQuery-Bibliothek ausgelagert und ins Reich der Plugins verbannt.
Keine Sorge, hier handelt es sich um ein Leistungsmerkmal und nicht um eine
Schwachstelle. Jede zusätzlich benötigte Funktion kann einfach Seite für Seite eingebunden werden, um Bandbreite und Code-Menge minimal zu halten.
Glücklicherweise haben viele Entwickler den Vorteil der potenziellen Erweiterung
genutzt, sodass bereits hunderte ausgezeichneter Plugins über das Plugin Repository von
jQuery heruntergeladen werden können, während ständig neue hinzukommen. Einen
Ausschnitt sehen Sie in Bild 1.2.
1.2 Plugins
21
Bild 1.2: Plugin Repository von jQuery
Immer wenn Sie vor einer Aufgabe oder vor einem Problem stehen, lohnt es sich, nach
einem Plugin Ausschau zu halten, das Ihren Bedürfnissen entsprechen könnte. Denn
fast jede Funktionalität, die Sie benötigen, liegt inzwischen als Plugin vor. Selbst wenn
sich herausstellt, dass Sie noch selbst etwas Hand anlegen müssen, ist das Plugin Repository oft der beste Weg zu einer schnellen und unkomplizierten Lösung.
Wo sind meine Plugins?
Zum Zeitpunkt des Erscheinens dieses Buchs befindet sich das jQuery Plugin
Repository2 noch in der Entwicklungsphase. Ein Platzhalter auf der Seite enthält folgenden Warnhinweis: »Wir bemühen uns derzeit um eine höhere Qualität und um einen spamfreien Auftritt auf der Plugin-Seite. Ein schwerwiegender Fehler unsererseits erforderte es, die derzeitige Seite vor dem Ersatz
durch die neue herunterzufahren.« Die ganze Hintergrundgeschichte über den
Wechsel sowie Informationen über den Stand der Entwicklung der Seite und
Hinweise zum Auffinden diverser Plugins finden Sie im Blog von jQuery3. Die
Fortschritte bei der Entwicklung der Plugin-Seite können Sie auf GitHub verfolgen4.
1.2.1
Das Markup sauber halten
Die Trennung von Script-Verhalten und Präsentation der Seite ist gängige Praxis in der
Webentwickler-Szene, wenngleich damit die schwierigen Herausforderungen zutage
treten. Für jQuery ist es ein Klacks, Ihr Markup komplett vom Inline-Scripting zu
befreien dank seiner Fähigkeit, Elemente auf Seiten leicht auszuwählen und sie mit CSSStilen zu versehen. jQuery besitzt keinen Mechanismus, um Inline-Code hinzuzufügen.
Diese strikte Trennung von Belangen führt zu einem schlanken, sauberen Code, der
besser zu warten ist.
Und jQuery beschränkt sich nicht darauf, sich in den vorhandenen HTML-Code einer
Seite einzumischen, sondern kann mittels einer Sammlung von praktischen Funktionen
neue Seitenelemente und Dokumentfragmente hinzufügen. Überall auf der Seite können
2
3
4
http://plugins.jquery.com/
http://blog.jquery.com/2011/12/08/what-is-happening-to-the-jquery-plugins-site/
https://github.com/jquery/plugins.jquery.com
22
neue HTML-Blöcke eingefügt, angehängt und vorangestellt werden. Sie können sogar
bestehende Elemente ersetzen, verschieben oder klonen. Alles Funktionen, die Ihnen
behilflich sind, Ihre Seiten nach und nach zu verbessern, und jenen Nutzern das volle
Programm zu bieten, deren Browser es gestatten, während alle anderen mit einem
akzeptablen Grundgerüst arbeiten können.
1.2.2
Breite Akzeptanz
Wenn Sie Nutzerstudien auf Google Trends verfolgen5, werden Sie den rasanten Aufstieg
von jQuery zum ruhmreichen Superstar miterleben. Sie können sich jederzeit auch die
Diagramme bei BuiltWith ansehen6. Mit dieser Popularität der Bibliothek geht ein
vermehrtes Angebot von aktiven Codes und vielen interessanten Goodies von Drittanbietern einher.
Zahllose namhafte Firmen im Web springen auf den jQuery-Zug auf: IBM, Netflix,
Nokia, Wikipedia und sogar Google (das die jQuery-Bibliothek nicht nur nutzt, sondern
auch hostet) sowie Microsoft, das jQuery nun in sein MVC Framework und auch in
seine IDE (Integrated Development Environment) aufgenommen hat, bis hin zu Visual
Studio. Mit einer derartig breiten Palette von großen Firmen an der Seite kann man jede
Wette eingehen, dass jQuery noch lange seinen Platz behauptet, sodass es sich lohnt,
Zeit und Mühe ins Erlernen zu investieren. Tatsächlich finden Sie jQuery auf nahezu
40 % Prozent der Seiten, die JavaScript nutzen. Damit werden sich einige Türen für Sie
öffnen, wenn Sie Ihre jQuery-Kenntnisse vertiefen.
Mit der Popularität von jQuery wuchs eine große und freigiebige Community heran, die
erstaunlich hilfreich ist. Ganz egal, wie es um Ihre Kenntnisse bestellt ist – Sie werden
immer andere Entwickler finden, die geduldig genug sind, um Ihnen beizustehen und
bei der Lösung von Problemen zu helfen. Dieser tragende gemeinsame Gedanke verbreitete sich weiter im Internet und ließ eine wahre Enzyklopädie von hochwertigen
Tutorials, Blogeinträgen und Dokumentationen entstehen.
1.3
Wo ist die Kehrseite der Medaille?
Es gibt so gut wie keine Kehrseite! Das Hauptargument gegen den Einsatz einer
JavaScript-Bibliothek bestand immer in der Größe und Geschwindigkeit: Vielfach wird
behauptet, dass beim Nutzen einer Bibliothek zu große Datenmengen beim Download
von Seiten anfallen, während andere beklagen, dass Bibliotheken verglichen mit einem
schlankeren Standardcode eine schlechte Performance liefern. Obwohl es diese Argumente zu bedenken gilt, sind sie nicht nachhaltig von Bedeutung.
In Hinblick auf die Größe erweist sich jQuery als Leichtgewicht. Die Kernbibliothek von
jQuery hinterlässt mit ungefähr 19 kB und damit weniger als einem durchschnittlich
großen JPG-Bild nur einen winzigen Fußabdruck im Datenstrom. Alle Extras, die Sie für
5
6
http://www.google.com/trends
http://trends.builtwith.com/javascript/jQuery
1.4 jQuery herunterladen und einbinden
23
Ihr Projekt benötigen (wie Plugins oder Komponenten der jQuery-UI-Bibliothek),
können Sie modular hinzufügen und dabei getrost die Bandbreite-Kalorien mitzählen.
Geschwindigkeit wie auch Größe verlieren ihre Brisanz angesichts dessen, dass sich die
Hardware-Spezifikationen von Computern ständig verbessern und die JavaScriptEngines immer rascher wachsen. Das klingt keineswegs danach, dass jQuery langsam ist,
vielmehr scheint das Team von jQuery besessen von dem Gedanken an Geschwindigkeit
zu sein! Jede neue Version erweist sich als schneller gegenüber der vorhergehenden,
sodass die vermeintlichen Vorzüge der Verwendung eigener Java-Scripte mit jedem Tag
schrumpfen.
Im Wettkampf der JavaScript-Bibliotheken (und davon gibt es mehr als eine Hand voll)
schneidet jQuery bei den wesentlichen Funktionen seiner Klasse am besten ab: beim
Manipulieren der DOM, beim Hinzufügen von Effekten und beim Senden von AjaxAnfragen. Viele Bibliotheken bieten nach wie vor eine exzellente Qualität, und so lohnt
es sich immer, nach Alternativen zu suchen – doch wir legen Ihnen ausdrücklich jQuery
ans Herz!
Genug geredet: Nun ist es an der Zeit, mithilfe von jQuery Nägel mit Köpfen zu machen!
1.4
jQuery herunterladen und einbinden
Bevor Sie sich in jQuery verlieben können (oder zumindest seinen Wert schätzen
lernen), benötigen Sie die neueste Version des Codes, um ihn Ihren Seiten hinzuzufügen. Sie können dies auf verschiedenen Wegen mit jeweils zusätzlichen Optionen
bewerkstelligen. Für welche Lösung Sie sich auch entscheiden, Sie müssen jQuery in Ihre
HTML-Seite einbinden, so wie es auch bei anderen JavaScript-Quelldateien üblich ist.
Alles nur JavaScript
Vergessen Sie niemals, dass jQuery nur aus JavaScript besteht! Es mag vordergründig anders aussehen und anders agieren, doch unter der Haube steckt
reines JavaScript. Konsequenterweise kann jQuery nichts bewerkstelligen, was
das gute alte JavaScript selbst nicht vermag. Das bedeutet, dass wir die Bibliothek auf dieselbe Weise in unsere Seiten einbinden wie jede andere JavaScriptDatei.
1.4.1
jQuery herunterladen
Die meisten Entwickler laden die jQuery-Bibliothek und damit auch die neueste Version
von der jQuery-Webseite herunter7. Per Klick auf den großen, glänzenden DownloadButton erhalten Sie den neuesten Code aus jQuerys eigenem Code-Archiv. Alternativ
besuchen Sie die Download-Seite, um sich die jüngste Version von jQuery Content
Delivery Network (CDN), Googles CDN oder auch CDN von Microsoft in der gebotenen Kompressionsstufe zu holen. Ein CDN besteht aus einem Netzwerk von Servern, die
7
http://jquery.com/
24
darauf spezialisiert sind, dem Nutzer die Inhalte möglichst rasch und skalierbar anzubieten. Diese Server sind oft auf verschiedene geografische Orte verteilt, damit jede
Anfrage vom nächststehenden Server im Netzwerk beantwortet werden kann. Klicken
Sie auf den Link zum Download und speichern Sie die JavaScript-Datei in einem neuen
zugriffsbereiten Ordner. Er muss sich dort befinden, wo Ihre HTML-Dateien auf ihn
zugreifen können: üblicherweise in einem scripts- oder javascript-Dateiverzeichnis unter
dem Root-Verzeichnis Ihrer Webseite. Im folgenden Beispiel gehen wir ganz einfach vor
und speichern die Bibliothek im selben Verzeichnis wie die HTML-Datei.
Damit alles funktioniert, müssen wir unsere HTML-Datei anweisen, die jQuery-Bibliothek einzubinden. Dies wird mit einem <script>–Element in unserem HTML-Dokument bewerkstelligt. Das <head>-Element einer ganz simplen HTML-Datei mit integriertem jQuery würde etwa folgendermaßen aussehen:
<head>
<title>Hello jQuery world!</title>
<script type="text/javascript" src="jquery-1.7-min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
Das erste Tag auf der Seite lädt die jQuery-Bibliothek und das zweite bezieht sich auf
eine script.js-Datei, in der wir unseren eigenen jQuery-Code durchführen. Und das war
schon alles: jQuery ist zum Einsatz bereit!
Aber lassen Sie uns hier innehalten. Während wir uns damit befassen, die jQuery-Bibliothek in unseren HTML-Code einzubinden, sollte uns bewusst sein, dass wir unsere Datei
nicht nur im head des Dokuments verankern können; tatsächlich erweist sich der head
nach aktuellem Wissensstand nicht einmal als die geeignetste Stelle zum Einbinden von
jQuery. Wenn sie abenteuerlustig sind, können Sie es auch direkt vor dem Schließen des
body-Elements einbinden:
</section>
<script type="text/javascript" src="jquery-1.7-min.js"></script>
</body>
</html>
Nach wie vor lädt das erste Tag der Seite die jQuery-Bibliothek und das zweite verweist
auf unsere script.js-Datei, doch diesmal werden unsere Dateien erst nach dem Content
der Seite geladen (mehr dazu später).
Wir erwähnten weiter oben bereits, dass es der gebräuchlichste Weg ist, jQuery herunterzuladen, doch Sie haben noch einige andere Möglichkeiten, die wir uns kurz ansehen
sollten, bevor wir weitermachen. Wenn Sie lieber gleich mit jQuery spielen wollen,
können Sie den folgenden Abschnitt übergehen.
1.4.2
Das Google Content Distribution Network (CDN)
Eine alternative Methode, die jQuery-Bibliothek einzubinden, bietet Google CDN.
Google hostet diverse gängige Open-Source-Bibliotheken auf seinem CDN, unter anderem auch jQuery (und jQuery UI, auf das wir in Kürze eingehen). Anstatt also die
jQuery-Dateien auf dem eigenen Webserver zu hosten, wie wir oben vorgeführt haben,
1.4 jQuery herunterladen und einbinden
25
können Sie mit Google als Partner Ihre Bandbreite-Rechnung verringern. Sie profitieren
von der Geschwindigkeit und Betriebssicherheit, die Googles ausgedehnte Infrastruktur
aufweist, und erhalten überdies den Bonus, immer mit der neuesten Version von jQuery
zu arbeiten.
Ein anderer Vorteil von Google CDN besteht darin, dass viele Nutzer bereits jQuery von
Google heruntergeladen haben, wenn sie andere Seiten besuchen. Folglich wird es beim
Besuch Ihrer Seite aus dem Cache geladen (sofern die URL der JavaScript-Datei dieselbe
ist), was zu signifikant schnelleren Ladezeiten führt. Auf dieselbe Weise können Sie auch
die etwas klobigere jQuery-UI-Bibliothek einbinden, wodurch Google CDN durchaus
attraktiv für Ihre neuen Projekte wird: Es hilft Ihnen dabei, Geld zu sparen und die Performance zu erhöhen, damit Ihr neues Projekt ein Riesenerfolg wird!
Es gibt einige Möglichkeiten, jQuery über Google CDN einzubinden. Wir nutzen die
einfachste (wenn auch etwas weniger flexible) Methode, die auf Pfaden basiert:
<head>
<title>Hello jQuery world!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
➥ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
Dieses Beispiel mag unserem ursprünglichen sehr ähnlich sein, doch das script–Tag
verweist nicht auf eine Kopie von jQuery, sondern auf einen Server von Google.
Die neueste Version mit Google CDN beziehen
Wenn Sie sich die URL genau ansehen, die auf die Google-Server verweist,
werden Sie feststellen, dass die Version von jQuery durch eines der Pfadelemente spezifiziert ist (die 1.7.0 in unserem Beispiel). Möchten Sie indessen
die neueste und umfangreichste Version nutzen, entfernen sie eine Zahl am
Ende der Versions-Nummernfolge (z. B. 1.7), damit die neueste Ausgabe, die
in der 1.7er-Serie verfügbar ist, abgerufen wird (1.7.1, 1.7.2 usw.). Sie können
die Angabe auch komplett auf die erste Zahl beschränken (1), um von Google
die neueste Version zu erhalten, selbst wenn jQuery 1.8 oder dessen Nachfolger veröffentlicht wird.
Doch wählen Sie Ihre Vorgaben mit Bedacht, denn: je kürzer der String, desto
kürzer ist auch der Verbleib im Cache. Wenn Sie immer nur die Anfangsnummern angeben, müssen zwar beim Erscheinen einer neuen jQuery-Version die CDN-URLs in Ihrer HTML-Datei nicht aktualisiert werden, doch Sie
müssen prüfen, ob es Änderungen in der Bibliothek gibt, die Ihre bestehende
Funktionalität betreffen könnten.
Wenn Sie die etwas komplexere »Google Loader«-Methode zum Einbinden von Bibliotheken ausprobieren möchten, finden Sie viele Informationen dazu auf der GoogleCDN-Webseite8.
8
http://code.google.com/apis/ajaxlibs/documentation/
26
1.4.3
Weitere CDN-Optionen
Nicht nur Google möchte seinen Besuchern unter die Arme greifen, damit sie ihre
Webseite genießen können. jQuery selbst hat ebenfalls erkannt, wie wertvoll es ist,
eigene CDN-Optionen anzubieten9, und auch Microsoft ist mit von der Partie. Im Zuge
seiner Verpflichtung gegenüber dem Open Web hostet Microsoft eine Version, auf die
Sie verlinken können; auf der dazugehörigen Webseite finden Sie viele Details10.
1.4.4
Nightlies und Github
Noch mehr erweiterte Optionen zum Erhalt von jQuery finden Sie auf der offiziellen
»Downloading jQuery«-Dokumentationsseite11. Die erste Option bietet die Nightly
Builds. Nightlies sind automatisiert erstellte Versionen der jQuery-Bibliothek, die den
gesamten neuen Code enthalten, der im Tagesverlauf generiert oder abgeändert wurde.
In jeder Nacht werden die allerneuesten Versionen zum Download bereitgestellt und
können auf dieselbe Weise eingebunden werden wie die reguläre Bibliothek.
Sollte Ihnen der allnächtliche Turnus noch immer zu sporadisch sein, können Sie die
Github Repositories nutzen, um den topaktuellsten Quellcode zu beziehen. Github12 ist
ein dezentrales Versionskontrollsystem, das vom jQuery-Team verwendet wird. Immer,
wenn ein Entwickler in jQuery eine Änderung vornimmt, können Sie diese unverzüglich
herunterladen.
Bedenken Sie jedoch, dass sowohl die Nightly- wie auch die Github-Bibliotheken oft
nicht getestet sind. Sie können (und werden) Fehler enthalten und unterliegen ständigen
Veränderungen. Wenn Sie also nicht an der jQuery-Bibliothek als solcher arbeiten,
greifen Sie lieber auf die vorgenannten, wesentlich sichereren Optionen zurück.
1.4.5
Unkomprimiert oder komprimiert?
Wenn Sie sich intensiver auf der jQuery-Download-Seite umsehen, werden Sie vielleicht
eine Reihe verschiedener Download-Formatoptionen entdecken: komprimiert (auch als
minified bezeichnet) und unkomprimiert (auch development genannt).
Gewöhnlich werden Sie die Version »minified« mit dem komprimierten jQuery-Quellcode für Ihren Produktionscode nutzen wollen: Hier wurden Leerzeichen und Zeilenumbrüche entfernt sowie diverse Namen gekürzt. Im Ergebnis erhalten Sie die gleiche
jQuery-Bibliothek, doch ist sie in einer JavaScript-Datei enthalten, die viel kleiner als die
ursprüngliche ist. Damit können Sie wunderbar Bandbreite-Kosten sparen und die
Seitenaufrufe für Nutzer beschleunigen. Nachteilig hingegen wirkt sich die Kompression
der Datei auf die Lesbarkeit aus. Wenn Sie sich die komprimierte jQuery-Datei in Ihrem
Text-Editor anschauen (denn mal los!13), werden Sie feststellen, dass sie praktisch unles-
9
10
11
12
13
http://code.jquery.com
http://asp.net/ajaxlibrary/cdn.ashx
http://docs.jquery.com/Downloading_jQuery
http://github.com/jquery/jquery
http://code.jquery.com/jquery-1.7.0.min.js
1.5 Die Anatomie eines jQuery-Scripts
27
bar ist: Sie besteht aus einer einzigen Zeile, die nach verstümmeltem JavaScript aussieht.
Die Lesbarkeit der Bibliothek ist meist inkonsequent, doch falls Sie sich dafür interessieren, wie jQuery aktuell funktioniert, finden Sie mit der unkomprimierten Entwicklerversion ein kommentiertes, lesbares und richtig schönes Beispiel von JavaScript vor.
1.5
Die Anatomie eines jQuery-Scripts
Nachdem wir jQuery in unsere Webseite eingebunden haben, wollen wir uns ansehen,
was unser Baby alles kann. Die Syntax von jQuery mag auf den ersten Blick ein wenig
sonderbar wirken, doch sie ist recht überschaubar und, was besonders zählt, äußerst
konsequent. Sobald Sie Ihre ersten Befehle verfasst haben, werden Sie Stil und Syntax
derart im Kopf haben, dass Sie unbedingt weiterschreiben wollen!
1.5.1
Das jQuery-Kürzel
Wenn Sie jQuery auf Ihrer Seite einbinden, erhalten Sie Zugang zu einer einzigen magischen Funktion, die (wie seltsam doch!) jQuery heißt. Sprechen wir nur über eine Funktion? Mit dieser einzigen Funktion liefert jQuery Hunderte von leistungsfähigen Tools,
mit denen Sie Ihren Webseiten eine neue Dimension verleihen können.
Weil diese eine Funktion das Portal zur gesamten jQuery-Bibliothek bildet, ist es höchst
unwahrscheinlich, dass durch die Benennung der Funktionen Konflikte mit anderen
Bibliotheken oder Ihrem eigenen JavaScript-Code entstehen. Und doch könnte folgender Fall eintreten: Gehen wir einmal davon aus, dass jQuery eine Funktion definiert, die
sich hide nennt (und über die sie auch verfügt) und Sie ebenfalls eine Funktion namens
hide in Ihrem eigenen Code verwendet haben. In diesem Fall würde eine der Funktionen überschrieben werden und dadurch unerwartete Ereignisse und Fehler auslösen.
Wir geben an, dass die jQuery-Bibliothek im Namensraum von jQuery enthalten ist. Der
Ansatz per Namensraum ermöglicht es, wundervoll mit anderen Codes auf einer Seite
umzugehen, doch wenn wir jQuery häufig verwenden (was wir ja tun), wird es uns bald
lästig sein, bei jedem neuen Befehl immer den gesamten Namen der jQuery-Funktion zu
tippen. Um dies zu vermeiden, bietet jQuery ein Kürzel (ein Alias) für den Zugang zur
Bibliothek: Schlichtweg das Zeichen $.
Das Dollar-Zeichen steht als kurzer, wirksamer und cool aussehender Name für eine
JavaScript-Variable. Man erspart sich dadurch nicht nur fünf Tastenanschläge, sondern
erzeugt auch wesentlich lesbareren Code: eine umfangreiche Seite wird eine Menge von
Bibliotheks-Aufrufen enthalten, die mithilfe des Kürzels besser überblickt und gewartet
werden können.
28
Mehrere Bibliotheken nutzen
Auf den wichtigsten Grund, lieber den ganzen jQuery-Befehl anstelle des Kürzels zu verwenden, stoßen Sie, wenn Sie mit mehreren JavaScript-Bibliotheken
auf einer Seite arbeiten, die alle die Kontrolle über den Namen der $-Funktion
für sich beanspruchen. Bei $ handelt es sich um einen allgemeinen Funktionsnamen, der in mehreren Bibliotheken verwendet wird und meist zum Auswählen von Elementen dient. Wenn Sie Probleme mit dem gleichzeitigen
Einsatz mehrerer Bibliotheken haben, lesen Sie dazu den Abschnitt »Konflikte
vermeiden« in Kapitel 9.
1.5.2
Ein jQuery-Statement analysieren
Wir wissen nun, dass die jQuery-Befehle mit dem Aufruf jQuery beziehungsweise dessen
Kürzel $ beginnen. Lassen Sie uns nun zum Skalpell greifen und die übrigen Bestandteile
eines jQuery-Statements untersuchen. Bild 1.3 zeigt die beiden Varianten des gleichen
jQuery-Statements (einmal mit ausgeschriebenem Funktionsnamen und einmal mit
dem $-Kürzel).
Bild 1.3: Ein typisches
jQuery-Statement
Jeder Befehl besteht aus vier Teilen: der jQuery-Funktion (oder ihrem Kürzel), Selektoren, Aktionen (oder Methoden) und Parametern. Über die jQuery-Funktion selbst
wissen wir bereits Bescheid, sodass wir einen Blick auf die anderen Elemente werfen
können. Als Erstes verwenden wir einen Selektor, um eines oder mehrere Elemente der
Webseite auszuwählen. Im nächsten Schritt suchen wir eine Aktion aus, die auf jedes der
ausgewählten Elemente angewendet wird. Im Laufe des Buchs werden Sie beim
Implementieren von Effekten jede Menge Aktionen kennenlernen. Zum Schluss
spezifizieren wir einige Parameter, um jQuery mitzuteilen, wie die gewählte Aktion
genau ablaufen soll. Jedes Mal, wenn Sie einen jQuery-Code vorfinden, sollten Sie
versuchen, ihn in diese genannten Komponenten aufzugliedern, was Ihnen am Anfang
das Verständnis sehr erleichtern wird.
In unserem obigen Beispiel ließen wir den Selektor alle Absatz-Tags (die <p>-Tags) der
Seite auswählen. Danach wählten wir die jQuery-Aktion css, die benötigt wird, um eine
CSS-Eigenschaft der zuvor ausgewählten Elemente zu modifizieren. Abschließend legten
wir einige Parameter fest, um die CSS-Eigenschaft color auf den Wert blue zu setzen.
Das Endergebnis? Alle unsere Absätze sind jetzt blau! In Kapitel 2 werden wir uns ausführlicher mit Selektoren und der Aktion css befassen.
Unser Beispiel vergab zwei Parameter (color und blue) für die css-Aktion, doch die
Anzahl der Parameter für eine Aktion kann differieren. Manche erfordern keinerlei
Parameter, andere akzeptieren mehrere Sets von Parametern (um ein ganzes Paket von
Eigenschaften auf einmal zu ändern), und manche erfordern, dass wir noch eine
1.6 DOM: Das Document Object Model
29
JavaScript-Funktion spezifizieren, damit der Code ausgeführt wird, wenn ein Ereignis
stattfindet (wie etwa das Klicken auf ein Element). Alle Befehle folgen jedoch dieser
grundlegenden Anatomie.
Diese Anatomie gibt uns leistungsstarke Möglichkeiten zur Verkettung (Fachjargon:
Chaining), bei der wir dem Selektor eine Reihe von Aktionen zuweisen können, die
nacheinander ausgeführt werden. Das nennt man echte Power!
1.6
DOM: Das Document Object Model
jQuery ist auf die nahtlose Integration mit HTML und CSS angelegt. Wenn Sie sich mit
CSS-Selektoren auskennen und beispielweise wissen, dass sich div#heading auf ein
<div>-Element mit einer id von heading bezieht, können Sie diesen Abschnitt nach
Bedarf überspringen. Ansonsten ist ein kleiner Crash-Kurs in Sachen CSS-Selektoren
und dem Document Object Model (DOM) angebracht.
Das DOM gehört nicht speziell zu jQuery, sondern stellt einen Standard für die Repräsentation von Objekten in HTML dar, an den sich alle Browseranbieter halten. Mit
fundierten Kenntnissen des DOM werden Sie die Wandlung zum jQuery-Ninja mühelos
meistern.
Das DOM ist eine hierarchische Repräsentation Ihres HTML-Markups, bei der jedes
Element (wie ein <div> oder ein <p>) über ein Eltern-Element (seinen »Container«)
verfügt und ein bis mehrere verschachtelte Kind-Elemente enthalten kann. Jedes
Element kann eine id und/oder ein bis mehrere weitere class-Attribute aufweisen, die
Sie normalerweise in ihrer HTML-Quelldatei zuweisen. Wenn der Browser eine HTMLSeite liest und das DOM aufbaut, erzeugt er zusammenfassende Objekte, die entweder
einfach nur schön anzusehen sind (als statische Seite) oder, was viel interessanter ist,
über unseren Code manipuliert werden können.
Das Beispiel eines DOM-Fragments illustriert Bild 1.4. Wie Sie sehen, hat body zwei
Kind-Elemente: ein <h1> und ein <p>. Da diese beiden Elemente demselben ElternElement angehören, werden sie als Siblings (Geschwister) bezeichnet.
Bild 1.4: Das Beispiel
eines DOM-Fragments
30
Die id eines Elements identifiziert das Element auf der Seite eindeutig:
<div id="farewell">Come back and visit us soon!</div>
Dem <div> wurde eine id von farewell zugeordnet. Es benutzt eine id zur eindeutigen
Definition, die nur ein einziges Mal auf der Seite vorhanden sein sollte. Mithilfe des
DOM können wir denselben Namen auch verschiedenen Seitenelementen via classAttribut zuweisen. Üblicherweise trifft das auf Elemente zu, die eine gemeinsame
Charakteristik aufweisen.
<p class="warning">Sorry, this field must be filled in!</p>
<span class="warning">Please try again</span>
In diesem Beispiel werden verschiedene Elemente als warning klassifiziert. Jedes CSS, das
auf die Klasse (class) warning angewendet wird, betrifft hier beide Elemente. Mehrere
class-Attribute desselben Elements werden (sofern sie erforderlich sind) durch Leerzeichen getrennt. Wenn Sie Ihr CSS schreiben, können Sie Elemente per id mit einem
Rautensymbol auswählen oder per class mit einem Punkt:
#footer { border: 2px solid black }
.warning { color: red }
Diese CSS-Regeln werden dem Element mit der id von farewell eine schwarze Linie
zuordnen und gewährleisten, dass alle Elemente mit einer class von warning als roter
Text erscheinen. Wenn es so weit ist, etwas jQuery zu schreiben, werden Sie merken, wie
wichtig dieses Wissen über CSS-Selektoren und das DOM ist: jQuery benutzt dieselbe
Syntax wie CSS, um Elemente auszuwählen, die auf der Seite manipuliert werden sollen.
Und wenn Sie erst einmal das Auswählen beherrschen, ist der Rest dank jQuery überaus
einfach!
Wenn Sie sich dafür entscheiden …
Bei jQuery handelt es sich um ein stabiles und ausgereiftes Produkt, das sich für Webseiten jeder Größe eignet, wie sein Einsatz bei so manch wahren Giganten im Internet
demonstriert. Trotz alledem ist jQuery nach wie vor ein dynamisches Projekt, das ständig weiterentwickelt und verbessert wird. Mit jeder neuen Version steigert sich die
Performance und das Angebot an ausgeklügelten zusätzlichen Funktionen. Es gibt
keinen besseren Zeitpunkt als jetzt, um jQuery zu erlernen und einzusetzen!
Wenn Sie sich durch unser Buch arbeiten, werden Sie feststellen, dass in jQuerys Motto
»Write less, do more« (»schreibe weniger, tue mehr«) viel Wahrheit steckt. Mit dieser
ebenso einfachen wie leistungsstarken Bibliothek können Sie in sachten Lernschritten
tolle Projekte mit sehr wenig Code verwirklichen. Und während Sie sich auf dem Weg
zur jQuery-Ninja-Meisterschaft voranarbeiten, bleibt zu hoffen, dass Sie auch ein wenig
Achtung und Verständnis für JavaScript bekommen.
In Kapitel 2 werden wir tiefer in jQuery einsteigen und der Webseite unseres Kunden
damit etwas Glanz verleihen. Apropos Kunde – es ist Zeit für das erste Treffen mit
seinem Team …
329
A
Referenzmaterial
Bei jQuery dreht sich alles um die Flexibilität und die Anwendungsmöglichkeit auf so
viele Situationen wie möglich. Sowohl die Kernbibliothek als auch die Plugin-Architektur untermauern diesen Anspruch. Die meisten üblichen Anwendungsszenarien lassen
sich mit den Standardoptionen von jQuery bewältigen, doch Sie genießen auch die
Flexibilität, diese Voreinstellungen zu variieren. Das zieht jede Menge Optionen nach
sich, die Sie sich jedoch nicht alle einprägen müssen – ein schneller Blick in die OnlineDokumentation76 hilft Ihnen garantiert weiter. Und scheuen Sie sich nicht, in den
Source-Code von jQuery oder den entsprechenden Plugins abzutauchen, um weitere
Details aufzuspüren, die in der Dokumentation nicht verzeichnet sind.
A.1
$.ajax-Optionen
Die mächtigen Ajax-Funktionen von jQuery sind in einer einzigen Methode vereint:
$.ajax. Diese Methode akzeptiert eine Vielzahl von Optionen, was sie für den Einsatz in
nahezu allen erdenklichen Situationen prädestiniert. Wir haben zwar schon einige dieser
Optionen im Buch behandelt, doch wie es immer bei jQuery ist – es gibt noch viel mehr!
Sie sollten stets die Dokumentation auf Änderungen überprüfen, und können die
nachfolgenden Seiten als Referenz für Ihre Projekte nutzen.
A.1.1
Flags
Die »flaggable« Optionen akzeptieren einen booleschen Wert – true oder false – um die
entsprechende Funktionalität zu aktivieren und zu deaktivieren. In den meisten Fällen
reichen die Grundeinstellungen vollkommen aus, doch Sie können diese jederzeit Ihren
Bedürfnissen anpassen.
async
Die Option async ist standardmäßig auf true gesetzt, doch wenn Sie eine synchrone
Anfrage starten wollen, können Sie sie auf false setzen. Das sollten Sie allerdings unbedingt vermeiden, da es den Browser für die Zeit der Anfrage sperrt. Aus diesem Grund
ist es wahrscheinlich, dass dieses Feature in der Zukunft als veraltet deklariert werden
wird.
cache
Wenn ein Browser die Ergebnisse vorangegangener Abfragen im Cache speichert, kann
es zu Problemen kommen – es kann passieren, dass die neuesten Daten nicht abgefragt
76
http://api.jquery.com/
330
werden. Um das Ablegen im Cache zu verhindern, können Sie die Option cache auf
false setzen. Script- und JSONP-Anfragen werden standardmäßig nicht im Cache
gespeichert.
crossDomain
jQuery setzt dieses Flag automatisch bei Anfragen innerhalb derselben Domain auf
false und bei Cross-Domain-Anfragen auf true. Wenn Sie die Automatik nicht verwenden möchten, können Sie sie mit diesem Flag außer Kraft setzen.
global
Wir haben gesehen, dass wir Ereignisse von Ajax-Anfragen mit globalen Event Handlern
behandeln können. Sie können die globalen Event Handler für die Behandlung eines
bestimmten Ereignisses abschalten, indem Sie dem Parameter global den Wert false
zuordnen.
ifModified
Indem Sie das ifModified-Flag setzen, können Sie eine Anfrage dazu zwingen, erfolgreich zu sein (also den success-Handler auszulösen), wenn das Dokument seit der
letzten Anfrage modifiziert wurde. Das ist dann sehr nützlich, wenn Sie eine Bearbeitung
nur dann durchführen wollen, wenn es neue Daten zum Darstellen gibt.
isLocal
Damit legen Sie die Umgebung als »lokal« fest. Das ist so, als wenn Sie Ihre Site von
einer file:///-URL statt über einen realen Server betrachten.
processData
Wenn Sie zusammen mit Ihrer Anfrage Daten übermitteln, werden diese von jQuery
verarbeitet und in einen gültigen Abfrage-String konvertiert. Sollte dies nicht erwünscht
sein – etwa dann, wenn Sie ein DOM-Dokument oder eine andere Art von Struktur
übergeben wollen – können Sie das Flag processData auf false setzen.
traditional
Neuere Versionen von jQuery serialisieren Objekte und komplexere Strukturen, wobei
einige Server-seitige Sprachen dafür keine Unterstützung bieten. Wenn Sie die alte Vorgehensweise zur Serialisierung verwenden möchten, setzen Sie dieses Flag auf true.
A.1.2
Einstellungen
Viele Ajax-Optionen erlauben Ihnen statt simpler An/Aus-Werte auch die Übergabe von
Strings oder Objekten, um Ihre Ajax-Anfrage entsprechend einzurichten und abzustimmen.
accepts
Sie können angeben, welche Art von Antwort des Servers Sie bearbeiten möchten, indem
Sie eine Map an die Einstellung accepts übergeben; zum Beispiel: { xml: 'application/
xml ', text: 'text/plain ' }. Wenn Sie diese Modifikation vornehmen müssen,
empfehlen wir Ihnen die einmalige Anwendung im globalen Ajax-Setup.
A.1 $.ajax-Optionen
331
contents
Mit dieser Einstellung können Sie die standardmäßig eingestellte Art und Weise übergehen, wie jQuery einen bestimmten Inhaltstyp übergibt, also ihn in eine Map, einen
String oder einen regulären Ausdruck packt. Beispiel: Standardmäßig wird xml an Regex
/xml/ und Text an /text/ angepasst.
contentType
Mit contentType legen Sie die Inhaltsart für die Anfrage fest, die standardmäßig auf die
für die meisten Anwendungsfälle ideale application/x-www-form-urlencoded festgelegt
ist.
context
Wenn Ajax-Callbacks ausgeführt werden, ist ihr Kontext das window-Objekt, was meist
nicht sehr sinnvoll ist. Deshalb setzen Sie die context-Option so, dass die this-Eigenschaft in einem Callback auf ein praktisches Tool wie selbst geschriebenes JavaScript
oder ein jQuery-Element verweist.
converters
Eine weitere fortgeschrittene Einstellung, die dataType-Werte in andere dataType-Werte
überführt.
data
Um Daten an den Server zu übergeben, spezifizieren Sie einen String, ein JavaScriptArray oder ein Objekt für die data-Einstellung. Wenn Sie ein Array oder Objekt übergeben und das processData-Flag nicht ausgeschaltet haben, werden die Daten mit der
Utility-Funktion jQuery.params serialisiert. Dadurch wird der Inhalt in ein QueryString-Format konvertiert (sehr praktisch!). Handelt es sich um eine GET-Abfrage, wird
der String an die URL angehängt.
dataType
Während Sie mit contentType den an den Server zu übermittelnden Inhaltstyp festlegen,
bestimmt der Parameter dataType den Datentyp, den Sie vom Server empfangen. Die
Voreinstellung lautet »alles« (*/*), doch Sie können auch xml, html, script, json oder
text vorgeben, woraufhin jQuery den passenden String für den Inhaltstyp verwendet.
headers
Wenn Sie Header für die aktuelle Anfrage hinzufügen oder ändern wollen, können Sie
diese in einer Map spezifizieren.
jsonp
Wenn Sie JSONP-Aufrufe ausführen, die Cross-Domain-Anfragen erlauben, wird davon
ausgegangen, dass der Name der Callback-Funktion callback ist. Wenn der Service, den
Sie verwenden, eine unterschiedliche Bezeichnung verwendet, können Sie diese mit der
jsonp-Einstellung definieren.
mimeType
Verwenden Sie diese Einstellung, um den vorgegebenen Mime-Typ zu überschreiben.
332
password
Die Authentifizierung erfordert Ihren Anwendernamen und ein Passwort. Sie können
letzteres mit der Einstellung password definieren.
scriptCharset
Die Eigenschaft scriptCharset erlaubt Ihnen die Angabe des Charaktersets von scriptTags, die über script oder jsonp-Aufrufe injiziert werden.
statusCode
Hierbei handelt es sich um ein praktisches Mapping von Statuscodes auf Funktionen,
mit dem sich bestimmte Server-Antworten behandeln lassen. Wenn der Statuscode
einen Treffer ergibt (z. B. 404 not found), wird die entsprechende JavaScript-Funktion
aufgerufen.
timeout
Der Parameter timeout hat die Ehre, die einzige Ajax-Einstellung zu sein, die einen
Zahlenwert akzeptiert: Er gibt an, wie viele Millisekunden vergehen sollen, bevor eine
Ajax-Anfange abgebrochen wird.
type
Eine der wichtigsten Einstellungen für eine Ajax-Anfrage. Die Eigenschaft type gibt den
HTTP-Anfragentyp vor: GET, POST, PUT oder DELETE.
url
Neben type die zweitwichtigste Einstellung: Der url-String enthält die Adresse des Servers, an den Sie eine Anfrage schicken wollen.
username
Während Sie im password-Feld das Passwort für die Authentifizierung eingeben, dient
die Option username zur Angabe des Anwendernamens, der abgeschickt wird.
xhrFields
Damit mappen Sie Feldnamen auf Feldwerte, die auf das zugrunde liegende XHRObjekt angewendet werden.
A.1.3
Callbacks und Funktionen
Zu guter Letzt gibt es noch einen Haufen Callbacks und Funktionen, mit denen Sie Ihre
Anfragen feintunen können und Ereignisse behandeln können, die während der Anfrage
auftreten.
Wir haben die Event Handler bereits in Kapitel 6 ausführlich behandelt. Der completeHandler wird immer dann ausgelöst, wenn ein $.ajax-Call erfolgt ist – unabhängig
davon, ob erfolgreich oder nicht. Der error-Handler wird ausgelöst, wenn die Anfrage
nicht erfolgreich war, und der success-Handler nach einer erfolgreichen Anfrage.
Darüber hinaus gibt es noch eine Handvoll von Funktionen, die als Anker dienen – mit
diesen modifizieren Sie verschiedene Bestandteile einer Anfrage auf einer Call-by-CallBasis. Die Funktion beforeSend wird ausgelöst, bevor die Sende-Nachricht ausgeführt
A.2 $.support-Optionen
333
wird, und gibt Ihnen die Möglichkeit, Ihre Anfrage bei Bedarf zu modifizieren. Ihr
Handler erhält das Anfrage-Objekt und das aktuelle jQuery-Objekt. Hier können Sie
Request Header modifizieren. Es ist auch Ihre letzte Chance, einzugreifen: Wenn Sie von
dieser Funktion false zurückgeben, wird die Anfrage abgebrochen.
Der jsonpCallback (String-Bezeichnung oder Funktion) kann statt des zufällig generierten Namens verwendet werden, den jQuery standardmäßig für JSONP-Anfragen
verwendet. Damit genießen Sie eine bessere Kontrolle darüber, wie die Anfragen im
Cache abgelegt werden. Die Magie von Ajax liegt in der Browser-Implementierung des
Objekts XMLHTTPRequest (oder kurz XHR) verborgen. Dabei handelt es sich um die
eigentliche Kommunikationsschnittstelle zwischen Server und Client. Standardmäßig
sucht jQuery nach dem passenden XHR-Objekt und verwendet dieses für alle AjaxCalls. Sie können dieses Objekt modifizieren oder mit Ihrer eigenen xhr-Funktion ersetzen. Diese Funktion muss das Objekt zurückgeben, das verwendet werden soll.
Der letzte verfügbare Anker ist die Funktion dataFilter. Diese wird aufgerufen, wenn
eine Anfrage erfolgreich war, und hilft Ihnen beim Sicherstellen, dass die Daten der Antwort in Ordnung sind. Wenn Sie irgendeine Art der Datenprüfung und -pflege
durchführen wollen, ist das der richtige Ort für Sie. Die dataFilter-Funktion erhält die
reinen Antwortdaten und den entsprechenden Typ. Sie sollten die Daten gleich nach der
Verarbeitung zurückgeben, damit der Anfragenzyklus fortgesetzt werden kann.
A.2
$.support-Optionen
In der Vergangenheit haben wir Browser Sniffing verwendet, um herauszufinden,
welche Version welchen Browsers verwendet wird, und haben unseren Code an
bekannte Bugs angepasst. Diese Zeiten sind vorbei, denn wir haben nun eine wesentlich
zuverlässigere Alternative. Wann immer wir können, sollten wir per Feature Detection
ermitteln, was der Browser kann und was nicht, und gegebenenfalls einen Workaround
oder eine Fallback-Option einbauen.
Wenn Sie reines jQuery verwenden, werden die meisten dieser Probleme intern gelöst,
doch wenn Sie sich die Hände schmutzig machen mit reinem JavaScript, sollten Sie folgenden Mechanismus zur Feature Detection mit der Aktion support einsetzen. Wir
haben dieses Thema bereits kurz in Kapitel 6 angerissen, doch dort haben wir die vielen
verfügbaren Optionen ausgespart. Sie geben allesamt einen true- oder false-Wert
zurück, der innerhalb eines if/then/else-Blocks verwendet werden kann, um Unterstützung für beide Fälle zu bieten. Hier ein Beispiel:
var domObject = document.getElementById('content');
if ($.support.cssFloat) {
domObject.style.cssFloat = "left";
} else {
domObject.style.styleFloat = "left";
}
Nachfolgend eine Übersicht über die verfügbaren Optionen:
ajax
Dieser Wert ist true, wenn der Browser ein XHR-Objekt erstellen kann.
334
boxModel
Die Eigenschaft boxModel (die zu Beginn auf null gesetzt ist und nach dem Laden des
Dokuments auf true oder false umspringt) wird true sein, wenn der Browser Inhalte
gemäß der Vorgaben des W3C Box Model rendert.
checkClone
Der checkClone-Wert wird false sein, wenn bei einer geklonten Checkbox oder einem
Radiobutton das Attribut checked nicht unterstützt wird.
checkOn
Gibt true zurück, wenn der Wert einer Checkbox standardmäßig auf »an« gestellt ist,
wenn kein Wert angegeben wird.
cors
Ist true, wenn der Browser ein XHR-Objekt erstellen kann, das Ihnen die Spezifizierung
der Eigenschaft withCredentials erlaubt, welche für Cross-Domain-Calls mit dem
Cross-Origin Resource Sharing Mechanism erforderlich ist.
changeBubbles
Die Ermittlung der Reaktion von Browser-Features auf bestimmte Ereignisse ist kompliziert – und einer der Hauptgründe für das Browser Sniffing. Einige helle Köpfe haben
eine Lösung für das Problem gefunden – wenn Sie wissen wollen, ob Sie (zuverlässig) auf
das Ereignis change reagieren können, prüfen Sie einfach die Eigenschaft changeBubbles.
cssFloat
Wir haben cssFloat im obenstehenden Beispiel in Aktion erlebt. Es findet heraus, ob der
Browser das Label cssFloat verwendet, um den Float-Stil in JavaScript zu adressieren. Es
ist unmöglich, einfach nur float zu verwenden, da es sich dabei um ein JavaScriptSchlüsselwort handelt. Internet Explorer verwendet styleFloat statt cssFloat.
hrefNormalized
Einige Browser ändern automatisch Links, die sie als falsch konstruiert erachten – was zu
einem großen Problem werden kann, wenn Sie nicht damit gerechnet haben! Die
Eigenschaft hrefNormalized gibt true zurück, wenn der Browser die Links modifiziert.
htmlSerialize
Wenn Sie sicherstellen möchten, dass Link-Elemente wie link und script-Tag unter
Verwendung von innerHTML korrekt serialisiert werden, verwenden Sie die Eigenschaft
htmlSerialize. Internet Explorer hat Probleme damit, sodass Sie die betreffenden Tags
in eigene, umschließende Elemente packen sollten.
leadingWhitespace
Die Option leadingWhitespace teilt Ihnen mit, ob der Browser den ersten Knoten in
einem DOM-Kind als Leerzeichen belässt oder nicht. Wenn innerHTML verwendet wird,
entfernt Internet Explorer das erste Kind, wenn es sich um einen Leerzeichen-Textknoten handelt, was zu schweren Problemen führen kann, wenn Sie von einer bestimmten
Anzahl von Kindern ausgehen.
A.2 $.support-Optionen
335
noCloneEvent
Wenn Sie einen DOM-Knoten klonen, klonen einige Browser die angefügten Event
Handler mit, während andere dies nicht tun. Werden Ereignisse nicht mit geklont, gibt
die Eigenschaft noCloneEvent den Wert true zurück.
opacity
Wir sind alle große Fans von Transparenz: Sie lässt unsere Sites futuristisch aussehen.
Unglücklicherweise können einige Browser nicht mit via JavaScript erstellten Transparenzen umgehen (mit jQuery sind Sie hier auf der sicheren Seite). Die Eigenschaft
opacity prüft, ob die Rendering-Engine mit Transparenz umgehen kann. Ist dies nicht
der Fall, müssen Sie auf die Filter des entsprechenden Browsers ausweichen.
optDisabled
Gibt true zurück, wenn option-Elemente innerhalb von select-Elementen automatisch
deaktiviert werden.
optSelected
Gibt true zurück, wenn standardmäßig ausgewählte Optionselemente korrekt als ausgewählt gemeldet werden.
scriptEval
Browser verhalten sich unterschiedlich beim Ausführen von Scripts mit injizierten
script-Tags. Die Eigenschaft scriptEval sagt Ihnen, ob es sicher ist, mit appendChild zu
injizieren, oder ob Sie besser die Eigenschaft script.text nutzen sollten.
style
Um den aktuell einem Element zugewiesenen Stil herauszufinden, nutzen Sie in der
Regel die Methode getAttribute und fragen nach style. Um zu testen, ob
getAttribute("style") im Browser des Anwenders funktioniert, überprüfen Sie die
Eigenschaft style.
submitBubbles
Mit der Eigenschaft submitBubbles können Sie das submit-Event prüfen. Intern verwendet diese Eigenschaft dieselben Feature-Detection-Tricks wie changeBubbles.
tbody
Einige Browser fügen automatisch ein tbody-Element in eine leere table ein, was Ihre
DOM-Manipulationen zunichtemachen kann. tbody gibt (verwirrenderweise) true
zurück, wenn das tbody-Element nicht automatisch eingesetzt wird.
Das Beste an der Aktion support ist die Tatsache, dass Sie dazu gezwungen werden, die
entsprechenden Bugs zu verstehen. Mit Browser Sniffing macht man es sich leicht und
fügt oft viel mehr Code als nötig in die Bedingungsblöcke ein. Mit support nehmen Sie
ausschließlich spezifische Aspekte aufs Korn, sodass Sie die bestmögliche Seitendarstellung auch dann erhalten, wenn die Hersteller die Codes ihrer Browser modifizieren.
336
A.3
Ereignisse
Wir haben viel Zeit damit verbracht, Ereignisse zu analysieren – und haben mehrmals
erwähnt, dass jQuery das Browser-übergreifende Event Handling deutlich erleichtert, da
die Events auf den W3C-Standard normalisiert werden. Ein normalisiertes EreignisObjekt verfügt über einen Stapel nützlicher Eigenschaften und Methoden. Einige davon
haben wir im Buch verwendet, und nun werfen wir einen Blick auf jene, die wir noch
nicht kennengelernt haben! Eine komplette Liste aller Ereignis-Eigenschaften finden Sie
in der Dokumentation von jQuery77
A.3.1
Ereignis-Eigenschaften
In Kapitel 9 haben wir gelernt, dass Ihnen die Eigenschaft type den Namen des ausgewählten Events zurückgibt (das geht selbst bei eigenen Events, sofern sie benannt wurden). Wenn ein Event Handler aufgerufen wurde, können Sie mittels der Eigenschaft
target jenes DOM-Element herausfinden, das die Quelle des Ereignisses war. Das
können Sie dann in einen jQuery-Selektor packen, um dem DOM zu entkommen und
zurück nach jQuery-Land zu gelangen. Wenn es sich um ein auf Mausbewegung basierendes Ereignis handelt, können Sie mit relatedTarget auch das vorherige Ziel
herausfinden (also wo der Mauspfeil sich zuvor befunden hat). Und wenn sich das
Ereignis in der Hierarchie nach oben bewegt – Sie also mit »bubbling« Events hantieren
– informiert Sie currentTarget über die aktuelle Bubbling-Phase. Die Eigenschaft data
gibt alle Daten zurück, die Sie beim Binden des Ereignisses hinzugefügt haben, und
which verrät Ihnen, welche Taste bei Tastatur-Ereignissen gedrückt wurde.
Eine letzte, extrem nützliche Eigenschaft ist der timeStamp eines Ereignisses. Dieser verrät Ihnen die exakte Zeit, zu der das Ereignis aufgetreten ist, und eignet sich ideal zur
Implementierung zeitbasierter Effekte. Wenn Sie zum Beispiel ein spezielles Event einbauen wollen, das nach drei Mausklicks stattfindet, konsultieren Sie die Timestamps des
Ereignisses, um zu sehen, ob die drei Klicks während einer gewissen Zeitspanne aufgetreten sind.
A.3.2
Ereignis-Methoden
Wir haben Ereignis-Methoden wie preventDefault und stopPropagation kennengelernt,
die uns die Kontrolle über das »Bubbling« von Events geben und die vom Browser
verarbeitet werden. Derselben Gattung gehört die Methode stopImmediatePropagation an,
die ein wenig komplexer ausfällt als stopPropagation. Während stopPropagation lediglich
die Ausführung der Eltern-Handler unterbindet, stoppt stopImmediatePropagation die
Ausführung jedes weiteren Event Handlers – selbst auf demselben Element.
Der Rest der Methoden dient einfach dazu, zu ermitteln, ob eine der anderen Methoden
aufgerufen wurde. So geben die Methoden isDefaultPrevented, isPropagationStopped
und isImmediatePropagationStopped einen booleschen Wert zurück, der so lange false
bleibt, bis die entsprechenden Kommandos ausgeführt worden sind.
77
http://docs.jquery.com/Events/jQuery.Event
A.3 Ereignisse
A.3.3
337
DIY-Ereignis-Objekte
Wo wir gerade von Ereignissen reden: Es gibt einen finalen Aspekt, den Sie kennen
sollten: Sie können Ihre eigenen Event-Objekte gestalten und sie direkt an die Handler
übergeben. Führen Sie sich diesen Code zu Gemüte:
// Regular event binding
$('p').bind('click', function(e) {
$(this).text(e.pageX);
});
// Home-made event object!
var e = $.Event('click');
e.pageX = 100;
e.pageY = 100;
$('p').trigger(e);
Wir haben ein künstliches Click-Event generiert und dessen Eigenschaften pageX und
pageY manuell gesetzt. Das verleiht Ihnen die ultimative Kontrolle über die Details des
Ereignisses, das einen Event Handler triggert.
339
B
JavaScript-Leckerbissen
Wir können es gar nicht oft genug wiederholen: jQuery ist nichts weiter als JavaScript –
wenn Sie also Ihre jQuery-Kenntnisse aufpolieren möchten, sollten Sie sich mit
JavaScript auseinandersetzen! Nachfolgend werfen wir einen Blick auf einige Aspekte
von JavaScript, die wir im Buch öfters verwendet haben und über die Sie vielleicht gerne
mehr erfahren möchten.
B.1
JavaScript – eine zwanglose Sprache
JavaScript wird als relativ zwanglose Sprache angesehen. Andere Sprachen, wie beispielsweise Java, erfordern die Einhaltung strikter Regeln: Eine Variable muss gesetzt
werden, wenn sie deklariert wurde. JavaScript schenkt hierbei den Entwicklern mehr
Freiheiten – der Typ einer Variable kann sich je nach Anforderung verändern:
var a = 2;
var b = "two";
var c = "2";
alert(typeof a);// alerts "number"
alert(typeof b);// alerts "string"
alert(typeof c);// alerts "string"
Keine Überraschung: Die Variablen verhalten sich so, wie wir es von ihnen erwarten.
Das sieht allerdings anders aus, wenn wir JavaScript beurteilen lassen, welchem Typ die
Variablen unserer Ansicht nach entsprechen sollen:
alert(a * a);//
alert(a + b);//
alert(a * c);//
alert(typeof (a
alert(typeof (a
alert(typeof (a
alerts 4
alerts 2two
alerts 4
* a));// alerts "number"
+ b));// alerts "string"
* c));// alerts "number"
Wenn wir einen String und eine Zahl mit dem Operator + »addieren«, nimmt JavaScript
an, dass wir die beiden aneinanderreihen möchten, und erzeugt damit einen neuen
String. Dabei wird der Variablentyp der Zahl auf string gesetzt. Wenn wir dagegen den
Multiplikations-Operator (*) verwenden, geht JavaScript davon aus, dass wir die beiden
Variablen als Zahlen haben möchten.
An der Variable selbst ändert sich dabei nichts, lediglich an der Behandlung durch
JavaScript. Wir können JavaScript jederzeit exakt mitteilen, welchen Variablentyp wir
wünschen, doch wenn wir das nicht tun, müssen wir verstehen, wie JavaScript reagiert.
Deshalb hier ein weiteres Beispiel:
alert(a + c);// alerts 22
alert(a + parseInt(c));// alerts 4
340
jQuery kennt sein JavaScript
jQuery kann uns in diesem Bereich dank der Helfer-Funktion $.type ein wenig unter die Arme greifen. Diese Funktion akzeptiert eine Variable oder einen
Ausdruck und gibt dessen Typ zurück. So gibt $.type(5) »number« zurück,
und $.type([]) »array«.
B.2
Gleichheits-Operatoren
Das Gleichheitszeichen (=) und seine verwandten Operatoren können eine Falle für Einsteiger darstellen. Dessen Funktionsweise war schon lange ein wenig seltsam, doch mit
JavaScript 1.3 wurde dies auf die Spitze getrieben.
Zunächst einmal müssen Sie sich vergegenwärtigen, dass sich das Gleichheitszeichen von
jenem unterscheidet, das Sie im Mathematikunterricht kennengelernt haben:
var a = 2;
var b = "2";
Ein einzelnes Gleichheitszeichen wird als Assignment Operator bezeichnet, der dazu
dient, Werte den Variablen zuzuordnen. Wir alle wussten, was es machte, doch nun
wissen wir, wie es genannt wird:
var c = (a == b);
Zwei =-Zeichen hintereinander (also ==), ergeben einen Equality Operator, der einen
booleschen Wert zurückgibt. In unserem Beispiel wird die Variable c den Wert true
erhalten, da JavaScript die Werte vor und nach dem Gleichheits-Operatoren vergleicht
und sie als gleich betrachtet. Dabei achtet JavaScript nicht auf den Variablentyp und
versucht, die Werte selbsttätig einzuschätzen.
Tauschen Sie das erste Gleichheits-Zeichen durch ein Ausrufezeichen aus, erhalten Sie
einen Inequality Operator (!=). Dieser Operator wird false zurückgeben, wenn die
Variablen gleich sind; andernfalls erhalten Sie true:
var d = (a != b);
Die Variable d wird nun den Wert false erhalten, da
wenig komplex sein, aber zumindest ist es konsistent.
a
und
b
gleich sind. Das mag ein
In JavaScript 1.3 wurde die Situation mit der Einführung des neuen Strict Equality
Operator (===) erheblich verkompliziert:
var e = (a === b);
Der Strict Equality Operator achtet nicht nur auf den Wert der Variable, sondern auch
auf deren Typ. Im oberen Fall wird d auf false gesetzt, obwohl a und b beide über den
Wert 2 verfügen, aber unterschiedliche Typen sind. Und wie Sie sicher schon geahnt
haben, gibt es auch das passende Gegenstück, den Strict Inequality Operator:
var f = (a !== b);
B.3 Truthiness und Falsiness
341
In diesem Beispiel wird die Variable f den Wert true zurückgeben, da es sich bei den
Variablen um unterschiedliche Typen bei gleichen Werten handelt.
Manche Dinge sind eben gleicher als andere gleiche Dinge!
B.3
Truthiness und Falsiness
Der boolesche Typ von JavaScript kennt zwei mögliche Werte: true und false:
var jQueryIsFun = true;
var javaScriptIsJava = false;
Doch wir wissen, dass JavaScript in dieser Disziplin ein paar Tricks auf Lager hat. In der
Praxis gibt es eine Vielzahl von Möglichkeiten, Variablen als true oder false bewerten
zu lassen. Diese Werte werden im Fachjargon als truthy oder falsy bezeichnet. Wenn wir
zum Beispiel if(variable) { … } schreiben, muss variable kein boolescher Wert sein.
Der Code in den geschweiften Klammern wird unabhängig davon ablaufen, ob die Variable die Zahl 5, den String »Hello World!" oder gar ein leeres Array enthält. Jeder Wert,
der sich in dieser Art von Kontext wie der boolesche Wert true verhält, wird als truthy,
und jeder Wert, der sich wie false verhält, wird als falsy bezeichnet.
truthy
falsy
true
1
false
(da es sich um eine andere Zahl als 0 handelt)
0
(die Zahl Null)
"0"
(da es sich um einen String handelt, der nicht
leer ist)
""
(da es sich ebenfalls um einen nichtleeren String handelt)
null
"false"
function() {}
(jede Funktion)
{}
(jedes Objekt)
[]
(jedes Array)
(ein leerer String)
undefined
(der spezielle numerische Wert
»Not a Number«)
NaN
Diese Werte können in Kombination mit dem logischen Operator NOT interessante
Effekte erzielen. Dabei wird ein einzelnes Ausrufezeichen verwendet:
var a =
var b =
if (!b)
// do
}
else if
// do
}
0;
1;
{
something
(!a) {
something else
Der logische Operator NOT gibt true zurück, wenn der Wert der Variable false ist, und
umgekehrt wird er false zurückgeben, wenn der Wert true ist. Im Beispiel ist b truthy,
sodass !b den Wert false zurückgibt, und a ist falsy, sodass !a true zurückgibt – also
würde der Code im Block else if ausgeführt werden.
342
Bedenken Sie stets, dass ein Wert == true nur truthy sein kann, und nicht strikt true:
var a =
var b =
alert(a
alert(a
alert(a
alert(a
true;
1;
== b);// alerts true
=== b);// alerts false
!= b); // alerts false
!== b); // alerts true
Wenn Sie die Möglichkeit dazu haben, sollten Sie stets die booleschen Werte true und
false verwenden. Wenn eines auf der Welt zweifellos wahr ist, dann ist es die Tatsache,
dass die Jagd auf einen durch truthy oder falsy entstandenen Logikfehler eine echte Qual
sein kann!
Es ist nicht GANZ so einfach
Da wir uns in einem Anhang befinden, können wir hier problemlos erwähnen,
dass x === null || x === undefined äquivalent zu x == null ist. Das ist ein
typischer Fall, in dem das doppelte Gleichheitszeichen verwendet werden
sollte!
B.4
jQuery demaskieren
Wie wir bereits öfters erwähnt haben, handelt es sich bei jQuery nicht um Magie, sondern lediglich um JavaScript. Und da JavaScript stetig verbessert wird, werden viele der
Löcher, die jQuery bislang gestopft hat, kontinuierlich aufgefüllt.
Hier einige Vergleiche zwischen jQuery und einfachem, alten JavaScript:
$("div"); // in jQuery
document.querySelectorAll("div"); // in JavaScript
$("<div/>"); // in jQuery
document.createElement("div"); // in JavaScript
myElement.addClass("classy"); // in jQuery
newDiv.classList.add("classy"); // in JavaScript
newDiv.toggleClass("classy"); // in jQuery
newDiv.classList.toggle("classy"); // in JavaScript
$("#myElement").next(); // in jQuery
document.getElementById("myElement").nextSibling; // in JavaScript
Selbst diese wenigen Beispiele zeigen schon deutlich auf, dass jQuery die kürzeren und
knapperen Alternativen bietet. Darüber hinaus verwendet die JavaScript-Version neue
Features, die in älteren Browsern nicht verfügbar sind.
Sie müssen sich stets vergegenwärtigen, dass es sich bei jQuery um eine Hülle handelt.
Wenn Sie verstehen, was innerhalb dieser Hülle abläuft, verbessern Sie Ihre JavaScript-,
jQuery- und generellen Entwickler-Kenntnisse für das Web.
Und wenn Sie lediglich eine kleine Konzept-Demo verfassen, kann die Integration von
jQuery auch völlig unnötig sein.
343
C
Plugin-Helfer
Einige jQuery-Eigenschaften und -Aktionen sind besonders hilfreich für die Entwicklung von Plugins. Der Grund dafür, warum wir diese in den Anhang ausgelagert haben,
liegt in ihrer recht seltenen Anwendung. Unabhängig davon handelt es sich um sehr
mächtige Funktionen, die Sie sich als Plugin-Entwickler unbedingt näher ansehen
sollten.
C.1
Selektor und Kontext
Zunächst möchten wir einen Blick auf die Eigenschaften selector und context werfen.
Diese arbeiten zusammen, um Ihnen zu zeigen, woran jQuery gerade arbeitet. Es handelt
sich im Grunde genommen um interne Methoden, doch je nach Plugin ist es gut, von
diesen zu wissen. Die Eigenschaft selector gibt einen String-Wert mit dem aktuellen
jQuery-Selektor zurück – das Kommando $('p:first').selector würde also beispielsweise »p:first« zurückgeben. Innerhalb eines Plugins ist dies überaus nützlich,
wenn Sie wissen wollen, was der Anwender ausgewählt hat.
Der optionale zweite Parameter context führt ein wenig in die Irre – es handelt sich
nicht um das, was Sie durch die Eigenschaft context erhalten. Sie übergeben context in
Form eines Strings, woraufhin es intern in ein herkömmliches jQuery-Statement verwandelt wird, das Einfluss auf die Eigenschaft selector hat:
var selector = $('p:first', '#content').selector
var context = $('p:first', '#content').context
Im Beispiel werden selector in »#content p:first« und context in Document aufgelöst
(also jenem Kontext, indem sich all Ihre Selektoren standardmäßig befinden). Die
Eigenschaft context wird nur dann modifiziert, wenn Sie einen DOM-Knoten übergeben:
var domContext = $('#content')[0]; // Get the DOM element
var selector = $('p:first', domContext).selector;
var context = $('p:first', domContext).context;
In diesem Fall wird der selector als »p:first« ausgegeben, und der context wird das
DOM-Element selbst sein (im Beispiel handelt es sich um das Element <div
id="content">). Die Angabe eines DOM-Knotens garantiert nicht, dass Ihre Anfragen
schneller laufen, denn intern wird die Selektor-Engine von jQuery nur innerhalb des
von Ihnen angegebenen Kontexts suchen – auch wenn die Eigenschaft context als
Document angegeben wird.
344
C.2
Der jQuery-Stapel
Um eine flüssige Arbeitsweise Ihrer Plugins mit jQuery sicherzustellen, sollten Sie jedes
jQuery-Element aus Ihrem Code zurückgeben, sodass die Kommandos nach dem Plugin
weiterhin verkettet werden können. Normalerweise modifizieren wir die Elemente in
der Auswahl, bevor wir sie zurückgeben, doch manchmal möchten wir auch die zurückgegebenen Elemente verändern – um beispielsweise Elemente zu entfernen oder hinzuzufügen. Dies bewerkstelligen Sie am Besten über die Aktion pushStack, die einen
komfortablen Weg zum Erstellen einer jQuery-Auswahl zur Integration in die Kette
darstellt.
Als Beispiel nehmen wir ein kleines Plugin, das jene Elemente abruft, die das ausgewählte Element umgeben. Damit können Sie beispielsweise den vorangegangenen und
den nächsten Eintrag in einer Liste mit Elementen hervorheben. Unser Plugin erkennt
dabei, ob es sich beim ausgewählten Element um das erste oder letzte in der Liste
handelt:
jQuery.fn.surrounds = function() {
var prev = this.index() == 0 ?
this.siblings(':last') :
this.prev();
var next = this.index() == this.siblings().length ?
this.siblings(':first') :
this.next();
var newStack = prev.add(next);
return this.pushStack(newStack, 'surrounds', '');
};
Das Plugin ruft die vorangegangenen und nächsten Elemente ab, und kombiniert diese
mithilfe der Aktion add zu einer gemeinsamen Auswahl. Diese neue Sammlung wird via
pushStack zurückgegeben, das die Sammlung selbst, einen Namen für diese sowie einen
Namen für den Selektor-String akzeptiert. Die beiden Namens-Parameter sind von der
Eigenschaft selector lesbar, die wir weiter oben behandelt haben. Um dieses Plugin zu
verwenden, könnten wir es einer ungeordneten Liste mit der Bezeichnung categories
zuweisen:
$('#categories li:first')
.surrounds()
.css('color', 'red')
.end()
.css('color', 'blue');
Dies wählt die beiden Elemente aus, die das erste Listenelement umgeben, und färbt
diese rot ein. Da wir pushStack verwendet haben, bleibt die jQuery-Kette intakt, sodass
wir mit dem Kommando end zur originalen Auswahl (dem ersten Listenelement)
zurückkehren und diese blau einfärben können. Sie können pushStack jedes Mal
verwenden, wenn Sie eine Kette auf diese Weise modifizieren möchten.
Ein weiterer netter Trick ist die Möglichkeit, auf andere Schritte innerhalb der Kette
zuzugreifen. Wie Sie wissen, bringt Sie die Aktion end eine Ebene nach oben zum letzten
Kommando, das die jQuery-Auswahl modifiziert hat. Wenn Sie den jQuery-Code
betrachten, erkennen Sie, dass end unter Verwendung der Eigenschaft prevObject
implementiert wurde. Innerhalb Ihres Plugins können Sie durch die Verwendung von
C.3 Komprimierung
345
this.prevObject Zugriff auf das vorangegangene jQuery-Objekt erhalten. Und wenn
dieses vorangegangene Objekt ebenfalls einen Vorgänger hatte, können Sie auch auf
diesen zugreifen!
C.3
Komprimierung
Wie Sie wissen, gibt es jeweils zwei Versionen von jQuery, jQuery UI und vielen Plugins:
Eine unkomprimierte (uncompressed) und eine komprimierte (minified) Version.
Warum ist das so?
Egal, für welche Variante Sie sich entscheiden: Wenn Sie sie Ihrer Seite hinzufügen,
erhalten Sie Zugriff auf alle enthaltenen Features. Der Unterschied besteht in der kleineren Dateigröße der ».min«-Version. Unkomprimiert kommt jQuery auf rund 250 KB,
während die komprimierte Version unter 100 KB groß ist, was der Bandbreite zu Gute
kommt. Wenn Ihr Server und die Browser Ihrer Besucher Gzipped-Dateien unterstützen
(was die meisten heutzutage tun), kann dieser Wert nochmals halbiert werden. Und
wenn die Datei nur halb so groß ist, kann sie doppelt so schnell übertragen werden.
Schnellere Downloads bewirken schnelleren Seitenaufbau, sodass die Vorteile der
»minified«-Varianten Ihrer Scripte und vor allem Plugins nicht zu übersehen sind.
Zum Packen Ihrer Dateien gibt es eine Vielzahl von Utilities, von denen wir einige der
meistverwendeten vorstellen möchten.
JavaScript-«Minifier« sind wie Ebbe und Flut – während der letzten Jahre haben wir
zahllose Utilities kommen und gehen sehen. Zwei alteingesessene Vertreter sind der YUI
Compressor78 von Yahoo und der Closure Compiler79 von Google. Ein weiteres
bedeutendes Tool ist UglifyJS80, welches das jQuery-Team selbst zum Komprimieren
seiner Dateien verwendet.
Beide Tools eliminieren Leerzeichen und kürzen Variablen- und Funktionsnamen ab.
Der Code wird dabei aus menschlicher Sicht nahezu unlesbar, doch die JavaScriptEngine des Browsers hat keinerlei Probleme damit, ihn zu interpretieren.
Folgender von Menschen lesbarer Code:
$growl.animate({
border: "none",
height: 0,
marginBottom: 0,
marginTop: "-6px",
opacity : 0,
paddingBottom: 0,
paddingTop: 0,
queue: false
});
78
79
80
http://developer.yahoo.com/yui/compressor/
http://code.google.com/closure/compiler/
https://github.com/mishoo/UglifyJS
346
… wird in diesen Code übersetzt:
$growl.animate({border:"none",height:0,marginBottom:0,marginTop:
➥"-6px",opacity :0,paddingBottom:0,paddingTop:0,queue:false}
Beim zweiten Statement wurden die Leerzeichen entfernt, und Sie können auf den ersten Blick erkennen, dass es wesentlich weniger Platz bei gleicher Funktionalität beansprucht. Und natürlich erkennen Sie auch, dass die Lesbarkeit erheblich gelitten hat.
Multiplizieren Sie diese Zeile mit den im jQuery-Source-Code vorhandenen 9000 weiteren, und Sie können sich vorstellen, wie verwirrend das Endergebnis aussehen wird. Und
das, obwohl keinerlei Namen verändert wurden.
Welchen Minifier Sie verwenden, hängt stark von Ihrer Entwicklungsumgebung und
Ihrem Workflow ab. Sowohl der Closure Compiler als auch der YUI Compressor sind
Java-Applikationen, die von der Kommandozeile aus aufgerufen werden können.
UglifyJS wurde in JavaScript verfasst und läuft auf Node.JS. Der Overhead pro Durchlauf ist bei Node wesentlich geringer als bei der Java Virtual Machine, was an Bedeutung
gewinnt, wenn Sie viele einzelne Dateien komprimieren möchten. Egal für welche Alternative Sie sich entscheiden – die Vorgehensweise bei der Kompression ist stets dieselbe.
Beispiel: Eine Datei wie hello.js komprimieren Sie mit Closure Compiler wie folgt:
java -jar compiler.jar --js hello.js --js_output_file
➥hello-compiled.js
Dies können Sie in Ihren Entwicklungsprozess integrieren, sodass Sie automatisch über
komprimierte und unkomprimierte Versionen Ihres aktuellen Codes verfügen. Wenn
Sie nur einen Durchlauf wünschen oder sich für die Funktionsweise von Minifizierern
interessieren, können Sie auch die Online-Version des Closure Compiler81 ausprobieren
und den Code durch Drücken auf »Compile« komprimieren lassen.
Am Ende ist es Ihre Entscheidung, welcher Minifier am ehesten Ihren persönlichen
Anforderungen entgegenkommt. Die Autoren dieses Buchs bevorzugen übrigens
UglifyJS! Einige Vertreter produzieren geringfügig kleinere Dateien, andere kompilieren
den Code schneller. Eines haben sie alle gemeinsam: Sie werden stets verfeinert und
aktualisiert, wobei die Entwickler stets ein offenes Ohr für das Feedback der Community
haben.
81
http://closure-compiler.appspot.com/
347
Stichwortverzeichnis
Symbole
!==-Operator 340
!=-Operator 340
$(document).ready() 32
$.ajax-Optionen 329
$.ajaxSetup 190
$.each 182
$.get 178
$.getJSON 174, 195
$.getScript 177
$.inArray 254
$.map 254
$.post 178, 196
$.support-Optionen 333
$-Funktionen 292
*-Operator 339
:checked 201
:password 201
:selected 201
||-Operator 156
+-Operator 339
===-Operator 340
==-Operator 340
=-Operator 340
A
accepts 330
Accessible Rich Internet
Applications 223
Accordion 139
Accordion-Menü 135, 140
add 344
addClass 41
addHandlers 221
ajax 333
Ajax 159, 168, 180
Fehlerbehandlung 189
Ajax-Calls 177
Ajax-Einstellungen 177
Ajax-Ereignisse 179
ajaxError 179, 192
ajaxSend 180
ajaxStart 180, 186
ajaxStop 180, 186
ajaxSuccess 180
Ajax-Widgets 164
always 178, 180
animate 57, 62, 234, 310
Animationen 50, 309
Animations-Warteschlange
65
Animieren 57
Anonyme Funktionen 52
appendTo 48, 152
ARIA 223
Assignment Operator 340
async 329
Attribut-Selektor 76
Ausblenden 50
Auswahl 32, 33, 35
Auswahl invertieren 260
Auswahlmethoden 221
Autocomplete-Plugin 215
autoFill 216
B
Baum
expandierbarer 262
Baumstrukturen 262
beforeSend 180, 184, 332
Benachrichtigungen 244
Bereichsteiler 83
Bilder 89
Bilder zuschneiden 97
Bildergalerie 183
Bildpräsentation 71
bind 300, 303, 305, 307
blur 202, 209, 211
Bounce-Animation 64
boxModel 334
Browser 18, 77, 336
Browser Sniffing 167, 333
Buttons 223
C
cache 145, 329
call 289
Callback-Funktionen 51
Callbacks 248, 287, 289, 332
CDN 23, 24
Chaining 29, 66, 212
change 202
changeBubbles 334
Checkboxen 209, 280
checkClone 334
checkOn 334
class-Attribut 41
class-Selektor 34
click 300
click-Event 147, 211, 222
click-Funktion 164
click-Handler 128
clone 166, 240, 271
closeDialog 241
closest 247
Closure 163
Code strukturieren 161
ColorBox 94, 95
complete 184
complete-Handler 332
console.log 93
348
Content Delivery Network 23
Content Distribution Network
24
contents 214, 331
contentType 331
context 189, 254, 331, 343
converters 331
cors 334
crossDomain 330
Cross-Fading 100, 104, 106
CSS 37
CSS3-Selektoren 18
CSS-Animationen 59
CSS-Eigenschaften 37, 57
cssFloat 334
currentTarget 336
Cycle-Plugin 111
D
data 117, 281, 311, 331, 336
dataFilter 333
data-Parameter 307
data-role 320
DataTables 279
dataType 193, 331
Datenquellen 164
Datenraster 272
Datentyp 193
Datenzugriff 255
Datumsauswahl 224
Datumsprüfung 226
Datumswähler 71, 224, 226
Dekrement 192
Dialogbox 153, 239, 241
Dialoge 153, 199, 238, 241
die 173
disableSelection 236
display 100
DIY-Ereignis-Objekte 337
Document Object Model 17,
29
Documentready-Event 32
DOM 17, 29
done 178, 180
Drag and Drop 71, 229
F
fadeIn 51
fadeOut 51, 234
fail 178, 179
E
false 296, 341
each 269
Falsiness 341
each-Schleife 155
falsy 296, 341
Easing 60, 61
Farbanimationen 59
Effekte 42, 232
Feature Detection 333
Eigene Ereignisse 300
Feature-Erkennung 168
Eigene Selektoren 299
Feldbezeichnungen 208
Einblenden 50
filter 137, 255, 261
Einstellungen 330
Filter 36, 200
Elemente
Firebug 40, 94
aufdecken 42
Flags 329
ausblenden 44, 50
Flash 67
einblenden 44, 50
Flexible Aktionen 43
entfernen 49
focus 209
skalierbare 81
Formulardaten 195
verbergen 42
Formulare 199
versteckte 43
Formularvalidierung 200
empty 212
for-Schleife 155
enableSelection 236
Fortschrittsbalken 237
end 344
Fotogalerie 181
Equality Operator 340
Funktionen 332
Ereignisaktionen 129
verschachtelte 276
Ereignisbehandlungsroutinen fx 145
42
fx-Stapel 310
Ereignisdelegation 128
Ereignis-Delegierung 265
G
Galerie 95, 115, 181, 312
Ereignis-Eigenschaften 336
GET-Anfrage 172, 178
Ereignis-Methoden 336
getElementsByClassName 200
Ereignisse 300, 336
Github 26
eigene 300
Gleichheits-Operatoren 340
nichtstandardisierte 305
global 330
error-Handler 332
Google Chrome Developer
event 152
Tools 40
Event Handler 42, 123, 221,
Google Content Distribution
303
Network 24
Event Namespacing 303
Growl-Stil 244
Event Propagation 128
Gültigkeitsbereich 163
Event Unbinding 303
Event-Parameter 123
H
extend 290, 293
headers 331
Externe Scripts 177
draggable 230, 231
Drop-down-Menüs 132
droppable 230, 232
hide 45
Higher Order Functions 255
Hijax 169
hover 53, 68, 101, 131, 135,
151, 211, 222
Hover Intent 134
Hover-Handler 155
hoverIntent 135
Hovern 52, 150
hrefNormalized 334
html 50
htmlSerialize 334
Hyperlinks 169
I
id-Selektor 34
IE6-Unterstützung 158, 314
ifModified 330
if-Statement 44
Image Tagging 192
index 256, 281
Indikatoren 186
Inequality Operator 340
Inhaltsbereiche 63
aufklappende 63
Inkrement 192
Inline-Bearbeitung 210
Inline-Validierung 202, 204,
206
InnerFade 109
input 202
insertAfter 47
insertBefore 47, 54
Interaktivität 159, 180
Internet Explorer 6 158, 314
isDefaultPrevented 336
isImmediatePropagation
Stopped 336
isLocal 330
isPropagationStopped 336
J
JavaScript 17, 23, 339
JavaScript-Objekte 311
JavaScript-Timer 102
JavaScript-Tooltips 150
JavaScript-Variablen 86
Jcrop 97
jQuery
Alias 27
demaskieren 342
einbinden 24
erweitern 290
herunterladen 23
Kürzel 27
Script 27
jQuery Mobile 316
jQuery Templates 167
jQuery UI 19, 140, 143, 235,
251
jQuery.support 19
jQuery-Objekte 311
jQuery-Stapel 344
jQuery-Statement 28
jQuery-UI-Bibliothek 61, 71
jQuery-UI-Dialog 241
jQuery-Widgets 71
JSON 174, 176, 193
jsonp 331
JSONP-Aufrufe 331
jsonpCallback 333
jsRender-Projekt 167
K
Kalender 224
keypress-Event-Handler 207
Kind-Selektor 64
Klassen 40
Kommentare 160
Komprimierung 345
Kontext 164, 343
Kontrollelemente 146, 199,
222
Kopfzeilen 267, 270
L
Layout-Switcher 80
leadingWhitespace 334
Lightbox 89
Listen 251
349
Listen sortieren 256
Listenelemente 258
Listen-Objekte
Mehrfachauswahl 252
live 173
load 169, 170, 172, 191, 289
locationData 311
locator 311
Login-Formular 146
Logische Operatoren 156
M
map 255
Markup 21
matchContains 216
Mehrfachauswahl 251
Mehrfachselektoren 36
Meldungen 238
Menüs 125
Accordion- 135
ausklappen 131
browserübergreifende 132
einklappen 131
expandierende 125
geschlossene 130
Indikatoren 130
offene 130
Menüsektion 130
meta 318
Methoden hinzufügen 290
Mime-Typ 331
mimeType 331
Miniaturen 113
Modale Dialoge 239
Modulus 107, 220
mousedown 306
mousemove 151
mouseout 52, 71, 304
mouseover 52, 71, 134, 173,
300, 304
mouseup 306
Multiplikations-Operator 339
Mustache Templates 167
350
N
Nachrichtenelemente 247
Namensraum 161, 305, 308
Namespacing 303
Navigation
animierte 67, 70
Navigationskontrolle 126
Navigationsleiste 75, 142
News-Ticker 109
next 55
Nichtstandardisierte
Ereignisse 305
Nightlies 26
noCloneEvent 335
noConflict 308
null 296
O
Objekt-Literal 39
off 172
on 172, 241
one 285
opacity 168, 335
openDialog 240
Operatoren
Logische 156
optDisabled 335
optSelected 335
Overlay 147
P
pageX 337
pageY 337
Paginierung 273
Panels 125, 146
Panes 146
password 332
Performance-Probleme 210
Plugin Repository 20, 59
Plugins 20, 59, 61, 109, 204,
215, 279, 283, 343
position 68, 100
POST-Anfrage 172, 178
prependTo 48
prev 55, 147
preventDefault 129, 336
processData 330
Promises 178
prop 260, 261
prototype 284
proxy 164
Prozess-Indikator 186, 187
pushStack 344
Q
qSA 200
querySelectorAll 200
queue 310
Quick Element Construction
92
R
Radiobutton 218
rapture 214
Rauchwolken-Effekt 232
relatedTarget 336
Remote-HTML 169
remove 49, 212
removeClass 42
replaceWith() 214
Reset-Methode 191
resize 79
result 216
Rollover 100
S
Schieberegler 226
Schlüssel/Wert-Paare 160
Scope 163
scriptCharset 332
scriptEval 335
scroll 73
Scrollen 57, 73, 117
Scroll-Galerie 115
Scrolling
endloses 187
Scrollleisten
benutzerdefinierte 78
scrollTo 77, 115
selectable 252, 253
selector 343, 344
Selektieren 32
Selektoren 171, 343
eigene 299
serialize 195
Serverlatenz 186
setDialogs 157
setInterval 102
setTimeout 102, 184, 234
show 45
Site-Navigation 125
Skalieren 57, 79
slice 275, 281
slideDown 51
slider 226, 325
Slideshow 89, 100, 104
scrollende 112
Slideshow-Widget 118
slideToggle 51
slideUp 51, 311
sort 258
sortable 235
special 306
spinner 145
Spinner 185, 186
Sprechblasen 245
Sprechblasen-Design 153
Standard-Ereignisaktionen
129
statusCode 332
Sterne-Bewertung 217
stopImmediatePropagation
336
stopPropagation 129, 336
Strict Equality Operator 340
Strict Inequality Operator 340
Struktur 159
Strukturierung 159
style 335
submit 204
submitBubbles 335
success 182, 184
success-Handler 332
Suckerfish-Drop-Down 132
support 333, 335
support-Utility 19
T
Tabellen 251, 267
Tabellenkopfzeilen 267, 270
Tab-Kontrolle 145
Tab-Optionen 144
Tabs 125, 141, 143
target 336
tbody 335
template 166
Templating 164, 166
Templating-Systeme 166
Ternary-Operator 105
text 50, 310
textarea 82, 202, 207, 212
Textbox 212
Texteingaben 202
thead 267
Theme Rolling 312
ThemeRoller 312
Themes 283, 313, 314
this 43
timeout 190, 332
Timeout 190
Timer 102, 103, 104
timeStamp 336
toggle 45, 300
toggle-Aktion 51
toggleClass 53, 265
Tooltips 125, 150, 153
Touch-Ereignisse 305
Touchscreen-Interaktionen
305
touchstart 305
traditional 330
Traversieren 36
trigger 212, 300
trim 294
Troubleshooting 93
true 296, 341
Truthiness 341
truthy 296, 341
Twitter 175
type 332, 336
U
Überblendung 100, 104, 109
unbind 303
Unbinding 303
undefined 296
url 332
Usereingabe
351
Maximallänge 206
username 332
Utility-Funktionen 288
V
val 201
Validation-Plugin 204
Variablen 339
numerische 192
Verkettung 29
Vervollständigen 215
Videospiel-Retro 247
W
Warenkorb 148, 165
Warteschlangen 309
which 336
Widget 120
X
xhrFields 332
xhr-Funktion 333
XML-Daten 192
XMLHTTPRequest 179, 333
Z
z-index 106
Zufallszahlen 117
60173-3 U1+U4 29.05.12 14:45 Seite 1
Aus dem Inhalt:
• Sich in jQuery verlieben
• Selektieren: Das Herz von jQuery
jQuery
jQuery ist die beliebteste JavaScript-Klassenbibliothek!
Als Programmierer sparen Sie enorm viel Zeit durch den
Einsatz von jQuery. Hier erfahren Sie, wie Sie mit jQuery
• Grundlegende Animationen und Effekte:
Verbergen und Aufdecken, Ein- und Ausblenden
• Animieren, Scrollen und Skalieren
• Bilder und Slideshows, Lightbox
• Expandierende Menüs, Accordion-Menüs
• Tabs, Tooltips und Panels
• Struktur, Ajax und Interaktivität
Ihrer Website beeindruckende Animationen und besondere
• Formulare, Kontrollelemente und Dialoge
Interaktivität verleihen können. Auch jQuery Mobile und
• Listen, Baumstrukturen und Tabellen
der Unterstützung mobiler Geräte ist ein eigenes Kapitel
• Plugins und fortgeschrittene Techniken
gewidmet. Lernen Sie mit diesem Buch die fortgeschrittenen
• Theme Rolling
Techniken und werden Sie zum echten jQuery-Ninja!
• jQuery Mobile
씰 Animationen und Bildergalerien mit jQuery
Wer die Besucher seiner Website beeindrucken will, wird an den
Animationen seine Freude haben, die mit jQuery über wenige Zeilen
Code erstellt werden können. Auch die Erstellung von Slideshows,
einer Lightbox, Bild-Miniaturübersichten und überblendbaren
Bildergalerien wird hier gezeigt.
씰 Formulare und Dialoge
Die Erstellung von Formularen ist oft eine lästige Aufgabe, aber auch
hier hilft jQuery. Nicht nur die Erstellung wird wesentlich einfacher –
Sie lernen auch, wie Sie Formulare blitzschnell validieren, dem Anwender
Über die Autoren:
Earle Castledine (aka Mr Speaker) ist als
bekannter JavaScript- und jQuery-Experte
weltweit an Entwicklungen beteiligt und auf
internationalen Konferenzen zu Web-Themen
mit Vorträgen vertreten.
Unterstützung anbieten und Elemente wie Checkboxen, Radio Buttons
oder Auswahllisten einsetzen. Dazu kommen Interaktionsmöglichkeiten
wie Datumswähler, Schieberegler und Drag and Drop.
씰 Plugins, Themes und fortgeschrittene Techniken
Über die Benutzung der üblichen UI-Komponenten hinaus bietet jQuery
eine fantastische Plugin-Architektur. In einem eigenen Abschnitt wird
verraten, wie Plugins erstellt werden und wie Sie sie grafisch an Ihre
Vorstellungen anpassen.
Know-how
ist blau.
Earle Castledine
Craig Sharkie
• CSS mit jQuery
Craig Sharkie arbeitete als Programmierer
für einige große Namen des Web, u. a. AOL,
Microsoft und Yahoo. Sein Weg hat ihn vom
Journalismus über die Beschäftigung als
Entwickler und einige internationale Vorträge
nun auch zur Tätigkeit als Buchautor geführt.
Auf www.buch.cd
jQuery Vom Novizen zum Ninja
Earle Castledine
Craig Sharkie
Castledine
Sharkie
Web-Entwicklung
jQuery
> Das JavaScript-Framework professionell einsetzen
> Interaktive Elemente in Webseiten integrieren
> Eindrucksvolle Animationen mit wenigen Zeilen Code erstellen
Der komplette Quellcode des Buches.
Scripte zum sofortigen Einsatz.
Besuchen Sie unsere Website
www.franzis.de
30,– EUR [D]
ISBN 978-3-645-60173-3
Profi-Wissen für alle jQuery-User

jQuery - Vom Novizen zum Ninja

Transcription

Documents pareils

Profil - Startseite - AT

Browser Grafiktreiber Direct3D (Windows) Grafiktreiber OpenGL ES

LSoM Slides - Decks by Sebastian Tramp

PDF-Dokument - Tim Wellhausen

Beispielseiten für eine Präsentation Max Mustermann | 12.12.2013

Lebenslauf - About Jimao Zhong

des Jobprofils als PDF

Programmierung JavaScript - CIP

Informationen - Fachhochschule Kiel