Einleitung

• Auf dem Weg zum Web 2.0 (was immer das sein mag) ist jQuery klein und fix

• Hängt damit die "Großen" wie Prototype, Dojo oder Mochikit ab

• Kreuzt zwar die Wege der anderen, geht aber seinen eigenen

Übersicht

• Klein – komprimiert etwa 15kb + plus plugins die i.d.r. ebenfalls extrem klein sind

• Elegant – kompakte Syntax• Schnell – wird ausgeführt, sobald das DOM geladen

ist (wartet nicht auf das komplette Dokument wie onload)

• Modular – leicht durch Plugins erweiterbar, oder auch Expressions etc.

• Kompatibel – unterstütz IE, FF, Opera, Safari• Objektorientiert – ohne krampfhaft alles auf Pseudo-

Klassen abzubilden

Praxis Übersicht

• Selektion: Gib mir alle Elemente mit der Klasse "list" innerhalb des Elements mit der ID "content"

• Manipulation: Inhalt generieren, bearbeiten oder entfernen, Styles bearbeiten, Klassen hinzufügen oder entfernen

• AJAX: Einfaches get zum laden von Bildern (kein XMLHTTPRequest), vollständiger XMLHTTPRequest mit allem drum und dran elegant gekapselt

• Effekte: fadeIn/Out, slideUp/Down• Tolle Plugins, Tabs mit Beispielen bereit halten!

Selektoren I

• $(document).ready(function() {…} führt die übergebene Funktion aus, sobald das DOM geladen ist, je nach Inhalt der Seite sogar deutlich früher als onload

• Klasse "required" markiert benötigtes Feld• Funktioniert mit input (type="text"), textarea und

select• Mit addClass und removeClass CSS-Klassen

ändern• DEMO BEREIT HALTEN

Selektoren II

• Selektoren sind Kombinationen aus CSS, XPath und eine Prise Eigenkreation

• div – CSS• [@id='…'] – XPath• *= - Eigenkreation• DEMO BEREITHALTEN

AJAX & FX I

• Rate me: http://fuzz.bassistance.de/jqueryDev/example-rateme.html

• Code erzeugt Markup für die Links, setzt click-Handler ein, sendet request mit parameter und zeigt Ergebnis (Durchschnitt und Anzahl Ratings) an

• DEMO BEREITHALTEN (Internet wird benötigt!)