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
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 ďŹrst
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();
});
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
.ďŹnd('label.optional').hide().end()
// add a red border to any password ďŹelds in the form
.ďŹnd('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return conďŹrm('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/ďŹle.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/ - ofďŹcial site
⢠http://visualjquery.com/ - useful API reference