jQuery Rocks

jQuery rocks. After playing with YUI, EXT, and Mootools, and using Prototype/Scriptaculous for over a year, I am now completely sold on jQuery. It was a a post on err.the_blog, which first got me to take a look.

The Basics

As an example of why I am so enamored with jQuery, this simple javascript calendar required so little javascript, for so much functionality, that it blew me away. The whole idea is that you can chain various methods onto the results of simple selectors. Methods for animation, manipulation, and bindings are all provided. A snippet from my calendar example:

jQuery(function () {  // jQuery() sets a callback for when the page is ready to go

	$('#calendar .row .day').hover(

		function() { $(this).addClass("active_day"); }, 

		function() { $(this).removeClass("active_day"); }

	)

}

So, a simple CSS selector, and a utility function that automatically binds a function to the mouseover and mouseout events of each matched element. addClass() and removeClass() make it incredibly simple to provide visual user feedback. The simplicity of traversing the DOM in this manner, with #ids, .classes, and tag types, is incredible. Enhanced selectors such as :checked and :text are included to make finding the right element easy.

Simple Animation

As another example, the calendar includes a hidden div positioned at the top of the window. When a message needs to be shown to the user, this function takes care of showing the div, animating it's appearance, updating the textual message, rounding it's corners, and then hiding it again:

function show_results(str) {

	$("#results").html(str);

	$("#results").corner("bottom");

	$("#results").slideDown();

	setTimeout(function() {$("#results").slideUp("slow");}, 4000);

}

Unobtrusive

I think what makes jQuery stand out to me, is how it really lends itself to the unobtrusive javascript paradigm. The better you semantically mark up your page, the more easily jQuery is to add to the page.

Back to Blog Home »

Hi, I'm Chris Moyer's Blog.

jQuery Rocks