Training: Creating Smarter Interfaces with jQuery and Drupal

Go from zero to 60 with jQuery in just 60 minutes. In this under-the-hood, technical session, Amit will show site producers and developers how to build intuitive and dynamic user interfaces with this popular JavaScript library. The first third of the session will focus on the foundations of jQuery and then we'll transition to walk-throughs of several examples, each one building on the previous. Learners should have basic familiarity with CSS and JavaScript.

NOTES

jQuery is a JavaScript library that makes it very easy to add all sorts of cross-browser-compatible effects to your Web sites, like expanding and collapsing navigation, sortable columns, drag-and-drop objects, AJAX data transfer, etc.

Get the .js file containing the jQuery library from jQuery.com. Get the "minified" production version of the library, which is named jquery-1.2.6.min.js (the version number may change, but note the "min" part.)

To use jQuery in a Web page, include the jQuery .js file like you would any other .js file, via a "script src" call in the "head" section of your document:

You almost always want to wrap your jQuery statements in jQuery's $(document).ready() function to prevent the statements from executing until the Web browser has fully loaded the structure of the Web page (which can cause your statements to fail):

Usually, a jQuery statement does three basic things: Selects a component of the Web page to operate on (e.g., an element or div represented by an ID or classname); sets an event to listen for; and defines some code for manipulating the component when the event is fired.

In other words: Selector, event, manipulation.

Selectors use the $() function, which is shorthand for the jQuery() function, and take an element, classname, or ID as the parameter:

$('p')
$('#mydiv')
$('.mydivs')
$('p.myparagraphs')
$('#mydiv p a')

Events are functions that take another function as a parameter. The other function gets executed when the event happens (is "fired").

Again, look at visualjquery.com to learn about all the manipulation functions available.

jQuery has plugins -- in particular the jQuery UI plugin lets you do all sorts of fancy stuff with very little effort. For instance, you can create drag-and-drop objects with very few lines of code. See http://docs.jquery.com/UI