Steyer jQuery
2. aktualisierte Auflage 2018
ISBN: 978-3-446-45651-8
Verlag: Carl Hanser
Format: PDF
Kopierschutz: 1 - PDF Watermark
Das universelle JavaScript-Framework für das interaktive Web und mobile Apps
E-Book, Deutsch, 532 Seiten
ISBN: 978-3-446-45651-8
Verlag: Carl Hanser
Format: PDF
Kopierschutz: 1 - PDF Watermark
jQuery erleichtert die Arbeit des Webprogrammierers entscheidend:
- Mächtige Features für RIAs einfach entwickeln
- Nur Kenntnisse in HTML, CSS und JavaScript notwendig
- Den Umgang mit JavaScript vereinfachen
- Browserinkompatibilitäten abfangen
- Parallel für Web und mobiles Umfeld entwickeln
Autoren/Hrsg.
Fachgebiete
Weitere Infos & Material
1;Inhalt;7
2;Vorwort;17
3;1 Einleitung;21
3.1;1.1 Das Umfeld;21
3.2;1.2 Frameworks und Toolkits;22
3.3;1.3 Was behandeln wir in diesem Buch?;23
3.3.1;1.3.1 Das Kern-Framework jQuery;24
3.3.2;1.3.2 Plugins, UI, Mobile & Co;24
3.3.3;1.3.3 Wen sehe ich als Zielgruppe für das Buch?;25
3.4;1.4 Schreibkonventionen;26
3.4.1;1.4.1 Listings;26
3.5;1.5 Was benötigen Sie beziehungsweise was nutzt Ihnen?;26
3.5.1;1.5.1 Hardware und Betriebssystem;26
3.5.2;1.5.2 jQuery, jQuery Mobile, jQuery UI & mehr;27
3.6;1.6 Die Browser;34
3.6.1;1.6.1 Verschiedene Betriebssysteme und virtuelle Maschinen zum Testen;35
3.7;1.7 Die Entwicklungsumgebungen und nützliche Helferlein;36
3.7.1;1.7.1 Editoren – oft bereits mit gewisser Hilfestellung;37
3.7.2;1.7.2 Integrierte Entwicklungsumgebungen;37
3.7.3;1.7.3 Kleine Helferlein;42
3.7.4;1.7.4 Node.js und Git;43
3.7.5;1.7.5 Integrierte Entwicklungstools in Browser und Browser-Add-ons;44
3.7.6;1.7.6 Der Webserver zum realistischen Testen;45
3.8;1.8 Zusammenfassung;46
4;2 Sprung ins kalte Wasser;47
4.1;2.1 Zugriff auf Elemente und Schutz des DOM;47
4.2;2.2 Veränderung der Webseite mit DHTML;53
4.3;2.3 Animiertes Verkleinern und Vergrößern eines Elements;56
4.4;2.4 Attribute dynamisch verändern;61
4.5;2.5 Zusammenfassung;63
5;3 Grundlagenwissen;65
5.1;3.1 Das WWW, das Web 2.0 und das Client-Server-Prinzip im Internet;65
5.1.1;3.1.1 Programmierung im WWW;66
5.1.2;3.1.2 Das Web 2.0 und Ajax;66
5.2;3.2 JavaScript und das Verhältnis zu jQuery;67
5.2.1;3.2.1 Die allgemeine Einbindung von JavaScript in Webseiten;68
5.2.2;3.2.2 JSON;70
5.3;3.3 DOM und Objekte;71
5.3.1;3.3.1 DOM und der Zugriff auf Elemente einer Webseite;72
5.4;3.4 Style Sheets und DHTML;73
5.4.1;3.4.1 CSS – die Standardsprache des Webs;73
5.4.2;3.4.2 Die konkrete Syntax von CSS-Deklarationen;74
5.4.3;3.4.3 Selektoren;75
5.5;3.5 Zusammenfassung;75
6;4 Wie jQuery grundsätzlich arbeitet;77
6.1;4.1 Grundsätzliches zum Zugriff auf Elemente der Webseite;78
6.1.1;4.1.1 Ein Beispiel für unterschiedliche Knoten;79
6.2;4.2 Der jQuery-Namensraum und das jQuery-Objekt;82
6.3;4.3 Spezielle Datentypen und Strukturen in Query;83
6.3.1;4.3.1 Methoden;83
6.3.2;4.3.2 Optionen;84
6.3.3;4.3.3 jqXHR;84
6.4;4.4 Die Funktion jQuery() und der Alias $();84
6.4.1;4.4.1 Der Kontext;86
6.4.2;4.4.2 Verketten von Methoden und die jQuery-Warteschlange;87
6.4.3;4.4.3 Funktionsaufrufe nacheinander ausführen – die jQuery-Warteschlange;87
6.4.4;4.4.4 jQuery.then() und jQuery.when();88
6.5;4.5 Funktionen nach Aufbau des DOM ausführen;89
6.5.1;4.5.1 Callback oder anonyme Funktion als Parameter für jQuery();89
6.5.2;4.5.2 Das ready-Event;91
6.5.3;4.5.3 document.ready() in eine externe JavaScript-Datei auslagern;92
6.5.4;4.5.4 Mit jQuery.holdReady() das ready-Event beeinflussen;93
6.6;4.6 Ein Element mit jQuery() erstellen und in die Webseite einfügen;93
6.6.1;4.6.1 Ein trickreiches kleines Problem – können Sie es lösen?;95
6.6.2;4.6.2 Optionen zum Initialisieren von Attributen;99
6.7;4.7 Direkter Zugriff auf DOM-Elemente mit get( );101
6.8;4.8 Gemeinsame Verwendung von jQuery und anderen Frameworks;101
6.8.1;4.8.1 Die Funktion jQuery.noConflict();102
6.8.2;4.8.2 Einen alternativen Alias verwenden;103
6.9;4.9 Datenspeicherung im DOM;104
6.10;4.10 Mehr zum Kontext und jQuery-Utilities;110
6.11;4.11 Zusammenfassung;112
7;5 Umgang mit Selektoren und Filtern;113
7.1;5.1 Klassische DOM-Zugriffsmethoden;113
7.1.1;5.1.1 Objektfelder;114
7.1.2;5.1.2 Zugriff über einen Namen;114
7.1.3;5.1.3 Verwandtschaftsbeziehungen;114
7.1.4;5.1.4 Elementnamen, IDs und Klassennamen;114
7.1.5;5.1.5 DOM-Zugriffsmöglichkeiten versus jQuery;115
7.2;5.2 Was versteht man unter Selektoren?;115
7.2.1;5.2.1 Was ist ein Selektor?;115
7.2.2;5.2.2 Was sind Filter?;116
7.2.3;5.2.3 CSS3, SQL und XPath als Grundlagen und Hintergrund;116
7.3;5.3 Basisselektoren und hierarchische Selektoren;117
7.3.1;5.3.1 Beispiele zur Verdeutlichung;119
7.3.2;5.3.2 Potenzielle Fallen;130
7.4;5.4 Filterausdrücke;130
7.4.1;5.4.1 Basisfilter;131
7.4.2;5.4.2 Inhaltsfilter;138
7.4.3;5.4.3 Sichtbarkeitsfilter;141
7.4.4;5.4.4 Kindfilter;145
7.4.5;5.4.5 Attributfilter;148
7.4.6;5.4.6 Filter für Formularelemente und Formularfilter;153
7.4.7;5.4.7 Formularfilter zur Auswahl aufgrund des Zustands;157
7.5;5.5 Filtermethoden;159
7.5.1;5.5.1 Praktische Beispiele von Filtermethoden;160
7.6;5.6 Zusammenfassung;169
8;6 Zugriff auf die Elemente einer Webseite;171
8.1;6.1 Inhalte von Knoten abfragen und verändern – html() und text();171
8.1.1;6.1.1 Ein Beispiel zu html() und text();172
8.2;6.2 Inhalt von Formularfeldern – val();176
8.2.1;6.2.1 Ein Beispiel für den Zugriff auf Formularfelder;176
8.3;6.3 Zugriff auf Attribute und Eigenschaften mit attr() und prop();178
8.3.1;6.3.1 Zugriff auf Attribute;178
8.3.2;6.3.2 Zugriff auf Eigenschaften;178
8.3.3;6.3.3 Unterschied zwischen Attributen und Eigenschaften;179
8.3.4;6.3.4 Das Beispiel zum Zugriff auf Eigenschaften und Attribute;180
8.4;6.4 Einfügen von Knoten in eine Webseite;186
8.4.1;6.4.1 append() und prepend();186
8.4.2;6.4.2 appendTo() und prependTo();191
8.5;6.5 Knoten nachher oder vorher einfügen;196
8.5.1;6.5.1 after() und before();197
8.5.2;6.5.2 insertAfter() und insertBefore();197
8.6;6.6 Ummanteln;197
8.6.1;6.6.1 Einzeln mit wrap() ummanteln;197
8.6.2;6.6.2 Alles ummanteln mit wrapAll();200
8.6.3;6.6.3 Innere Bereiche ummanteln mit wrapInner();201
8.6.4;6.6.4 Den Mantel ablegen – unwrap();202
8.7;6.7 Ersetzen mit replaceWith() und replaceAll();202
8.7.1;6.7.1 Ersetzen mit replaceWith();202
8.7.2;6.7.2 Alles ersetzen mit replaceAll();206
8.8;6.8 Überflüssige Knoten entfernen;208
8.8.1;6.8.1 Die Methoden empty() und remove();208
8.8.2;6.8.2 Die Alternative zu remove() – detach();214
8.8.3;6.8.3 Löschen von Attributen;215
8.9;6.9 Vervielfachen mit clone();215
8.10;6.10 Suchen & Finden;215
8.10.1;6.10.1 Von Kindern und Eltern;216
8.10.2;6.10.2 Von Geschwistern;219
8.10.3;6.10.3 Nachfolger mit has() suchen;221
8.11;6.11 Finden mit find() und contents();221
8.12;6.12 Mit each() und map() über Arrays und Objekte iterieren;223
8.12.1;6.12.1 jQuery.each() und jQuery.map();224
8.12.2;6.12.2 Die Methoden each() und map();229
8.13;6.13 Die Methode add();230
8.14;6.14 Die Methoden end() und andSelf();232
8.15;6.15 Zusammenfassung;233
9;7 Layout und Formatieren mit Style Sheets unter jQuery;235
9.1;7.1 Hintergrundinformationen;235
9.1.1;7.1.1 CSS in jQuery – Vermischung von Layout und Funktionalität?;236
9.2;7.2 Die Methode css();237
9.2.1;7.2.1 Abfragen von Stileigenschaften;237
9.2.2;7.2.2 Setzen von Eigenschaften;237
9.3;7.3 Klassen von Elementen verändern;238
9.3.1;7.3.1 Klassen hinzufügen – addClass();238
9.3.2;7.3.2 Klassen wegnehmen – removeClass();247
9.3.3;7.3.3 Klassen umschalten mit toggleClass();247
9.3.4;7.3.4 Test auf eine Klasse – hasClass();248
9.4;7.4 Methoden zur Positionierung;248
9.4.1;7.4.1 Bestimmen der Position mit position();249
9.4.2;7.4.2 Position relativ zum Dokument – offset();254
9.4.3;7.4.3 Methoden zum Scrollen;258
9.5;7.5 Höhe und Breite;261
9.5.1;7.5.1 height() und width();261
9.6;7.6 Innere und äußere Maße;265
9.7;7.7 jQuery.cssHooks;268
9.8;7.8 Zusammenfassung;270
10;8 Ein Praxisbeispiel – eine Datumskomponente;271
10.1;8.1 Das Ziel;271
10.1.1;8.1.1 Die Basiswebseite;272
10.2;8.2 Die CSS-Datei – Templates;273
10.3;8.3 Die JavaScript-Datei;274
10.4;8.4 Zusammenfassung;279
11;9 Ereignisbehandlung unter jQuery;281
11.1;9.1 Grundlagen zu Ereignissen, Eventhandlern, Triggern und Datenbindung;282
11.1.1;9.1.1 Ereignisse;282
11.1.2;9.1.2 Allgemeines zu Eventhandlern;282
11.1.3;9.1.3 HTML-Eventhandler;283
11.1.4;9.1.4 JavaScript/DOM-Eventhandler;283
11.1.5;9.1.5 Das Ereignisobjekt;284
11.1.6;9.1.6 Blubbern und die Bubble-Phase;285
11.1.7;9.1.7 Datenbindung;287
11.1.8;9.1.8 Trigger;287
11.1.9;9.1.9 Delegation;288
11.1.10;9.1.10 Versprechen (Promises);288
11.2;9.2 Das Ereignisobjekt in jQuery;289
11.2.1;9.2.1 Der Konstruktor von jQuery.Event;289
11.2.2;9.2.2 Die Eigenschaften des Ereignisobjekts jQuery.Event;290
11.2.3;9.2.3 Die Methoden eines Objekts vom Typ jQuery.Event;294
11.2.4;9.2.4 Die Ausführung des bereitstehenden Ereignisses anhalten;297
11.3;9.3 Ich habe fertig – $(document).ready();298
11.4;9.4 Event-Helper;298
11.5;9.5 Erweiterte Methoden für das Eventhandling;303
11.5.1;9.5.1 Datenbindung;303
11.5.2;9.5.2 Triggern;308
11.6;9.6 Live Events;312
11.6.1;9.6.1 Die veraltete Methode live();312
11.6.2;9.6.2 Die veraltete Methode delegate() und die delegate-Variante von on();313
11.6.3;9.6.3 Die Methoden die() und undelegate();317
11.7;9.7 jQuery.proxy();317
11.8;9.8 Weiterentwicklung der Datumskomponente;320
11.9;9.9 Zusammenfassung;322
12;10 Effekte und Animationen;323
12.1;10.1 Grundsätzliche Anwendung;323
12.1.1;10.1.1 Speed is all you need;323
12.1.2;10.1.2 Die Angabe eines Callback;325
12.1.3;10.1.3 Verkettung;325
12.1.4;10.1.4 Warteschlangen;326
12.1.5;10.1.5 Beendigung mit stop(), finish() und jQuery.fx.off;326
12.1.6;10.1.6 Endlosanimationen;327
12.1.7;10.1.7 Art der Animationen – Easing;327
12.2;10.2 Konkrete Effekte mit Standardmethoden;329
12.2.1;10.2.1 Anzeigen und Wegblenden – die Methoden show() und hide();329
12.2.2;10.2.2 Gleiteffekte – slideDown(), slideUp() und slideToggle();329
12.2.3;10.2.3 Transparenzeffekte – fadeIn(), fadeOut() und fadeTo() sowie toggle();332
12.3;10.3 Individuelle Animationen mit animate();336
12.4;10.4 Zusammenfassung;344
13;11 Asynchrone Programmierung;345
13.1;11.1 Ajax und XMLHttpRequest (XHR) – Grundlagen;346
13.1.1;11.1.1 Ein XMLHttpRequest-Objekt manuell erzeugen;346
13.1.2;11.1.2 Die Methoden eines XHR-Objekts;347
13.1.3;11.1.3 Die Eigenschaften eines XHR-Objekts;348
13.1.4;11.1.4 Das Datenformat bei einer Ajax-Kommunikation;348
13.1.5;11.1.5 Exemplarischer Ablauf einer Ajax-Anfrage;349
13.2;11.2 Spezialitäten bei der Ajax-Unterstützung in jQuery;350
13.2.1;11.2.1 JSONP und Remote Requests;350
13.2.2;11.2.2 Das jqXHR-Objekt;351
13.2.3;11.2.3 Grundsätzliches zu Methoden in jQuery für Ajax-Anfragen;351
13.2.4;11.2.4 Vermeidung von Caching;353
13.3;11.3 Anwendung der Standardmethoden für Ajax;353
13.3.1;11.3.1 $.get() und $.post();353
13.3.2;11.3.2 JSON-Daten anfordern und verarbeiten – getJSON() und parseJSON();362
13.4;11.4 Ein Skript per Ajax nachladen – jQuery.getScript();364
13.5;11.5 Die allgemeine Variante zum Laden von Daten – load();366
13.5.1;11.5.1 Filter angeben;367
13.6;11.6 Serialisieren von Daten;371
13.6.1;11.6.1 Die Methode serialize();371
13.6.2;11.6.2 Die Methode serializeArray();373
13.6.3;11.6.3 Die allgemeine Version zum Serialisieren – $.param();373
13.7;11.7 Vorgabewerte für Ajax – jQuery.ajaxSetup();374
13.8;11.8 Ajax Events und Ajax-Eventhandler;374
13.8.1;11.8.1 Lokale Ereignisse;374
13.8.2;11.8.2 Globale Ereignisse;376
13.9;11.9 Die vollständige Kontrolle;377
13.9.1;11.9.1 jQuery.ajax();377
13.9.2;11.9.2 Erweiterte Techniken für $.ajax();385
13.10;11.10 Web Worker;387
13.10.1;11.10.1 Was ist ein Web Worker?;387
13.10.2;11.10.2 Erzeugen von Web Workern;388
13.10.3;11.10.3 Die Kommunikation mit einem Web Worker;389
13.10.4;11.10.4 Einen Worker mit terminate() beenden;389
13.10.5;11.10.5 Ein Beispiel zu einem klassischen Web Worker;390
13.11;11.11 Deferred Object und Promises;392
13.11.1;11.11.1 Das Umfeld – Promises;393
13.11.2;11.11.2 Die speziellen jQuery-Methoden zum Umgang mit einem Deferred Object;396
13.11.3;11.11.3 Ein konkretes Beispiel mit Deferred Objects;398
13.12;11.12 Ajax mit Deferred Objects;399
13.12.1;11.12.1 Generische Ajax-Methoden mit then() verketten;400
13.12.2;11.12.2 Das Laden von Skripts mit Deferred Objects;400
13.12.3;11.12.3 JSONP und Deferred Objects;401
13.12.4;11.12.4 Mehrere Ajax-Anfragen ausführen und synchronisieren;402
13.13;11.13 Das Callbacks Object;403
13.14;11.14 Zusammenfassung;407
14;12 jQuery UI;409
14.1;12.1 Was versteht man unter jQuery UI?;410
14.1.1;12.1.1 Komponenten zur Unterstützung der Interaktion;410
14.1.2;12.1.2 Widgets;410
14.1.3;12.1.3 Erweiterte Effekte;411
14.1.4;12.1.4 Das Themen-Framework samt ThemeRoller;411
14.2;12.2 Der Einstieg in jQuery UI;412
14.3;12.3 Wie nutzt man jQuery UI grundsätzlich?;413
14.3.1;12.3.1 Download und der ThemeRoller;413
14.3.2;12.3.2 Die Bereitstellung und Einbindung lokaler Ressourcen;417
14.3.3;12.3.3 Einbindung über ein CDN;418
14.4;12.4 Verwenden der Komponenten in jQuery UI;419
14.4.1;12.4.1 Die Defaulteinstellung;420
14.4.2;12.4.2 Einige grundsätzliche Regeln zu Komponenten und Widgets;423
14.4.3;12.4.3 Eigenschaften/Optionen von Komponenten;423
14.4.4;12.4.4 Methoden von Komponenten;426
14.4.5;12.4.5 Events bei Komponenten und Widgets;430
14.5;12.5 Ein Überblick über die Komponenten und Widgets;430
14.5.1;12.5.1 Die Interaktionskomponenten;430
14.5.2;12.5.2 Die Widgets;431
14.6;12.6 Effekte;443
14.6.1;12.6.1 Die Methode effekt();443
14.6.2;12.6.2 Farbanimationen mit animate();443
14.7;12.7 Zusammenfassung;444
15;13 jQuery Mobile;445
15.1;13.1 Grundlagen;446
15.1.1;13.1.1 Die Plattformen;447
15.1.2;13.1.2 Widgets und Features;449
15.1.3;13.1.3 Download und Bereitstellung;449
15.1.4;13.1.4 Themes und der ThemeRoller;451
15.2;13.2 Das Rollensystem und data-role;452
15.3;13.3 Der grundsätzliche Aufbau einer mobilen Seite;452
15.3.1;13.3.1 Ein erstes vollständiges Beispiel;453
15.4;13.4 Verknüpfen von Seiten;454
15.4.1;13.4.1 Externe Links mit Hijax;455
15.4.2;13.4.2 Interne Links und das spezielle Verständnis einer Seite;455
15.4.3;13.4.3 Zurück in der Historie;456
15.5;13.5 Die Übergänge;458
15.6;13.6 Dialoge;459
15.7;13.7 Schaltflächen;460
15.7.1;13.7.1 Schaltflächen mit Icons;460
15.7.2;13.7.2 Blockelement oder Inline-Element;461
15.7.3;13.7.3 Gruppierung;462
15.8;13.8 Toolbars und Navigationsbars;463
15.9;13.9 Listen;465
15.10;13.10 Formularelemente;466
15.10.1;13.10.1 Feldcontainer;467
15.10.2;13.10.2 Die verschiedenen Formularelemente;467
15.10.3;13.10.3 Deaktivieren von Elementen;468
15.10.4;13.10.4 Plugin-Methoden bei Formularelementen;468
15.10.5;13.10.5 Abschicken der Formulardaten;468
15.11;13.11 Spezielle Ereignisse;468
15.11.1;13.11.1 Berührungsereignisse;469
15.11.2;13.11.2 Änderung der Orientierung;469
15.11.3;13.11.3 Verschiebeereignisse;469
15.11.4;13.11.4 Seitenereignisse;470
15.11.5;13.11.5 Ein Beispiel mit Reaktionen auf Events;470
15.12;13.12 Kollabierte und expandierte Inhalte;472
15.13;13.13 Zusammenfassung;474
16;14 Plugins;475
16.1;14.1 Die Plugin-Seiten von jQuery;475
16.2;14.2 Ein vorhandenes Plugin suchen und verwenden;478
16.3;14.3 Eigene Plugins erstellen;485
16.3.1;14.3.1 Warum eigene Plugins erstellen?;485
16.3.2;14.3.2 Erstellen eines ersten Plugins;486
16.3.3;14.3.3 Die wesentlichen Regeln zur Erstellung eines einfachen Plugins;488
16.3.4;14.3.4 Regeln zur Erstellung komplexerer Plugins;489
16.3.5;14.3.5 Ein Beispiel für ein Plugin mit Optionen;490
16.3.6;14.3.6 Ein weiteres Beispiel für ein Plugin mit Optionen;492
16.3.7;14.3.7 Ein Plugin veröffentlichen;493
16.4;14.4 Zusammenfassung;497
17;15 Das Habitat rund um jQuery;499
17.1;15.1 Sizzle;499
17.2;15.2 QUnit;502
17.2.1;15.2.1 xUnit-Testing;502
17.3;15.3 Bootstrap;508
17.3.1;15.3.1 Responsive Design;508
17.3.2;15.3.2 Bootstrap zur Umsetzung von RWD;509
17.3.3;15.3.3 Herunterladen von Bootstrap;510
17.3.4;15.3.4 Eine Basis-Vorlage;510
17.3.5;15.3.5 Ein Kontaktbeispiel;511
17.4;15.4 Zusammenfassung;513
18;16 Anhang;515
18.1;16.1 Grundlagen zu JavaScript;515
18.1.1;16.1.1 Case-Sensitivität;515
18.1.2;16.1.2 Variablen, Literale und Datentypen;515
18.1.3;16.1.3 Funktionen und Methoden;517
18.1.4;16.1.4 Objekte in JavaScript;519
18.2;16.2 Die Webseite zum Buch;521
19;Index;523
20;Leere Seite;2
