O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery von Kopf bis Fuß

Book Description

Mit "jQuery von Kopf bis Fuß" lernt der Leser im bewährten Von-Kopf-Fuß-Stil, wie man innerhalb kürzester Zeit komplexe HTML-Formulare implementiert und mithilfe der JavaScript-Bibliothek mit wenigen Code-Zeilen Webseiten interaktiv gestaltet.

Nach der Lektüre des Buches ist der Leser in der Lage, die JavaScript-Bibliothey jQuery nahtlos mit HTML und CSS zu kombinieren und Daten mit PHP, MySQL und JSON zu verarbeiten.

Table of Contents

  1. jQuery von Kopf bis Fuß
  2. Widmung
  3.  
  4. Über den Übersetzer dieses Buchs
  5. Wie man dieses Buch benutzt: Einführung
    1. Für wen ist dieses Buch gedacht?
      1. Wer sollte eher die Finger von diesem Buch lassen?
    2. Wir wissen, was Sie gerade denken
    3. Und wir wissen, was Ihr Gehirn gerade denkt
    4. Metakognition: Nachdenken übers Denken
    5. Das haben WIR getan
    6. Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
    7. Lies mich
    8. Software-Anforderungen
    9. jQuery herunterladen
    10. Ordnerstruktur
    11. Die technischen Gutachter
    12. Danksagungen
  6. 1. jQuery: Die ersten Schritte: Webpage-Action
    1. Webseiten mit mehr »Wumms«
    2. HTML und CSS sind ja schön und gut, aber ...
    3. ... möge das Skript mit Ihnen sein
    4. Willkommen bei jQuery (und JavaScript)!
    5. Ein Blick in den Browser
    6. Die versteckte Struktur einer Webseite
    7. jQuery macht das DOM einfacher
    8. Wie geht das denn?
      1. Willkommen zur jQuery-Funktion (und ihrer Abkürzung)
    9. jQuery wählt Elemente genauso aus wie CSS
    10. (Aus-)Wahlverwandtschaften: Stil und Skript
    11. jQuery-Selektoren, stets zu Diensten
    12. jQuery in der Übersetzung
    13. Ihre erste jQuery-Aufgabe
    14. Die HTML- und CSS-Dateien vorbereiten
    15. Immer herein ...
    16. Möge der Fade mit Ihnen sein
    17. Das ist schon alles?
    18. Sie haben die Kampagne gerettet. Bravo!
    19. Ihr jQuery-Werkzeugkasten
  7. 2. Selektoren und Methoden: Einpacken und mitnehmen
    1. Freudensprünge
    2. Was sind die Projektanforderungen?
    3. div-ertimento
    4. Ein Click-Event unter der Lupe
    5. Bauen Sie die click-Methode in Ihre Seite ein
    6. Werden Sie spezifischer
    7. Elemente mit Klasse
    8. Elemente ID-entifizieren
    9. Die Webseite verdrahten
    10. Gleichzeitig auf unserer Liste
    11. Speicherplatz anlegen
    12. Verschiedene Dinge verketten
    13. Zur selben Zeit im Code ...
    14. Die Nachricht mit der append-Funktion in die Seite einfügen
    15. Das funktioniert schon ganz gut, aber ...
    16. Gib mir $(this)
    17. $(this) bei der Arbeit
    18. Gutes Gelingen mit remove
    19. Nachkommen-Selektoren für mehr Tiefe
    20. Jetzt sind Sie dran, Freudensprünge zu machen
    21. Ihr jQuery-Werkzeugkasten
  8. 3. jQuery-Events und -Funktionen: Dinge auf Ihrer Seite geschehen lassen
    1. Wieder sind Ihre jQuery-Fähigkeiten gefragt
    2. Der Geldmensch hat irgendwie recht ...
    3. Ereignisreiche Seiten
    4. Hinter den Kulissen eines Event Listeners
    5. Ein Event binden
      1. Methode 1
      2. Methode 2
    6. Events auslösen
    7. Ein Event entfernen
      1. Ein Event entfernen
      2. Alle Events entfernen
    8. Die Elemente der Reihe nach durchgehen
    9. Ihre Projektstruktur
    10. Die Dinge function-sfähig machen
    11. Die Innereien einer Funktion
      1. Funktionen richtig benennen
        1. Funktionsdeklaration
        2. Funktionsausdruck
    12. Anonyme Funktionen
    13. Benannte Funktionen als Event-Handler
      1. Funktionsdeklaration
      2. Funktionsausdruck
    14. Variablen an eine Funktion übergeben
    15. Funktionen können auch Werte zurückgeben
    16. Entscheidungen mithilfe von Bedingungen treffen
    17. Noch mehr Hilfe für die Freudensprünge-Aktion
    18. Methoden zum Ändern von CSS
    19. Ein hover-Event hinzufügen
    20. Sie haben es fast geschafft ...
    21. Ihr jQuery-Werkzeugkasten
  9. 4. Webseiten mit jQuery verändern: Mod the DOM
    1. Das Webville-Restaurant braucht eine interaktive Speisekarte
    2. Die vegetarische Version
    3. Elemente mit Klasse
    4. Und jetzt an die Umsetzung
    5. Was kommt jetzt?
    6. Im DOM-Baum herumklettern
    7. Traversal-Methoden bewegen sich im DOM
    8. Methoden verketten, um weiter zu klettern
    9. Speichern von Elementen in Variablen
    10. Schon wieder dieses Dollarzeichen ...
    11. Die Speichermöglichkeiten mit Arrays erweitern
    12. Elemente in einem Array speichern
    13. Elemente mit replaceWith verändern
    14. Wie kann replaceWith uns helfen?
    15. Denken Sie voraus, bevor Sie replaceWith verwenden
    16. replaceWith funktioniert nicht in jeder Situation
      1. Eins-zu-viele-Ersetzung
      2. Viele-zu-viele-Ersetzung
    17. HTML-Inhalte in das DOM einfügen
    18. Die Auswahl mit Filtermethoden einschränken (Teil 1)
    19. Die Auswahl mit Filtermethoden einschränken (Teil 2)
    20. Der Hamburger kommt zurück!
    21. Wo ist das Rind (äh, Fleisch)?
    22. Ein fleischiges Array
    23. Die each-Methode kann eine Schleife über ein Array ausführen
    24. Das war’s ... oder?
    25. Ihr jQuery-Werkzeugkasten
  10. 5. jQuery-Effekte und -Animationen: Vom Gleiten und Schreiten
    1. DoodleStuff braucht eine Web-Applikation
    2. Werden Sie zum Monstermacher
    3. Der Monstermacher braucht Layout und Positionierung
    4. Etwas mehr Struktur und Stil
    5. Die Schnittstelle anklickbar machen
    6. Den Blitzeffekt umsetzen
    7. Wie animiert jQuery Elemente?
      1. hide, show und toggle verändern die CSS-Eigenschaft display
    8. Ein- und Ausblendeffekte animieren die CSS-Eigenschaft opacity
    9. Bei den slide-Funktionen geht es um die Höhe
    10. Die Fade-Effekte anwenden
    11. Effektmethoden miteinander verketten
    12. Funktionen zeitgesteuert wiederholen
    13. Die Blitzfunktionen ins Skript einbauen
    14. Selbstgemachte Effekte mit animate
    15. Was animiert werden kann und was nicht
      1. Texteffekte
    16. animate ändert Stile nach und nach
    17. Von wo nach wo genau?
    18. Elemente absolut und relativ bewegen
      1. Relative Animation = jedesmal um diesen Wert verschieben
    19. Etwas durch die Kombination von Operatoren relativ bewegen
    20. Die animate-Funktionen ins Skript einbauen
    21. Und ganz ohne Flash!
    22. Ihr jQuery-Werkzeugkasten
  11. 6. jQuery und JavaScript: Luke jQuery, ich bin dein Vater!
    1. Frischer Wind für die Head First Lounge
    2. In Objekten ist das Speichern noch schlauer gelöst
    3. Eigene Objekte bauen
      1. UML-Diagramm eines Objekts
    4. Mit Konstruktoren wiederverwendbare Objekte erstellen
    5. Objekte benutzen
    6. Die Seite erstellen
    7. Die Rückkehr der Arrays
    8. Auf Arrays zugreifen
    9. Array-Elemente aktualisieren und hinzufügen
    10. Eine Aktion nochmal durchführen (und nochmal, und nochmal ...)
    11. Die Nadel im Heuhaufen finden
    12. Zeit für Entscheidungen ... wieder einmal!
    13. Vergleichsoperatoren und logische Operatoren
    14. jQuery zum Aufräumen benutzen ...
      1. ... ist sogar leichter als mit JavaScript
    15. Etwas mehr Nervenkitzel, bitte!
    16. Ihr jQuery/JavaScript-Werkzeugkasten
  12. 7. Eigene Funktionen für Ihre Effekte: Tu doch mal was für mich!
    1. Ein Sturm braut sich zusammen
    2. Wir haben eine Monsterfunktion geschaffen ...
    3. Das window-Objekt zur Kontrolle zeitgesteuerter Effekte
    4. Mit onblur und onfocus auf Browser-Events reagieren
    5. Timer-Methoden sagen Ihren Funktionen, wann sie ausgeführt werden sollen
    6. Schreiben Sie die Funktionen blitze_anhalten und blitze_starten
    7. Neue Funktionen für die Monstermacher
    8. Noch mehr Zufall ...
    9. Sie kennen die aktuelle Position schon ...
    10. ... und auch die Funktion zufallszahl_erzeugen
    11. Dinge relativ zur aktuellen Position bewegen
      1. Szenario 1: Ziel > Aktuell
      2. Szenario 2: Ziel < Aktuell
    12. »Monstermacher, Version 2« ist ein Hit!
    13. Ihr jQuery-Werkzeugkasten
  13. 8. jQuery und Ajax: Gib doch mal die Daten rüber
    1. Bringen Sie das Bit-to-Byte-Rennen ins neue Jahrhundert!
    2. Ein Blick auf die Seite des letzten Jahres
      1. Plugins konfigurieren
    3. Jetzt wird’s dynamisch!
    4. Das ALTE Web trifft das NEUE Web
      1. Auftritt für Ajax!
    5. Ajax verstehen
    6. Was ist Ajax?
    7. Der X-Faktor
      1. XML allein tut gar nichts
    8. Daten mit der ajax-Methode abfragen
    9. XML-Daten parsen
    10. Funktionen zeitgesteuert aufrufen
    11. Selbstreferenzierende Funktionen
    12. Mehr vom Server abfragen
      1. Abhilfe schaffen mit serverseitigen Sprachen
    13. Wie spät ist es?
    14. Zeitgesteuerte Events auf der Seite abschalten
    15. Ihr jQuery-/Ajax-Werkzeugkasten
  14. 9. Mit JSON-Daten umgehen: Darf ich vorstellen: Client — Server
    1. Die MegaCorp-Marketingabteilung von Webville kennt kein XML
    2. Seitenabstürze durch XML-Fehler
    3. Die Daten über eine Website eingeben
    4. Was tun mit den Daten?
    5. Daten vor dem Versand formatieren
    6. Daten an den Server schicken
    7. Daten in einer MySQL-Datenbank speichern
    8. Eine Datenbank zum Speichern der Läufer-Informationen verwenden
    9. Die Anatomie von Insert-Anweisungen
    10. Mit PHP auf die Daten zugreifen
    11. Auf dem Server mit POST-Daten umgehen
    12. Datenbankverbindungen mit PHP
    13. Daten per SELECT aus der Datenbank abfragen
    14. Daten mit PHP abfragen
    15. JSON hilft!
    16. jQuery + JSON = groartig
    17. Ein paar PHP-Regeln
      1. PHP-Grundlagen
      2. Regeln für Variablen
      3. Regeln für Schleifen
    18. Und noch ein paar PHP-Regeln
      1. Regeln für Arrays
      2. Regeln für Bedingungsblöcke
      3. Regeln für die Bildschirmausgabe
    19. Ausgaben mit PHP formatieren
    20. Auf Daten im JSON-Objekt zugreifen
    21. Datensäuberung und -validierung in PHP
      1. Dieselbe PHP-Datei für mehrere Aufgaben nutzen
    22. Ihr jQuery-/Ajax-/PHP-/MySQL-Werkzeugkasten
  15. 10. jQuery UI: Formulare aufwerten
    1. Cryptozoologists.org muss neu gestaltet werden
    2. Pimpen Sie Ihr HTML-Formular
    3. Durch jQuery UI Kopfschmerzen (und Zeit) beim Programmieren sparen
      1. Effekt-Plugins
      2. Interaktions-Plugins
      3. Widget-Plugins
    4. Was ist im jQuery UI-Paket enthalten?
      1. Die Checkliste für unser Projekt
    5. Ein Kalender-Widget zur Eingabe des Sichtungsdatums erstellen
    6. jQuery UI hinter den Kulissen
    7. Widgets über Optionen anpassen
      1. Das datepicker-Widget mit Optionen anpassen
    8. Die Radio-Buttons ansprechender gestalten
      1. button-Widgets gruppieren
    9. Numerische Werte über einen Schieberegler eingeben
      1. Der HTML-Code für ein slider-Widget
      2. Der jQuery-Code für ein slider-Widget
    10. Computer mischen Farben aus Rot, Grün und Blau
      1. Ihre Schieberegler sollen das auch tun
    11. Die Funktion palette_aktualisieren erstellen
    12. Und noch etwas ...
    13. Ihr jQuery-Werkzeugkasten
  16. 11. jQuery und APIs: Objekte, nichts als Objekte!
    1. Wo ist Nessie?
    2. Die Google Maps-API
    3. APIs verwenden Objekte
    4. Eine Google Maps-Karte in eine Seite einbinden
    5. JSON-Daten mit PHP und SQL erzeugen
    6. Punkte auf der Karte markieren
    7. Checkliste für mehrere Kreaturen
    8. Karten-Events abfangen
    9. Sie haben es geschafft!
    10. Ihr jQuery-API-Werkzeugkasten
    11. Muss i denn...
    12. Schön, dass Sie uns in jQueryville besucht haben!
  17. A. Übrig gebliebenes: Die zehn wichtigsten Dinge (die wir nicht behandelt haben)
    1. #1. Alle Bestandteile der jQuery-Bibliothek
      1. jQuery-Methoden
      2. jQuery-Selektoren
    2. #2. jQuery-CDNs
    3. #3. Der jQuery-Namensraum: Die noConflict-Methode
    4. #4. jQuery-Code debuggen
    5. #5. Fortgeschrittene Animationen: Queues
    6. #6. Formulareingaben auf Gültigkeit überprüfen
    7. #7. jQuery UI-Effekte
    8. #8. Eigene jQuery-Plugins schreiben
    9. #9. Fortgeschrittenes JavaScript: Closures
    10. #9. Fortgeschrittenes JavaScript: Closures (Fortsetzung)
    11. #10. Templates
  18. B. Eine Entwicklungsumgebung einrichten: Bereit für große Zeiten
    1. Eine PHP-Entwicklungsumgebung einrichten
    2. Herausfinden, was schon vorhanden ist
    3. Haben Sie einen Webserver?
    4. Ist PHP installiert? Welche Version?
    5. Ist MySQL installiert? Welche Version?
    6. Den Webserver starten
    7. Apache-Installation ... Fortsetzung
    8. PHP installieren
    9. PHP-Installationsschritte
    10. PHP-Installationsschritte, Fortsetzung
    11. MySQL installieren
      1. Anleitung und Fehlersuche
    12. Arbeitsschritte zur Installation von MySQL unter Windows
      1. Laden Sie den Installer herunter
      2. Wählen Sie einen Zielordner aus
    13. PHP unter Mac OS X einrichten
    14. MySQL unter Mac OS X installieren
      1. Laden Sie das passende Installationsprogramm herunter
      2. Das Installationspaket ausführen
  19. Stichwortverzeichnis
  20. Impressum