The very best thing about the jQuery JavaScript library is it’s ridiculous simplicity! Whether you’re a designer or a web app developer jQuery will fit nicely into your arsenal of killer skills. For many people it’s the library of choice since it has a bit of everything, and what it doesn’t have you can bet they’ll be a plugin! I discovered it only one month ago and am already at the stage when I feel I have to tell everyone about it! Even if you’ve never used a JavaScript library before you should try this out; you will be amazed by how simple life becomes when you start with jQuery!

I am basically trying to sell you on the library so forgive me but I’m diving straight in.

If I wanted to fade in all the p elements within the #content div, for example all I would need is this:

$('#content p').fadeIn();

So simple! You’d need to attach it to an event though. If you wanted this effect to occur when the page has loaded (when the DOM has loaded) you could simple use jQuery’s handy ready event like this:

jQuery(document).ready(function(){
	$('#content p').fadeIn();
});

The jQuery(document).ready() code above checks whether the document is ready for manipulating, once it is ready the code within the function will execute. If you’ve coded using JavaScript before you’re probably plagued by the window.onload trend. It’s probably a bad idea to use this because instead of waiting for the DOM to load it waits for everything to load (images, stylesheets etc.).

One of the most useful aspects of jQuery is the ability to select elements using the equivalent of CSS selectors (something we are all familiar with). This means you can start working with jQuery straight away, even if you know nothing about the DOM.

$('#content a.external').click(function(){
	alert('You are about to visit: '+$(this).attr('href'));
});

The above would take all anchors within the #content div with a class of “external” and make an alert box appear when on the event of one of these anchors being clicked. The alert box would read, “you are about to visit:[href]” (i.e. it would show the href of the anchor clicked on). jQuery also accepts attribute selectors (e.g. $('a[@rel='external']').

Another impressive ability of this library is it’s "chainability". It provides a logical and quick way to make a number of changes to an element within a single line of code!

$('a').css({position:'relative'}).hover(function(){$(this).animate({left:'+=10'},500)},function(){$(this).animate({left:'-=10'},500)});

The above code takes all anchors and applies a cool animated hover effect (mouseover & mouseout events). You could go on forever though; there is no reason why you couldn’t include all your enhancements within a single line of code, although maintainability would become a bit of an issue in that situation.

Just for "fun", let’s take a regular JavaScript chunk of code and transform it into jQuery:

var links = document.getElementsByTagName("a");
	for (var i = 0 ; i < links.length ; ++i) {
		links[i].onclick = function() {
			alert('BOO');
		}
	}

Now in jQuery! -

$('a').click(function(){alert('BOO')});

So jQuery not only has cool effects but also can save a lot of time!

If you’re not sure how to do something in jQuery then visit the very well written documentation. Also remember that you can always mix and match with good old regular JavaScript if your stuck -

$('p').each(function(){
	this.style.color = 'red';
	// The jQuery way would be:  $(this).css({color:'red'});
});

I hope you’ve been enlightened by this and will go and download it now. jQuery is only one file which you need to link to if you want to use… like this:

<script type="text/javascript" src="scripts/libraries/jquery.js"></script>

There are other javascript libraries which definitely are worth a glance. Check out MooTools, Scriptaculous, & Prototype.

I’m sure it’s painfully obvious but I am using jQuery quite a lot on this site. I suppose I’ve got a little bit carried away with it in some areas.