Unless you've been living under a rock, you've probably been exposed to jQuery. If you've been on Facebook, YouTube, or Twitter you've seen it. Those cool popup windows, boxes that fade out, and other effects can be created using this powerful technology.

jQuery is a JavaScript library that allows for easy interaction with the various HTML elements on the page. According to BuiltWith, over 25% of the most visited websites use jQuery in some form or fashion. I personally use it on just about every site I create for easy AJAX postings and UI changes.

Getting Started:

jQuery lives at jquery.com. Their site has in-depth information on each of the functions and methods included in the jQuery library. They also have good documentation for getting started if you want to read lots and lots. I prefer to get straight to work so here is a down and dirty guide to jQuery.

I've created some sample files that you'll need to look at for this tutorial. Download and unzip them, then open up the HTML file jquery.html in your favorite text editor.

Adding jQuery to your webpage

In order to use the jQuery libraries, you'll need to put a link to the library in the "head' section of your website. You can either download the files from jquery.com or, like me, you can use the Microsoft hosted jQuery file. The advantage to using the Microsoft file is that it is hosted by Microsoft at several locations around the world so that it can be loaded quickly by end users.

To use Microsoft's file add this to your "head' section:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"><!-- mce:0 --></script>

Selectors

One thing that you must understand is how to use jQuery selectors. They are the most basic element of a jQuery call. Selectors are used to tell jQuery which objects you want to interact with. In the example files provided, I have a webpage with navigation at the top and the main content area. I've assigned a CSS id of #nav to the navigation section. This code below removes a CSS class from all "li' tags under #nav.

$("#nav li').removeClass("selected');

The selector is the "#nav li' part of the code. Again it tells jQuery to select all "li' tags under #nav. You can be more specific, too, and actually, grab a single element by its class or id.

$("#nav .home').addClass("selected');

In the code above, I am having jQuery add a CSS class to the elements under #nav that have the class ".home' assigned to them (which in our case happens to be only one item).

Instead of putting a class, I could have put only an ID.

$("#About').fadeIn();

This line makes the #About div fade into the page.

There are also ways to traverse the various parents, children, and siblings of each element which I won't get into here but are covered in depth on jquery.com.

Event Handling

In the sample file jquery.html, you'll notice I'm using jQuery to handle the mouse clicks in the nav. The page never does a postback thanks to jQuery.

There are many events that jQuery can handle, such as mouse over, mouse out, and click.

The simplest way to create a click event is to write a selector for the item you want to handle clicks for and create a function. Here's an example:

$("#nav .home').click(function (){
$("#About, #Contact').fadeOut();
$("#nav li').removeClass("selected');
$("#nav .home').addClass("selected');
});

As you can see above, when the user clicks the element assigned, the ".home' class, a function runs that fades-out the About and Contact divs, resets the navigation CSS, and highlights the home link.

Thanks to the jQuery team, great looking effects, and UI elements are available to the masses. This simple tutorial doesn't even scratch the surface of what can be done, but for someone who has never used jQuery, it's a start. For more information on the various methods in jQuery visit api.jquery.com.

Download