jQuery in 15 minutesTorchbox, 7th August 2007

What makes jQuery interesting?

• Built around CSS selectors

• Well behaved

• Doesn’t hijack your global namespace

• Plays well with other libraries

• API designed with conciseness and convenience as the driving factors

The jQuery() function

jQuery('div#intro h2')

jQuery('div.section > p')

jQuery('input:radio')

$('div#intro h2')

jQuery collections

• $('div.section') returns a jQuery collection

• You can call methods on it:

$('div.section').size() = no. of matched elements

$('div.section').each(function(div) {

// Manipulate the div

}

Manipulating collections

• Most jQuery methods operate on all of the matched elements in the collection

$('div.section').addClass('highlighted')

$('img.photo').attr('src', '/default.png');

$('a.foo').html('<em>Click me now!</em>');

$('p:odd').css('background-color', '#ccc');

Grabbing values

• Some methods return results from the first matched element

var height = $('div#intro').height();

var src = $('img.photo').attr('src');

var lastP = $('p:last').html()

Traversing the DOM

• jQuery provides enhanced methods for traversing the DOM

$('div.section').next()

$('div.section').prev()

$('div.section').prev('a')

$('div.section').parent()

$('div.section').parents()

Handling events

• jQuery provides methods for assigning event handlers to elements in a cross-browser way

$('a').click(function(ev) {

$(this).css({backgroundColor: 'orange'});

ev.preventDefault();

});

Going unobtrusive

$(document).ready(function() {

alert('The DOM is ready!');

});

$(function() { alert('This is a shortcut') });

Chaining

• Most jQuery methods return another jQuery object - often one representing the same collection. This means you can chain methods together:

$('div.section').hide().addClass('gone');

Crazy chaining$('form#login') // hide all the labels inside the form with the 'optional' class .find('label.optional').hide().end()

// add a red border to any password fields in the form .find('input:password').css('border', '1px solid red').end()

// add a submit handler to the form .submit(function(){ return confirm('Are you sure you want to submit?'); });

From http://www.ibm.com/developerworks/library/x-ajaxjquery.html

Ajax

• jQuery has excellent support for Ajax

$('div#intro').load('/some/file.html');

• More advanced methods include:

$.get(url, params, callback)

$.post(url, params, callback)

$.getJSON(url, params, callback)

$.getScript(url, callback)

Plugins

• jQuery is extensible through plugins, which can add new methods to the jQuery object

• Form: better form manipulation

• Dimensions: lots of browser measurements

• Interface: fancy effects, accordions

• UI: drag and drop, and more

Further reading

• http://jquery.com/ - official site

• http://visualjquery.com/ - useful API reference