1 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.

Präsentation zum Thema: "1 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."—  Präsentation transkript:

1 1 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

2 2 Ü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

3 3 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!

4 4 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

5 5 Selektoren II Selektoren sind Kombinationen aus CSS, XPath und eine Prise Eigenkreation div – CSS [@id='…'] – XPath *= - Eigenkreation DEMO BEREITHALTEN

6 6 AJAX & FX I Rate me: http://fuzz.bassistance.de/jqueryDev/example- rateme.html 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!)