jQuery JavaScript-Bibliothek

jQuery gehört zu den bekanntesten freien JavaScript-Bibliotheken und vereint den Ablauf von HTML-Bäumen, Ereignisbehandlung, Animationen sowie Ajax-Interaktionen in einem konsistenten Web Application-Framework. Im Zentrum von jQuery stehen elegante CSS-Selektoren, um auf Elemente im DOM-Baum zuzugreifen und diese zu bearbeiten. Das Seminar gibt an vielen Beispielen einen tiefen Einblick in jQuery und stellt auch fortgeschrittene Themen wie Ereignisse, Effekte und Animationen vor. Teilnehmer erhalten einen Überblick über frei verfügbare jQuery-Plugins und lernen, wie eigene jQuery-Plugins entwickelt und getestet werden.

Inhalte des Seminars

Einführung in jQuery

• Überblick über JavaScript-Bibliotheken; Abgrenzung zu Prototype, Mootools
• Download jQuery
• Konzepte und Überblick über jQuery, das Prinzip ›Unobtrusive JavaScript‹
• Interoperabilität von jQuery und anderen JavaScript-Frameworks
• Komprimierte jQuery-Versionen, Yahoo! UI Library: YUI Compressor
• Usability, Fallback bei deaktiviertem JavaScript
• jQuery 1.x und 2.x Unterschiede

jQuery Core, Selektoren, Attribute

• DOM-Objektmodell
• $-Funktion
• Objektzugriffe
• Selektoren, Zugriffe über Klasse oder ID
• Ändern von Element-Properties und Element-Attribute
• Attribute
• Filter
• Transformationen

HTML-Transformation, CSS

• Verändern von HTML-Elementen
• Einfügen von HTML-Elementen
• Content ersetzen
• DOM-Bäume kopieren
• CSS-Eigenschaften setzen
• CSS-Funktionen für Positionierung und Layout

Ajax-Anwendungen mit jQuery

• Ajax Requests absenden
• POST und GET
• XMLHttpRequest
• Callbacks, Ajax Events,
• Serialisierung, JSON-Kodierung, jQuery und JSONP (JSON with padding)

jQuery.Event

• Ereignisbehandlung, Browser-Events
• on/off
• one-Handler
• Event-Attribute und Event-Funktionen
• Hilfsfunktionen für übliche Events

Interaktionen mit jQuery

• Drag und Drop
• start/drag/stop-Callbacks
• jQuery UI Draggable Plugin
• jQuery UI Droppable Plugin
• jQuery UI Sortable Plugin
• jQuery UI Selectable Plugin
• jQuery UI Resizable Plugin

jQuery-Effekte

• effects.core.js
• Farbannimationen
• Animieren über verschiedene Klassen
• Show/Hide/Toggle-Effekte
• jQuery Easing Plugin
• CSS3-Unterstützung

Widgets, jQuery UI und jQuery TOOLS

• Widget Factory
• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs
• Spinner
• Menü
• Tooltip
• Effekte

Theming

• jQuery UI CSS-Framework
• CSS-Klassen in ui.core.css und ui.theme.css
• jQuery UI ThemeRoller
• Eigenes CSS für Plugins

Plugins

• Plugin-Konzept von jQuery
• Eigenes Plugin schreiben