jQuery Intro

jQuery is a very useful javascript library. It provides unified methods to assign event handlers, perform ajax requests, change CSS classes, etc. All of these operations, using jQuery, are performed the exact same way no matter what web browser the end user is running.

Selecting DOM Elements
Before you can do almost anything, you’ll need to select an element to work with. Normally, this is done by by using


But jQuery has an easier way.


ThisĀ  does the same thing as the previous example. When using a #, you are selecting by id. This is just like a CSS selector.

Keeping with the CSS selectors, using a period (.) at the beginning selects all elements with that class name. Also, putting an element name selectes that element. Separating selectors with a space, denotes a ancestor/descendant relationship. Separating selectors will a comma, elements matching any of the selectors will be selected.

Event Handlers
Assigning an event handler is a lot easier using jQuery. Once you have selected your element(s), run the function mousedown to add a mousedown event handler. For example,


Adds a mousedown event handler (handler) to all td elements.

In addition to the ease of assignment, the event object passed to the handler is the same across various browsers. There are a few caveats, but the jQuery crew is working to resolve these.

Manipulating Classes
There are several functions for manipulating classes, including removeClass, addClass, and toggleClass. These are fairly self-explanatory. Running removeClass with no arguments removes all classes from the selected element(s).

jQuery makes Ajax very simple. To do a post, all you need is:


Gets are even easier:


That’s jQuery in a nutshell. There is much more you can do with jQuery that wasn’t covered. jQuery has a whole set of UI controls available, but these increase the amount of code & CSS that your end user has to download.

For more information, visit http://www.jquery.org/.