jQuery: JavaScript That Doesn’t Suck

Chris Poteet,

I hate JavaScript. I mean I really hate JavaScript. Dealing with different implementations of the DOM between browsers is a menace I couldn’t duplicate if I tried. I’ve tried JS libraries from Mootools, script.aculo.us, and so on until recently.

I knew jQuery existed, but I didn’t realize how powerful the language was until recently. When I realized I could select and manipulate DOM elements with CSS selectors then I was off to the races! I love how it’s tailored for designers who already understand that syntax. There is no more getElementById(“search”) or other garbage, because I can write this.

$("search").show();

Now, that is elegant! The only thing more impressive then the way it does selectors is how extensive the API is. Not only is extensive, but it is actually understandable. It’s the perfect balance between extensibility and ease of use. It’s like adding Mootools and script.aculo.us together with better DOM selectors.

Toggle Goodness

I love JavaScript toggles and its variations. It’s much more elegant that simply changing an element from display “none” to “block.” jQuery comes with an easy way to toggle elements, and I recently did something like this at work. 

$(".click").click(function() {
        $(".toggle").slideToggle("fast");
	return false;
});

Ajax With jQuery

jQuery doesn’t stop there. Doing Ajax is simpler than it seems it should be. Here’s a function that onclick will do a GET via Ajax and return a message notifying the user that the request was successful.

$(".ajax").click(function() {
	$.ajax({
    		type: "GET",
    		url: "load.html",
    		dataType: "script"
		})
	$(".successmsg").ajaxSuccess(function(evt, request, settings){
    	        $(this).append("<p>Successful Request!</p>");
	});
});

What if I want to append content into the DOM? Difficult right? Not so much.

$(".append").append("Append some text");

jQuery Plugins

The cool thing for all those effects that jQuery doesn’t provide out-of-the-box then it provides a rich API for users to develop plugins on top of jQuery. For instance, my portfolio utilizes the Coda-Slider jQuery plugin.

At work I was tasked to create some DHTML menus which I believe is a usability nightmare and an IA mistake, but alas I had to. I wanted to maximize the usability, and I found Superfish which is “Suckerfish on ‘roids.” I was able to make sexy menus that had plugins on top of the plugin including the hoverIntent jQuery plugin which is smart enough to know whether you really want the menu or if you’re just trying to move around the page.

Additional Resources

Well, that’s just scratching the surface of what jQuery can do! While learning more about it I’ve found several sites that have helped me.

Tutorials/Blogs
jQuery Plugins
API Documentation
IDE Integration
Tutorials User Interface

Leave a Reply

Your email address will not be published. Required fields are marked *