jQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software & Consulting GmbHT: Im Mediapark 2F: KölnM: Präsentation jQuery,

jQuery: New Wave Javascript Seite 2 Agenda Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 3 Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht Einleitung

jQuery: New Wave Javascript Seite 4 Übersicht jQuery ist Klein Elegant Schnell Kompatibel Objektorientiert jQuery ist keine Büchse der Pandora Funktionalität durch Plugins Dank Modularität in jeder Hinsicht leicht erweiterbar Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 5 Praxis Übersicht Was hat jQuery zu bieten? Selektion und Manipulation des DOM AJAX und Effekte Schon jetzt große Auswahl an Plugins Interface (Drag&Drop, Sortables) Tablesorter Colorchooser uvm. Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 6 Selektoren I Kein onclick, onchange etc. mehr Elemente selektieren, Handler zu Events zuweisen Beispiel: Felder bei onchange validieren $("input.required, select.required, textarea.required").change(function() { var feld = $(this); if( !feld.val() ) { alert(feld.name() + " required."); feld.addClass('error'); } else { feld.removeClass('error'); } }); Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 7 Selektoren II Beispiel: Im Portal sollte jede ID mit dem Portlet Namespace versehen werden In JSP: " > Compiled: Mit jQuery selektieren: { alert((i+1) + ". Portlet: " + this); }); Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 8 AJAX Rate Me Demo Auschnitt: $.post("rate.php", {rating: $(this).html()}, function(xml) { // format result var result = [ "Thanks for rating, current average: ", $("average", xml).text(), ", number of votes: ", $("count", xml).text() ]; // output result $("#rating").html(result.join('')); } ); Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 9 FX Collapsed FAQ mit slideDown/Up $(document).ready(function() { $('#faq').find('dd').hide(); $('#faq').find('dt').click(function() { var answer = $(this).find('+dd'); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); } }); Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 10 Plugins Tablesorter Demo $(document).ready(function() { $("#large").tableSorter({ stripingRowClass: ['odd','even'], stripRowsOnStartUp: true }); Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 11 Praxis Fazit jQuery macht die Arbeit mit Javascript wesentlich angenehmer, Entwickler kann sich mehr auf das eigentlich Ziel konzentrieren jQuery bringt sehr ausgereiftes Fundament an Funktionen (AJAX, FX, etc.) mit jQuery lässt sich durch Plugins beliebig erweitern, wenig oder keine Abhängigkeiten zwischen Plugins Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 12 Fazit Kein komplexes Anwendungsframework, sondern Wrapper für DOM Selektion und Manipulation Kapselt viele bekannte und weniger bekannte Browserbugs Entwickler konzentriert sich auf seinen Code, weniger Probleme mit Browsern Klare Struktur des eigenen Codes durch Pluginarchitektur Große aktive Community werkelt an genialen Plugins Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

jQuery: New Wave Javascript Seite 13 Aussicht 1.0 Release in wenigen Tagen Alle kritischen Bugs gefixt Release der neuen Webseite Vollständige API Docs WIKI basiert Aktuelle Pluginliste Post-1.0 Planungen Plugin-Repository Build-System per make/ant zum Einbinden in vorhandene Builds Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht