INDEXSYMBOLE$() als Abkürzung für jQuery() 296, 299, 313$() Konflikte mit Skripts, die $ verwenden 361$.ajax() (jQuery-Methode) 388, 405$(document).ready(function(){...} ) 312$(function() { ... }) 364–365$(this) 324, 549+= (Anhängen an einen String) 125+= Anhängen an einen String 111{} Codeblock (Funktion) 90() Endklammern (Funktionsaufruf) 97== Gleich 150, 168> Größer als 151>= Größer oder gleich 151() Gruppierungsoperator 97< Kleiner als 151<= Kleiner oder gleich 151&& Logisches AND 157–158, 537! Logisches NOT 157, 159|| Logisches OR 157, 159, 169. Memberoperator 103=== Strikt gleich 150, 168!== Strikt ungleich 150, 168!= Ungleich 150, 168// (URL ohne http:) 355[] Zugriff auf Objekteigenschaften 103= Zuweisungsoperator 107
AAbmessungen, Kästen 348.abort() (jqXHR-Objekt) 389Abschicken-Schaltflächen 578–579.accordion() (jQuery UI) 430action (DOM-Eigenschaft) 572.add() (jQuery-Methode) 531add() 584.addClass() (jQuery-Methode) 320, 498, 512–513, 519, 565addEventListener() (DOM-Methode) 254–255, 570–571Adresse (aktueller URL) 124.after() (jQuery-Methode) 318, 535$.ajax() (jQuery-Methode) 398–399Ajax
Anforderungen erstellen 373Anworten verarbeiten 373CORS (Cross Origin Resource Sharing) 384Datenformate
HTML 374JSON 374, 376–377XML 374–375
Daten mit Angular laden 438Einführung 370–372Formulare, .serialize() 394HTML-Daten laden 378–379HTML-Daten laden (jQuery) 390–393jQuery 388–389
$.ajax() 398–399Formulare abschicken 394–395jqXHR-Objekt 389, 405Kurzmethoden 392–393
$.get() 392–393$.getJSON() 392$.getScript() 392$.post() 392
.load() 390–391, 407, 427
.post() 394–395jqXHR-Objekt
EigenschaftenresponseText 389responseXML 389status 389statusText 389
Methoden.abort() 389.always() 389.done() 389.fail() 389
JSON$.getJSON() 396–397JSON-Daten laden 382–383JSON-Daten laden (jQuery) 396–397
JSON-Objektparse() 377stringify() 377
Proxy (Daten von einem anderen Server laden) 384Relative URLs 389URLs aktualisieren 424–427URLs pflegen 424–427XDomainRequest-Objekt (IE8-9) 384XML-Daten laden 380–381XMLHttpRequest-Objekt 372
EigenschaftenresponseText 379, 383responseXML 380status 373, 378–379
open() 373send() 373
Akkordeon siehe ZiehharmonikaAktueller URL
Eigenschaft location des window-Objekts 36alert() (window-Objekt) 125Altersprüfung 617–619.always() (jqXHR-Objekt) 389, 396Änderungsereignisse 284–285AngularJS 428, 434–439.animate() (jQuery-Methode) 365, 493, 521Animation 515, 520–521Anonyme Funktionen 88, 96Anweisungen 56Anzahl der Zeichen in einem String 128–130APIs
API-Schlüssel 441Einführung 410, 412HTML5-APIs 413
Ortungs-API 416–419Verlaufs-API 424–427Webspeicher-API 420–423
Konsolen-API 470Plattform-APIs 440
Google Maps 441–446Skripts
AngularJS 434–439Skripts mit APIs 428
.append() (jQuery-Methode) 318, 565appendChild() (DOM-Methode) 222, 240.appendTo() (jQuery-Methode) 505, 519Argumente 93, 109Array-Objekt
length 118–119push() 542–543
Arrays 530Als Objekte 118–119Arrayartige Objekte (jQuery) 308, 340Arrays aus Objekten 119Durchlaufen 175, 535Elemente hinzufügen und entfernen 530Erstellen 128Mehrere Rückgabewerte einer Funktion 95Methoden
concat() 530every() 530filter() 530, 536–537forEach() 530, 536–537map() 530pop() 530push 540push() 519, 530reverse() 530shift() 530some() 530sort() 530, 554unshift() 530
split() (String-Objekt) 619Unterschiede zu Variablen und Objekten 116–117
Asynchrones Laden 509Asynchrone Verarbeitung 371attachEvent() 255, 290
Browserübergreifende Lösung 570–571.attr() (jQuery-Methode) 320, 498, 512–513Attribute
Ändern 232, 320Ändern (jQuery) 320Erstellen 234
Attributknoten 232–235Aufruf einer Funktion 91Ausdrücke
Funktionsausdrücke 96Vergleichen 154
Ausführungskontext 453–456Ausführungsreihenfolge 452Ausnahmen 458
Fehlerbehandlung 480–481Auswahlfelder 584–587Auswerten von Bedingungen 150Automatische Vervollständigung 370
Bback() (history-Objekt) 426Barrierefreiheit 491Bedingte Anweisungen 149
Bedingter Lader 596–597if 160–161, 181if... else 162–163switch 164–165, 291
Bedingtes Laden 596–597Bedingungsoperatoren 150.before() (jQuery-Methode) 318beforeunload 286–287Bereichsschieberegler 432Bibliotheken 360Bilder 511Bildschirmabmessungen 124–125Bindung von Ereignissen 248, 250blur 247, 274–275, 282, 573, 588–589blur() (DOM-Methode) 573Boolescher Datentyp 62Boolesche Werte 62break 174Browser
Abmessungen 124–125, 350Browserunterstützung siehe ModernizrBrowserunterstützung in den Beispielen 10Entwicklerwerkzeuge
Debugging 464–465DOM untersuchen 236–237
JavaScript-Konsole 464–465Rendering-Engine 40Rollbalken 350
Browser Object Model 124–125Einführung 121–122history-Objekt 122, 124–125, 424–427location-Objekt 122navigator-Objekt 122screen-Objekt 122, 124–125window-Objekt 122, 124–125
Bubbling 260–261:button (jQuery-Selektor) 342
CCallback-Funktion (JSONP) 385cancelable (event-Objekt) 262Capturing 260–261catch 480–481, 576–577CDN 354–355ceil() (Math-Objekt) 134change 247, 282, 573, 586–587charAt() (String-Objekt) 128–130:checkbox (jQuery-Selektor) 342:checked (jQuery-Selektor) 342checked (DOM-Eigenschaft) 573, 580.children() (jQuery-Methode) 336click 39, 246, 276–277, 573.click() (jQuery-Methode) 512–513click() (DOM-Methode) 573clientX (event-Objekt) 278
clientY (event-Objekt) 278.clone() (jQuery-Methode) 346.closest() (jQuery-Methode) 336Codeabhängigkeiten 616Codeblöcke
Einführung 56Funktionen 90
Codewiederverwendung 616.complete() (jQuery-Methode) 396concat() (array-Objekt 530:contains() (jQuery-Selektor) 338continue 174, 595copy (Ereignis) 247CORS (Cross Origin Resource Sharing) 384Cross-Site Scripting (XSS) 228–231.css() (jQuery-Methode) 322, 510–511, 521CSS 9
CSS-artige Selektoren in jQuery 302–303Eigenschaften und Werte 9Formatierung ändern 497–499Formatierung ändern (jQuery) 322–323Formatierungsstile ändern (DOM) 195id-Attribut ändern 232Kastenabmessungen 348Klassen
Ändern mit jQuery 320–321Klassennamen ändern 232
Selektoren zum Auswählen von Elementen 193, 202cut (Ereignis) 247
DDarstellungsschicht 44.data() (jQuery-Methode) 546, 565, 602, 608–609Dateierweiterungen
.js 46
.min.js 298Datenbindung 437Datenformate
Ajax 374Objektliteral 534
DatenmodelleArrays aus Objekten 119Arrays in Objekten 119Arrays und Objekte als Datenstrukturen im Vergleich 533Einführung 26–27Objekte und Eigenschaften 28Objektliteralschreibweise 586Vergleichstechniken 116–117
Datenportabilität 374Datentypen
Boolesche WerteTruthy und falsy 167
Einfache (primitive) DatentypenBoolean 131Null 131Number 131String 128–131Undefined 131
Implizite Typumwandlung und schwache Typisierung 166
Komplexe DatentypenObjekte (Arrays und Funktionen) 131
Number 132–135Numerisch 62Strings 62
Daten von einem anderen Server anzeigen 385–388Date-Objekt 619
Abstand zwischen zwei Daten 139Datumsformate 136–137, 139Erstellen 138, 143Kalenderdaten berechnen 143Konstruktor 137Methoden
getDate() 137getDay() 137getFullYear() 137getHours() 137getMilliseconds() 137getMinutes() 137getMonth() 137getSeconds() 137getTime() 137getTimeZoneOffset() 137setDate() 137setFullYear() 137setHours() 137setMilliseconds() 137setMinutes() 137setMonth() 137setSeconds() 137setTime() 137toDateString() 137toString() 137toTimeString() 137
Monatsnamen 143Tagesnamen 143
Datumsangaben 432–433Datumsauswahl 432–433, 591, 619Monatsnamen 137Sortieren 559Vergleichen 619Wochentage 137
dblclick 246, 276Debugging
Tipps 484Vorgehensweise 463
defaultChecked (DOM-Eigenschaften) 573defaultValue (DOM-Eigenschaften) 573Deklarieren von Funktionen 90Deklarieren von Variablen 60.delay() (jQuery-Methode) 364Delegierung 331delete 107, 112, 533Deserialisierung 382Design Pattern siehe Entwurfsmuster.detach() (jQuery-Methode) 346, 502–503, 505Developer Tools siehe EntwicklerwerkzeugeDiashow 515–520:disabled (jQuery-Selektor 342
disabled (DOM-Eigenschaften) 573, 578document-Objekt 38–39, 123
Eigenschaftendomain 126lastModified 126–127title 126–127URL 126–127
Einführung 36–37getElementById() 39keypress-Ereignis 39lastModified 36, 39load-Ereignis 39Methoden
createElement() 126createTextNode() 126getElementById() 126querySelectorAll() 126write() 126
title 36, 39write() 39, 49, 226
Dokumentknoten 186–187DOMContentLoaded 286, 287DOM (Document Object Model) 126–127
Arbeiten mit dem DOM 188Attribute ändern 232–235Attributknoten 187, 232–235
class 232id 232
document-Objekt 36–39Dokumentknoten 186DOM-Abfragen 190
Leistung 192Zwischenspeichern 575
DOM-Baum 40–41, 186–187Ändern 212–213DOM durchlaufen 208, 210–211Untersuchen (Browser-Werkzeuge) 236–237
DOM-Bearbeitung 219, 222–225, 227Durchlaufen 208Durchlaufen (jQuery) 336, 548–549Einführung 121, 123Elemente ändern 212Elemente auswählen
getElementById('id') 193Elemente erstellen
createElement() 222Elemente hinzufügen
appendChild() 222insertBefore() 222, 240
ElementeigenschaftenclassName 195innerHTML 218, 220–221textContent 216
Elementknoten 186, 189Ereignisse
Ereignishandler 252–253Ereignislistener 250, 254–255, 263, 265
HTML-Inhalt ändernDOM-Bearbeitung 219innerHTML 218–221, 227
Knoten 40Knotenliste 192
Aktive und statische Knotenlisten 196Elemente aus einer Knotenliste auswählen 198–199In einer Schleife durchlaufen 204–205length 196
Weißraum 209–211Textinhalt ändern
nodeValue 214–215textContent und innerText 216
Textknoten 187createTextNode() 222
Untersuchen (Browser-Werkzeuge) 236–237Verweise auf Elemente speichern 191Zugriff auf Elemente 192–194
getElementById 194–195getElementsByClass() 197getElementsByClassName 200getElementsByClassName('class') 193getElementsByTagName() 197, 201getElementsByTagName('tagName') 193querySelector() 194, 202querySelectorAll() 197querySelectorAll('css selector') 193querySelector('css selector') 193
Zwischenspeichern von DOM-Abfragen 190DOMNodeInserted 247, 284–285DOMNodeInsertedIntoDocument 247, 284DOMNodeRemoved 247, 284DOMNodeRemovedFromDocument 247, 284DOMSubtreeModified 247, 284.done() (jqXHR-Objekt) 389, 396, 405Do-while-Schleifen 177Dropdownfelder 584–587DRY-Prinzip (Don't Repeat Yourself) 616Durchlaufen des DOM 208Dynamische Filterung 538–541
Ee (Abkürzung für event- oder error-Objekt) 328.each() (jQuery-Methode) 324, 498, 519, 531, 546–547ECMAScript 532Eigenschaften
Einführung 28–29, 100–101Name/Wert-Paare 28
ElementeAbmessungen (jQuery) 348Ändern 212–213Ändern (DOM) 212–213Ändern (jQuery) 313, 346Auschneiden, kopieren und einfügen 346Ausgewählte Elemente in jQuery 302–303Auswählen 342createElement() 126, 222, 240Erstellen 222Formularelemente (jQuery) 343Inhalt ändern 218–227Neue Elemente einfügen (jQuery) 318–319Suchen (jQuery) 336
Text änderninnerText und textContent 216–217nodeValue 214–215
Verbergen 582–583Verschieben im DOM-Baum 208
elements (Sammlung) 572.empty() (jQuery-Methode) 346, 505:enabled (jQuery-Selektor) 342Endklammern 97Entscheidungen 148Entwicklerwerkzeuge 236–237, 464–465Entwurfsmuster 501.eq() (jQuery-Methode) 512–513, 521Ereigniserfassung 260Ereignisse
Änderungsereignisse und Beobachter 284–285Arten von Ereigissen
Formularereignisse (jQuery) 343Arten von Ereignissen
Browserereignisse 271HTML5-Ereignisse 271, 286Mausereignisse 276–277UI-Ereignisse 272W3C-DOM-Ereignisse 271
beforeunload 286, 287Betätigtes Element in der Benutzeroberfläche 262, 270Bindung 248, 250blur 274–275, 282, 588–589change 282, 586–587click 276–277dblclick 276Delegierung 266, 290Delegierung (jQuery) 331DOMContentLoaded 286–287DOMNodeInserted 284–285DOMNodeInsertedIntoDocument 284DOMNodeRemoved 284DOMNodeRemovedFromDocument 284DOMSubtreeModified 284Einführung 5, 30–31, 244Ereignisfluss 260–261Ereignishandler 250, 252Ereignislistener 250, 254–255
Entfernen 255Parameter angeben 257, 263
error 272Ereignisbehandlung (browserübergreifend) 570event-Objekt 262–263, 265
Eigenschaftencancelable 262clientX 278–279clientY 278–279pageX 278–279pageY 278–279screenX 278–279screenY 278–279target 262type 262
MethodenpreventDefault() 262, 267, 283stopPropagation() 262, 267
event-Objekt (jQuery) 328–329Eigenschaften
data 328pageX 328pageY 328target 328timeStamp 328type 328which 328
Methoden.preventDefault() 328.stopPropagation() 328
focus 274–275, 282, 588–589, 594–595focusin 274focusout 274Funktionen auslösen 248hashchange 286HTML-Ereignishandler 250–251IE8-Ereignismodell
attachEvent() 255, 258–259, 290Ausweichlösung 259Browserübergreifende Lösung 570–571Entsprechende Eigenschaften und Methoden 262event-Objekt 264–265jQuery 301
input 280, 282, 588–589jQuery-Ereignisse 326–331, 343keydown 280keypress 280–281keyup 280Leistung 266load 272–273mousedown 276mousemove 276mouseout 276mouseover 276mouseup 276Position bestimmen 278resize 272scroll 272submit 282Touchscreen-Ereignisse 271UI-Ereignisse 246, 248unload 272
.error() (jQuery-Methode) 396error (Ereignis) 246, 272EvalError 459, 459–460Event-Objekt
target 576every() (array-Objekt) 530Exception siehe Ausnahmen
F.fadeIn() (jQuery-Methode) 365.fadeOut() (jQuery-Methode) 510–511.fadeTo() (jQuery-Methode) 510–511.fail() (jqXHR-Objekt) 389, 396, 405Falsy und truthy 167Farbwähler 591
Feature-Erkennung 301, 414, 593Modernizr 415
Fehlerbehandlung 458, 480–481, 576–577Ausnahmebehandlung 480–481Debugging 463Debugging von JSON-Daten 474Häufig auftretende Fehler 485NaN 461Tipps zum Debugging 484try... catch 576–577
FehlerbehebungAjax funktioniert in Chrome nicht lokal 378Bei äquivalenten Werten wird keine Übereinstimmung
festgestellt 166Ereignisse werden mehrmals ausgelöst 260IE führt lokal gespeicherte Skripts nicht aus 47jQuery-Objekt gibt nur Daten vom ersten Element
der Auswahl zurück 307Über Ajax angeforderte Medien werden nicht
angezeigt 389Fehlerobjekte 459, 461, 481
EvalError 459RangeError 459ReferenceError 459SyntaxError 459TypeError 459URIError 459
:file (jQuery-Selektor) 342.filter() (jQuery-Methode) 343, 531, 548filter() (array-Objekt) 530, 536–537Filterung
Einführung 534Galeriebeispiel 548–549Schlagwörter 544–549
finally 480–481.find() (jQuery-Methode) 336, 498, 519, 565Firebug 237firstChild (DOM-Eigenschaft) 208, 211Flags 578–579floor() (Math-Objekt 134Flussdiagramme
Einführung 18, 23Entscheidungen 148
fn-Objekt (jQuery) 523.focus() (jQuery-Methode) 619:focus (jQuery-Selektor) 342focus() (DOM-Methode) 273, 573focus (Ereignis) 247, 274–275, 282, 573, 588–589, 594–595focusin 247, 274focusout 247, 274forEach() (array-Objekt) 530, 536–537Formulare
Abschicken 574–575Abschicken-Schaltfläche 578–579
Deaktivieren 578–579Wiederholtes Abschicken verhindern 578–579
Auswahlfelder 584–587Füllen 584–585
Bereichsschieberegler 591Betätigtes Element ermitteln 576
Code beim Abschicken ausführen 574–575Datumsauswahl 591Eigenschaften
action 572checked 573defaultChecked 573defaultValue 573disabled 573elements 572elements collection 574–575form 573method 572multiple 584name 572–573options 584selected 573selectedIndex 584selectedOptions 584type 573, 576value 573
Elemente auswählen 342Elemente je nach Zustand anderer Elemente anzeigen
oder verbergen 618elements (Sammlung) 600Ereignisse 282–283
blur 573, 588–589change 573, 586–587click 573focus 573, 588–589, 594–595input 573, 588–589keydown 573keypress 573keyup 573reset 572submit 572
Erweiterung 568Fokus auf ein Element 619jQuery UI 432–433
Datumsauswahl 432–433Schieberegler 432–433
Kontrollkästchen 580–581Methoden
add() 584blur() 573click() 573focus() 573remove() 584reset() 572select() 573submit() 572, 574–575
Optionsschalter 582–583Welche Option wurde ausgewählt 584–587Wurde ein Schalter markiert 582–583
Passwortlänge 620–621Passwortübereinstimmung 620–621Steuerelemente 573Texteingaben
Farbe ändern 594–595Wert ändern 594–595
Textfelder 588–589Zeichenzähler 588–589
Typ eines Steuerelements ändern 576Validierung 282, 598–619
Alter 617–619Datumsangaben 590, 611Einführung 568, 598E-Mail-Adressen 590, 611Erforderliche Elemente 607Farbe 590Höchstwert 591HTML5-Formularvalidierung 590
Abschalten 591Länge von Texteingaben 588–589, 615Markierte Kontrollkästchen 580Markierte Optionsschalter 582–583Mindestwert 591Passwortlänge 615Passwortübereinstimmung 615Reguläre Ausdrücke 612–613test() 611URLs 590Werte prüfen 607Zahlen 590, 611Zeichenzähler 588–589
for-Schleifen 172–173, 175, 207forward() (history-Objekt) 426Funktionen
Anonyme Funktionen 88Argumente 93Aufrufen 91Callbackfunktion (JSONP) 385Codeblock 90Deklarieren 90, 96Einführung 88–89Endklammern 97Funktionsausdrücke 96Hilfsfunktionen 570–571initialize 542Parameter 88, 92–93return 587Rückgabewerte 94–95this 270
Funktionsebene (Gültigkeitsbereich) 98
GGebietsschema 137geolocation-Objekt (Ortungs-API) 417$.get() (jQuery-Methode) 388, 392–393getAttribute() (DOM-Methode) 232–233getCurrentPosition() (Ortungs-API) 417–419getDate() (Date-Objekt) 137getDay() (Date-Objekt) 137getElementById() (DOM-Methode) 126, 193–195getElementsByClassName() (DOM-Methode) 193, 197, 200getElementsByTagName() (DOM-Methode) 193, 197, 201, 240getFullYear() (Date-Objekt) 137getHours() (Date-Objekt) 137
getItem() (Speicher-API) 421–423$.getJSON() (jQuery-Methode) 388, 392, 396–397, 405getMillseconds() (Date-Objekt) 137getMinutes() (Date-Objekt) 137getMonth() (Date-Objekt) 137$.getScript() (jQuery-Methode) 388, 392getSeconds() (Date-Objekt) 137getTime() (Date-Objekt) 137getTimezoneOffset() (Date-Objekt) 137Gleichheit 168Gleichheitszeichen 61Globale JavaScript-Objekte
Boolean 123Date 123, 136–139Einführung 121, 123Math 123Number 123Regex 123String 123, 128–130
Globaler Gültigkeitsbereich 98go() (history-Objekt) 426Google Maps-API 441–446Großbuchstaben 128–130Groß- und Kleinschreibung 56Gruppierungsoperator 97:gt() (jQuery-Selektor) 340Gültigkeitsbereich 98, 457
Global 453IIFEs 97Lexikalisch 457Lokal 453Lokal (Funktionsebene) und global 98Namenskonflikte 99Variablen, Namenskonflikte 523
H:has() (jQuery-Selektor) 338hasAttribute() (DOM-Methode) 232–233.hasClass() (jQuery-Methode) 365hashchange 286.height() (jQuery-Methode) 348, 350height (screen-Objekt) 124.hide() (jQuery-Methode) 364, 493, 512–513, 542Hilfsfunktionen 570–571history (Browser Object Model) 124–125history-Objekt 424–427
Eigenschaften, length 426Methoden
back() 426forward() 426go() 426pushState() 426replaceState() 426
Hoisting 456.html() (jQuery-Methode) 314HTML 9
Attribute 9Elemente 9
HTML5APIs 413
Ortungs-API 416–419Verlaufs-API 424–427Webspeicher-API 420–423
Attributedata-* 608required 607
data-Attribute 289Ereignisse 286Formulare
placeholder 594–595Polyfills 593–595Steuerelemente 590–591Unterstützung und Gestaltung 592
Polyfills, Modernizr + YepNope 596–597HTML-Inhalte hinzufügen/entfernen
innerHTML (DOM-Eigenschaft) 218innerHTML und DOM-Bearbeitung 218–225jQuery 346removeChild() (DOM-Methode) 224Vergleich der Techniiken 226–227
Iid (DOM-Eigenschaft) 232if-Anweisungen 160–163, 181if... else 149, 162–163IIFEs 504, 523:image (jQuery-Selektor) 342Implizite Iteration 310Implizite Typumwandlung 166, 168.index() (jQuery-Methode) 565Indexnummern 129indexOf() (String-Objekt) 128–130, 550–553Inhalte hinzufügen, Vergleich der Techniken 226–227Inhaltsfelder
Beispiele 489Bildanzeige 506–513Diashow 515–520Modale Fenster 500–505Registerkarten 496–499Ziehharmonika 492–495, 522–525
Inhaltsschicht 44initialize 542Inkrementierung in Schleifen 171Inline-Skripts 49.innerHeight() (jQuery-Methode) 348innerHeight (window-Objekt) 124–125innerHTML (DOM-Eigenschaft) 218, 220–221, 227
Security risks 228innerText (DOM-Eigenschaft) 216–217.innerWidth() (jQuery-Methode) 348innerWidth (window-Objekt) 124–125:input (jQuery-Selektor) 342input (Ereignis) 247, 271, 280, 282, 552–553, 573, 588–589insertBefore() (DOM-Methode) 222, 240Instanzen (von Objekten) 109Integrierte Objekte 120–123
InterpreterDefinition 40Funktionsweise 452–457
.is() (jQuery-Methode) 343, 521, 565isNaN() (Number-Objekt) 132$.isNumeric() 343item() (Knotenliste) 196
JJavaScript
Deaktiviert 491Geschichte/Standards 532
JavaScript-Bibliotheken 360JavaScript-Konsole 464–465jQuery
$(function() { ... }); 313Ajax
$.ajax() 398–399.always() 396–397.done() 396–397.fail() 396–397Anforderungen 389Antworten 388Formulare abschicken 394–395$.getJSON() 396–397jqXHR-Objekt 405Kurzmethoden 392–393
$.get() 393$.get() 392$.getJSON() 392$.getScript() 392$.post() 392
.load() 390–391, 407, 427
.post() 394–395API 358Auswahl zwischenspeichern 308–309Daten mit Angular laden 438Dokumentation 358Download 298Downloadadresse 313, 354–357Durchlaufen von Elementen (implizite Iteration) 310Durchlaufen von Elementen mit .each() 324Einführung 294, 296
Beispiel 298–299Einschließen 354–355Elemente auswählen und ändern 314–316event-Objekt 326–331.fn-Objekt 523Formulare, .serialize() 394Globale Methoden
$.ajax() 388, 405$.get() 388$.getJSON() 388, 405$.getScript() 388$.isNumeric() 343$.post() 388, 394–395$.ajax() 398–399$.getJSON() 396–397
Implizite Iteration 310
jQuery-Auswahl 296–297, 306Anzahl der Elemente (length) 364Caching 307–308Hinzufügen 340
jQuery() (siehe auch $()) 296, 299jQuery UI 429–434
Formulare 432–433Registerkarten 431Ziehharmonika 430
Konflikte mit anderen Skripts 361Methoden
Grundlagen 297, 307Übersichtstabelle 304.add() 531.addClass() 320, 512–513, 519.after() 318, 535.always() 396–397.done() 396–397.fail() 396–397.animate( 365.animate() 493, 521.append() 318, 565.appendTo() 505, 519.attr() 320, 512–513.addClass() 498.attr() 498.find() 498.parent() 498.removeClass() 498.before() 318.children() 336.click() 512–513.clone() 346.closest() 336.css() 322, 510–511, 521.data() 546–547, 565, 602, 608–609.delay() 364.detach() 346, 502–503, 505.each() 324, 531, 546–547.empty() 346, 505.eq() 512–513.eq() 521.is() 521.fadeIn() 365.fadeOut() 510–511.fadeTo() 510–511.filter() 343, 531, 548.find() 336, 519, 565.focus() 619.hasClass() 365.hasOwnProperty() 565.height() 348, 350.hide() 364, 493, 512–513, 542–543.html() 314.index() 565.innerHeight() 348.innerWidth() 348.is() 343.load() 388.next() 336
.nextAll() 336
.not() 495, 531
.off() 505
.offset() 351
.on 364
.on() 326, 330, 343
.outerHeight() 348
.outerWidth() 348
.parent() 336
.parents() 336
.position() 351
.prepend() 318
.preventDefault() 328, 365, 495, 505
.prop() 619
.ready() 312, 364
.remove() 316, 346
.removeAttr() 320
.removeClass() 320
.replaceWith() 316
.scrollLeft() 350
.scrollTop() 350
.serialize() 394
.show() 364, 493, 542–543
.siblings() 336
.slideToggle() 495
.stop() 510–511
.stopPropagation() 328
.text() 314, 364, 535
.toArray() 531
.toggle() 493
.toggleClass() 565
.unwrap() 346
.val() 343, 345, 365, 543Verketten 311.width() 348, 350
Plug-Ins 359, 428Datumsauswahl 619noUISlider 538Selbst erstellen 522–525
Satz übereinstimmender Elemente 297, 306Seite zur Bearbeitung bereit 312–313Selektoren
:button 342:checkbox 342:checked 342:contains() 338:disabled 342:enabled 342:file 342:focus 342Grundlagen 296, 300:has() 338:image 342:input 342:not() 338:password 342:radio 342:reset 342:selected 342:submit 342
:text 342Übersichtstabelle 302–303
Versionen 298, 301Vorteile 300
jqXHR-Objekt 389, 405Eigenschaften
responseText 389responseXML 389status 389statusText 389
Methoden.abort() 389.always() 389.done() 389.fail() 389.load() 390–391overrideMimeType() 405
JSONAjax-Datenformat 374Debugging 474Einführung 376JSON-Daten 377JSON-Daten anzeigen 382–383JSON-Objekt 377
Deserialisierung 382parse() 377, 382Serialisierung 382stringify() 377, 382
KKarten (Google Maps) 441–446keydown 246, 280, 573keypress 246, 280, 573keys 533keyup 246, 280, 573Kleinbuchstaben 128–130Knoten 40Knotenlisten 196–197Kommentare 57Konsole
assert() 475debugger 479error() 472group() 473groupEnd() 473Haltepunkte 476–478info() 472log() 470–471table() 474warn() 472
Konstruktorschreibweise 106–111, 113Kontrollkästchen 580–581Koordinaten (Ortungs-API) 418Kurzgeschlossene Auswertung 157, 169
LLänge von Texteingaben 588–589lastChild (DOM-Eigenschaft) 208, 211lastIndexOf() (String-Objekt) 128–130
LeistungAuswahl von class- und id-Attributen (jQuery und DOM
im Vergleich) 324Ereignisdelegierung 266, 268Globale und lokale Variablen 99Platzierung von Skripts 356–357Zwischenspeicherung
Benutzerdefiniertes Text-Objekt 551Bilder 510–511DOM-Abfragen 190DOM-Knoten 575jQuery-Auswahl 308Objektverweise 540
length (Auswahlfelder) 584length (history-Objekt) 124, 426length (String-Objekt) 128–130, 588–589Lexikalischer Gültigkeitsbereich 457Lexikografische Sortierung 554Links
Angeklickten Link ermitteln 498Wert ders href-Attributs abrufen 407
Literalschreibweise 102, 104–105, 113Live-Suche 370.load() (jQuery-Methode) 388, 390, 407, 427load (Ereignis) 246, 272–273localStorage 420–423location (window-Objekt) 124–125Logische Operatoren 156
Kurzgeschlossene Auswertung 157, 169Logisches AND 157–158, 537Logisches NOT 157, 159Logisches OR 157, 159
Lokaler Gültigkeitsbereich 98:lt() (jQuery-Selektor) 340
Mmap() (array-Objekt) 530Math 134–135
EigenschaftenPI 134
Methodenceil() 134floor() 134random() 134round() 134sqrt() 134
Meldungsfeld 125Memberoperator 50, 103method (DOM-Eigenschaft) 572Methoden
Aufrufen 50Einführung 32–33, 100–101
Minifizierung 298.min.js 298
Modale Fenster 500–505Modernizr 415, 593, 596–597Modul-Muster 501mousedown 246, 276mousemove 246, 276
mouseout 246, 276mouseover 246, 276mouseup 246, 276multiple (DOM-Eigenschaft) 584MVC 434–439MVC / MV* 360
Nname (DOM-Eigenschaft) 572–573Namenskonflikte 97, 99Name/Wert-Paare 28, 88–89, 101NaN 461, 483navigator-Objekt 418new (Objekte) 106, 109.next() (jQuery-Methode) 336, 495.nextAll() (jQuery-Methode) 336nextSibling (DOM-Eigenschaft) 208, 210Nicht blockierende Verarbeitung 371Nicht vertrauenswürdige Daten 228nodeValue (DOM-Eigenschaft) 214, 241.not() (jQuery-Methode) 495, 531:not() (jQuery-Selektor) 338noUiSlider 538novalidate 591Number (integriertes Objekt)
MethodenisNan() 132toExponential() 132toFixed() 132toPrecision() 132
Runden 133Numerischer Datentyp 62
OObject() 106Objekte
Arrays aus Objekten 533Arrays in Objekten 119Beziehung zwischen Eigenschaften, Methoden und
Ereignissen 34–35Eigene Objekte erstellen
Bildcache 509–513Modale Fenster 501–504Schlagwörter 544–549Vergleichsfunktionen 562
Eigenschaften 100–101Ändern 107Auf leeren String setzen 107Entfernen 107, 112Hinzufügen und entfernen 112
Einführung 28–29, 100–101Erstellen
Date-Objekte 137Instanzen 109Konstruktorschreibweise 106, 108–111Literalschreibweise 102, 104–105Mehrere Objekte 105
Konstruktorschreibweise 108–109, 111Vergleich der Techniken 113
In Arrays 533Integrierte Objekte 120–121keys 533Literalschreibweise 586Methoden 100–101
Argumente 109Methoden (Einführung) 32–33Objekte als Eigenschaften von Objekten 533Objekt für gültige Formularelemente 601Schlüssel 101this 114–115Unterschiede zu Variablen und Arrays 116–117Zugriff
Eigenschaften (eckige Klammern) 103, 107Punktschreibweise 103–105, 110
Objektmodelle 121.off() (jQuery-Methode) 505.offset() (jQuery-Methode) 351.on() (jQuery-Methode) 326, 330, 343, 364, 498onpopstate (window-Objekt) 426open() (XMLHttpRequest-Objekt) 373Operatoren
+= 125+= Anhängen an einen String 111== Gleich 150>= Größer oder gleich 151() Gruppierungsoperator 97< Kleiner als 151<= Kleiner oder gleich 151. Memberoperator 103Memberoperator 50=== Strikt gleich 150!== Strikt ungleich 150? : Ternärer Operator 562, 579, 583Unäre Operatoren 168!= Ungleich 150Vergleichsoperatoren 150–151
<option> 584options (DOM-Eigenschaft) 584Ortungs-API 416–419.outerHeight() (jQuery-Methode) 348.outerWidth() (jQuery-Methode) 348.overrideMimeType() (jqXHR-Objekt)# 405
PpageXOffset (window-Objekt) 124–125pageX (window-Objekt) 278pageYOffset (window-Objekt) 124–125pageY (window-Objekt) 278Parameter 50, 88, 92–93
Ereignislistener 257.parent() (jQuery-Methode) 336, 498parentNode (DOM-Eigenschaft) 208.parents() (jQuery-Methode) 336:password (jQuery-Selektor) 342paste (Ereignis) 247Photo viewer 506–513PI (Math-Objekt) 134
placeholder 594Polyfills 593, 596–597pop() (array-Objekt) 530.position() (jQuery-Methode) 351Position-Objekt (Ortungs-API) 418–419PositionError-Objekt (Ortungs-API) 418–419Position von Elementen auf der Seite 352$.post() (jQuery-Methode) 388, 392, 394–395.prepend() (jQuery-Methode) 318.preventDefault() (jQuery-Methode) 328, 365, 495, 505preventDefault() (event-Objekt) 262, 267, 283,603, 605previousSibling (DOM-Eigenschaft) 208, 210Primitive Datentypen siehe Einfache (primitive) DatentypenProgrammgesteuerte Vorgehensweise 21.prop() (jQuery-Methode) 619Protokollunabhängige URLs 355Proxy (Ajax) 384Punktschreibweise 103push() 519push() (array-Objekt) 530, 540, 542–543pushState() (history-Objekt) 424–427
QquerySelectorAll() (DOM-Methode) 126, 193, 197querySelector() (DOM-Methode) 193–194, 202, 241
R:radio (jQuery-Selektor) 342random() (Math-Objekt) 134RangeError 459, 461.ready() (jQuery-Methode) 364ReferenceError 459–460Registerkarten 431, 496–499Reguläre Ausdrücke 563, 611Relative URLs (Ajax) 389.remove() (jQuery-Methode) 316, 346remove() 584removeAttribute() (DOM-Methode) 232, 235.removeAttr() (jQuery-Methode) 320removeChild() (DOM-Methode) 224–225.removeClass() (jQuery-Methode) 320, 512–513removeEventListener() (DOM-Methode) 255replace() (String-Objekt) 406replaceState() (history-Objekt) 424–427replace() (String-Objekt) 128–130, 563.replaceWith() (jQuery-Methode) 316Require.js 593:reset (jQuery-Selektor) 342reset() (DOM-Methode) 572reset (Ereignis) 247, 572resize (Ereignis) 246, 272responseText (XMLHttpRequest-Objekt) 379, 383responseXML (XMLHttpRequest-Objekt) 380return 94–95, 523, 579, 587reverse() (array-Objekt) 530round() (Math-Objekt) 134Runden von Zahlen 133, 135
SSame Origin Policy 420Sammlungen
elements 572, 600Knotenlisten 196
Satz übereinstimmender Elemente (jQuery) 297, 306Schieberegler 538Schleifen
Arrays durchlaufen 175, 530, 535break 174continue 174DOM-Elemente durchlaufen 204, 594–595
Beispiel 241Diagramm 206–207
do-while-SchleifenEinführung 170Verwenden 177
each() (jQuery-Methode) 324Eigenschaften eines Objekts durchlaufen 605Einführung 170–177Einführung (Diagramm) 172–173Endlosschleifen 174for-Schleifen 175
Diagramm 172Einführung 170Elemente durchlaufen 207
Inkrement (++) 171jQuery
.each() 324Implizite Iteration 310
Kontrollkästchen durchlaufen 580–581Leistung 174Optionsschalter durchlaufen 582–583while-Schleifen 176, 181
Einführung 170Zähler
Schlüssel (Objekte) 101Schlüssel/Wert-Paare 118Schlüsselwörter
break 165, 174case 165catch 480–481, 576–577continue 174, 595debugger 479delete 107, 112, 533finally 480–481new (Objekt) 106, 109return 94–95, 523, 579, 587switch 165this 108, 114–115, 270, 324throw 482try 480–481, 576–577var 60
Schwache Typisierung 166screen (Browser Object Model) 124–125
Eigenschaftenheight 124width 124
screenX (window-Objekt) 124, 278screenY (window-Objekt) 124, 278<script> 47
Bedingtes Laden 596–597Platzierung 48, 51Platzierung des <script>-Tags 313, 354–357
scroll (Ereignis) 246, 272.scrollLeft() (jQuery-Methode) 350.scrollTop() (jQuery-Methode) 350<select> 584select() (DOM-Methode) 573:selected (jQuery-Selektor) 342selected (DOM-Eigenschaft) 573, 582–583selectedIndex (DOM-Eigenschaft) 584selectedOptions (DOM-Eigenschaft) 584select (Ereignis) 247send() (XMLHttpRequest-Objekt) 373Serialisierung 382.serialize() (jQuery-Methode) 394sessionStorage 420–423setAttribute() (DOM-Methode) 232, 234setDate() (Date-Objekt) 137setFullYear() (Date-Objekt) 137setHours() (Date-Objekt) 137setItem() (Speicher-API) 421–423setMillseconds() (Date-Objekt) 137setMinutes() (Date-Objekt) 137setMonth() (Date-Objekt) 137setSeconds() (Date-Objekt) 137setTime() (Date-Objekt) 137setTimeout() (window-Objekt) 517, 519shift() (array-Objekt) 530.show() (jQuery-Methode) 364, 493.siblings() (jQuery-Methode) 336, 549Sicherheit
Cross Site Scripting (CSS) 228–231Skripts
Beim Laden der Seite ausführen 273Platzieren 356Schreiben 16–17
.slideToggle() (jQuery-Methode) 495some() (array-Objekt) 530sort() (array-Objekt) 530, 554Sortierung 555–566
Datumsangaben 559Lexikografisch 554Tabellen 561–566Zahlen 558Zufällige Reihenfolge 558
Speichern eines Skripts 46Speichern von Daten (Vergleich der Techniken) 116–117Speicherobjekte (Speicher-API) 420split() (String-Objekt) 128–130, 563, 546–547sqrt() (Math-Objekt) 134src 47Stack 454.stop() (jQuery-Methode) 510–511.stopPropagation() (jQuery-Methode) 328stopPropagation() (event-Objekt) 262, 267
String-ObjektEigenschaften
length 128–130Indexnummern 129Methoden
charAt() 128–130indexOf() 128–130, 552–553lastIndexOf() 128–130replace() 128–130, 563split() 128–130, 563, 619substring() 128–130toLowerCase() 128–130, 552–553toUpperCase() 128–130trim() 128–130, 552–553
Strings 62Text suchen 552
Stufenweise Erweiterung 45:submit (jQuery-Selektor) 342submit() (DOM-Methode) 572submit (Ereignis) 247, 271, 282, 572substring() (String-Objekt) 128–130.success() (jQuery-Methode) 396Suche 550–553switch-Anweisungen 164–165, 291Switch-Wert 165Synchrone Verarbeitung 371SyntaxError 459–460
TTabellen
Sortieren 561–566Zeilen hinzufügen 542–543
.tabs() (jQuery UI) 431target (event-Objekt) 262Tastaturereignisse 280Teilweise Aktualisierung einer Seite 371Templates 360, 434–439Ternärer Operator 562, 579, 583test() 611.text() (jQuery-Methode) 314, 364, 535:text (jQuery-Selektor) 342Text
Suchen 550–553<textarea> 588textContent (DOM-Eigenschaft) 216–217Textknoten
createTextNode() 126Erstellen 222, 240
this 108, 114–115, 324throw 482Timer 517.toArray() (jQuery-Methode) 531toDateString() (Date-Objekt) 137toExponential() (Number-Objekt) 132toFixed() (Number-Objekt) 132.toggle() (jQuery-Methode) 493.toggleClass() (jQuery-Methode) 565toLowerCase() (String-Objekt) 128–130, 550–553toPrecision() (Number-Objekt) 132
toString() (Date-Objekt) 137toTimeString() (Date-Objekt) 137toUpperCase() (String-Objekt) 128–130, 406Trennung der Aspekte 490trim() (String-Objekt) 128–130, 552Truthy und falsy 167try 480–481, 576–577type (DOM-Eigenschaft) 573TypeError 459, 461type (event-Objekt) 262
UUML (Unified Modeling Language) 494undefined 61Unix-Zeit 136–137unload (Ereignis) 246, 272Unmittelbar aufgerufene Funktionsausdrücke (IIFE) 97unshift() (array-Objekt) 530.unwrap() (jQuery-Methode) 346URIError 459–460URL (aktuellen URL abrufen) 124
V.val() (jQuery-Methode) 343, 345, 365, 543Validierung 282value (DOM-Eigenschaft) 573var 60Variablen
Definition 58Deklaration 60Flags 578–579Gültigkeitsbereich 98, 453
Global 98Lokal (Funktionsebene) 98
Namen 60Namenskonflikte 97, 99undefined 61Unterschiede zu Arrays und Objekten 116–117Werte zuweisen 61Zuweisungsoperator 61
Vergleichsfunktionen 555–559Vergleichsoperatoren 150–153
Ausdrücke vergleichen 154Gleichheit prüfen 168Operanden 152Truthy und falsy 167
Verhaltensschicht 44Verkettung (jQuery-Methoden) 311Verknüpfung mit einer JavaScript-Datei 47Verlaufs-API 424–427Verlaufsstapel 424Verweise
Auf Elemente 540Auf Objekte 540DOM 191Elemente in jQuery 308
WWebspeicher-API 420–423Weißraum (DOM) 209–211while-Schleifen 176, 181.width() (jQuery-Methode) 348, 350width (screen-Objekt) 124window (Browser Object Model) 124–125
EigenschafteninnerHeight 124innerWidth 124pageXOffset 124pageYOffset 124screenX 124screenY 124
Methodenalert() 124open() 124print() 124
window-ObjektEinführung 36–37location 36onpopstate 426
write() 226write() (document-Objekt) 126
XYXDomainRequest-Objekt (IE8-9) 384XML 374–375
XML-Daten mit Ajax laden 380–381XMLHttpRequest-Objekt 372
EigenschaftenresponseText 379, 383responseXML 380status 373, 378–379
open() 373send() 373
XSS (Cross Site Scripting) 228–231YepNope.js 596–597
ZZahlen 62
Runden 135Sortieren 558Zufallszahlen 135
Zeichenzähler 588–589Zentrieren 511Ziehharmonika 430, 492–495, 522–525Zufallszahlen 135Zuweisungsoperator 61, 107Zwischenspeichern
Bilder 509–511DOM-Abfragen 190–191DOM-Knoten 575jQuery-Auswahl 308–309, 540–541Objektverweise 540–541