Diego Guidi - DotNetMarche

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

John Resig jQuery 1.0 out (Aug 2006) jQuery latest Production 19k – Debug 120k Cross-browser Visual Studio 2008 support

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 }

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

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

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

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

$(document).ready(function() { $("#mybutton"). bind('click', function(ev) { alert('behavior!'); }); document.ready != pageLoad and-pageload-are-not-the-same

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')

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]')

Convenience pseudo-selectors :first:last :even:odd :hidden:visible :has:contains :enabled :disabled :animated:selected :not $('div p:not(:hidden)') Even more!

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()

$("#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)

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")

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)

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} );

$("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); }

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

$(' ').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");

jQuery UI Form plugin More and more… amazing examples jQuery in action