1. Diego Guidi - DotNetMarche

3. DOM tree is clunky to use No multiple handlers per event No high-level functions Browser incompatibilities = jQuery to the resque!

5. John Resig http://twitter.com/jeresig http://twitter.com/jeresig jQuery 1.0 out (Aug 2006) jQuery 1.3.2 latest Production 19k – Debug 120k Cross-browser Visual Studio 2008 support http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

6. var fieldsets = document.getElementsByTagName('fieldset'); var legend, fieldset; for (var i = 0; i < fieldsets.length; i++) { fieldset = fieldsets[i]; if (!hasClass(fieldset, 'collapsible')) continue; legend = fieldset.getElementsByTagName('legend'); if (legend.length == 0) continue; legend = legend[0];... // Do your job }

7. $('fieldset.collapsible legend').each(function() {... // Do your job }); $("table tr:nth-child(odd)").addClass("striped");

8. Separate behavior from structure and style HTML => structure CSS => style JS => behavior

9. <button type="button" onclick="alert('behavior!');"> MyBehavior

10. window.onload = function() { document. getElementById('mybutton'). onclick = behavior; }; function behavior() { alert('behavior!'); }

11. $(document).ready(function() { $("#mybutton"). bind('click', function(ev) { alert('behavior!'); }); document.ready != pageLoad http://encosia.com/2009/03/25/document-ready- and-pageload-are-not-the-same

12. Supports most CSS 1-3 selectors Select all elements: $('*') Select all div elements: $('div') Select element by id: $('#id') Select all elements with class: $('.class') Combined: $('div#id.class')

13. Ancestor Descendant Selectors Select all paragraphs inside and element: $('#id p') Select all input elements on a form: $('form input') Parent Child Selectors Find all paragraphs elements of an element: $('#id > p') Filtering elements based on values of their attributes Find input with name attribute = value: $('input[name=??]') Find anchor tags that start with mailto: $('a[href^=mailto]') Find anchor tags that end with 'pdf': $('a[href$=pdf]')

14. Convenience pseudo-selectors :first:last :even:odd :hidden:visible :has:contains :enabled :disabled :animated:selected :not $('div p:not(:hidden)') Even more! http://docs.jquery.com/selectorshttp://docs.jquery.com/selectors

16. Fun with attributes get attribute values: $("#foo").attr("myattr") set attribute values: $("#foo").attr("myattr", "newval|myfunc") Fun with styling check if class name is defined: $("#foo").hasClass("myclass") add/remove class names: $("#foo").addClass("class1 class2") toggle class names: $("#foo").toggleClass("class1 class2") get/set css properties: $("#foo").css("width", "newval|myfunc") Fun with form elements get a value: $("[name=radioGroup]:checked").val()

17. $("#mydiv").html(" Hello, world! "); $("p").append(" Hello "); $("p").prepend(" Hello "); $(" Hi there! ").insertBefore("#mydiv"); $(" Hi there! ").insertAfter("#mydiv "); $("p").wrap(" "); $("p").empty() $("p").clone() - $("p").clone(true)

18. Unified method for establishing event handlers Multiple handlers for each event type on each element $("#mydiv").bind("eventName", data, listener) $("#mydiv").unbind("eventName") $("#mydiv").one("eventName", data, listener) $("#mydiv").trigger("eventName") Standard event-type names (click, mouseover…) $("#mydiv").click(function(ev) {... }) $("#mydiv").click() Namespaced events $("#mydiv").bind("click", f1).bind("click.edit", f2) $("#mydiv").unbind("click.edit")

19. A simpler way to animate your page $("div").hide/show() $("div").toggle() More difficult… $("div").show("slow", function() {... }) Could I try to… $("div").fadeIn/fadeOut/fadeTo $("div").slideDown/slideUp/slideToggle I need more! $("div").animate(properties, duration, easing, callback)

20. Utility functions $.browser $.trim(string) $.getScript(url, callback) Iterators and filters $.each(array|object, function(index|key, value) {... }) $.grep(array, function() { //... return true|false; }) var result = $.grep(array, 'a>100'); Extending objects $.extend(target,source1,source2,... sourceN) var result = $.extend({ }, { a: 1}, { b: 2}, { c: 3}. {d: 4} );

21. $("form input").disable(); $.fn.disable = function() { // this => wrapped-set return this.each(function() { // this => wrapped-set element if (typeof this.disabled != "undefined") this.disabled = true; }); } $("#address input").readOnly(true); $.fn.readOnly = function(readonly) { return this.filter("input:text").attr("readonly", readonly).css("opacity", readonly ? 0.5 : 1.0); }

22. Fetch content $("div").load(url, parameters, callback) $("mydiv").load("/url.ashx", {val: 1}, myfunc) $("mydiv").load("/url.ashx?val=1", myfunc) Get & Post $.get(url, parameters, callback) $.post(url, parameters, callback) $.getJSON(url, parameters, callback) $.getJSON("/url.ashx", {val: 1}, function(data) { alert(data); }) Ajax events ajaxStart ajaxStop ajaxSend ajaxComplete ajaxSuccessajaxError

23. $(' ').hide().ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); }).appendTo("#container"); $(" I'm foo! I'm not ").filter(".foo").click(function() { alert("I'm foo!"); }).end().appendTo("#parent");

24. jQuery UI http://jqueryui.com Form plugin http://plugins.jquery.com/project/form More and more… http://plugins.jquery.com 50+ amazing examples http://www.noupe.com/jquery jQuery in action http://www.manning.com/bibeault