This document provides an overview of jQuery, a JavaScript library for DOM manipulation. It discusses jQuery's CSS selector syntax, methods for manipulating DOM elements and collections, event handling, AJAX support through methods like load() and get(), and how jQuery is extensible through plugins. The document also provides examples of DOM traversal, value retrieval, event binding, and chaining methods.

1. jQuery in 15 minutes
Torchbox, 7th August 2007

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

3. The jQuery() function
jQuery('div#intro h2')
jQuery('div.section > p')
jQuery('input:radio')
$('div#intro h2')

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

5. 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');

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

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

8. 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();
});

9. Going unobtrusive
$(document).ready(function() {
alert('The DOM is ready!');
});
$(function() { alert('This is a shortcut') });

10. 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');

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

12. 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)

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

14. Further reading
• http://jquery.com/ - official site
• http://visualjquery.com/ - useful API reference