jQuery - Einstieg und Grundlagen

Seminarziel

Nach diesem Seminar kennen Sie die Funktionsweise und Denkweise von jQuery. Sie verstehen, wie Sie mit jQuery HTML-Elemente selektieren, verändern und mit Ereignissen verknüpfen. Sie nutzen Ajax für die asynchrone Datenübertragung mit dem Server und setzen jQuery ein, um interaktive Benutzeroberflächen zu gestalten. Sie sind in der Lage, einfache Webanwendungen effizient mit jQuery zu realisieren und legen damit das Fundament für weiterführende JavaScript- oder jQuery-Projekte.

Inhalt

Diese Agenda ist auch Bestandteil (1.-3. Tag) des Kurses jQuery Komplett

• jQuery kennenlernen
  • Was ist jQuery und wofür wird es eingesetzt
  • Unterschiede zu Vanilla JavaScript und modernen Frameworks
  • Installation lokal und über CDN
  • Verwendung von jQuery Migrate zur Unterstützung älterer Versionen
• Entwicklungsumgebung und Tools
  • Einführung in Chrome Developer Tools und weitere Debugging-Werkzeuge
  • Einsatz von console.log, alert und debugger in der Entwicklung
• Grundlagen der jQuery-Syntax
  • Verwendung von $() zur DOM-Selektion
  • Selektoren: IDs, Klassen, Attribute und Filter
  • Verkettung von Methoden und DOM-Traversierung
• DOM-Manipulation in der Praxis
  • Ändern von Attributen, Inhalten, Klassen und Styles
  • Einfügen und Entfernen von HTML-Elementen
• Eventsteuerung mit jQuery
  • Binden und Auslösen von Ereignissen mit on()
  • Unterschied zwischen bind(), live() und modernen Methoden
  • Trennung von HTML und JavaScript mit unobtrusive Techniken
  • Event-Bubbling und Delegation im Überblick
• Formularverarbeitung
  • Selektoren für Formularelemente
  • Erfassen und Validieren von Benutzereingaben
  • Serialisierung von Formulardaten
• Animationen mit jQuery
  • Vordefinierte Effekte wie fadeIn(), slideUp(), toggle()
  • Erstellung individueller Animationen mit .animate()
  • Unterschiede zwischen JavaScript- und CSS3-Animationen
• AJAX mit jQuery
  • Einsatz von get(), post(), getJSON(), ajax()
  • Verwendung von JSON als Datenformat
  • Cross-Origin-Policy und AJAX-Fehlerbehandlung
  • Eventbindung an dynamisch nachgeladene Elemente
• Strukturierung und Best Practices
  • Trennung von Struktur (HTML), Darstellung (CSS) und Verhalten (JavaScript)
  • Modularer Aufbau von jQuery-Code
  • Einführung in das JavaScript Module Pattern