jQuery in 15 minutes

jQuery in 15 minutesTorchbox, 7th August 2007What 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 factorsThe jQuery() functionjQuery('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 elementvar 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');