How to get started with jQuery

You can check out the demo of this tutorial to see what it does, or view the source.

First thing you need to do is go to jQuery.com and download the latest version of jQuery. The last release on January 14th was 1.4, and with that release The 14 Days of jQuery was also created to help people learn about what's new in 1.4. Upon the new release of jQuery, I also posted 14 Ways To Start Learning jQuery which I had originally posted as 13 ways and then realized jQuery 1.4 was released that day so I added The 14 Days to my list, and changed it to 14 ways. Coincidence? Yes, it was strange actually.

So now that you have downloaded the new jQuery library, and have a couple of resources for learning it, here's a quick crash course in how to start using it in a web page. I'll show you how to use the built-in slideToggle() function to make your H2 headings toggle when you click them. This could be used for example, to make your sidebar widgets toggle.

First you need to include jQuery in the head of your page.

<script src="jquery-1.4.js" type="text/javascript"></script>

Now for the fun part. The following code can go below the jQuery include code in the head of your page, as shown above. Keep in mind this is the recommended way, though you can put all of this in the body of your page as well.

$(document).ready(function(){
	$('h2').next().hide();

	$('h2').click(function () {
		$(this).next().slideToggle('slow');
	});

}); 

Let's break this code down.
The line $(document).ready(function(){ is what you need to make jQuery work. Everything inside it will load as soon as the DOM is loaded, before the page contents are loaded. You can also write it like this instead $(function() { or jQuery(document).ready(function(){. They all work the same way.

The next line $('h2').next('div').hide(); will find all h2 headings, select whatever is following it .next() and hide it .hide(). This could be a list for example if that's what is after your h2. You could be even more specific if you wanted and select only the h2's that have "div" after them by writing .next('div').

Now to make the headings clickable you need to write $('h2').click(function () {, and then to show what we have hidden you write $(this).next().slideToggle();. If you specified .next('div') you need to do that again here. I included slow in my slideToggle() function which will make it slide slowly. You can also use fast, or a number in miliseconds for example .slideToggle(5000) for 5 seconds.

Finally we need to close both the functions with });

This is what I mean when I say jQuery is easy

This is just the first of many more jQuery tutorials you will find here on New2WP. I've only just begun to learn it, and I'm already in love. It's the perfect thing for designers who want to learn programming but have a hard time with it.

If you have any questions let me know below.

UPDATE: A better and shorter code that shows the cursor when hovering over H2

<script type="text/javascript">
$(function($) {
	$('h2').css({'cursor':'pointer'}).next().hide().prev().click(function () {
		$(this).next().slideToggle();
	});
});
</script>

This does performs the same task only in less code, and with the pointer cursor provided by Samuel.