jQuery: JavaScript That Doesn’t Suck

I hate JavaScript. I mean I really hate JavaScript. Deal­ing with dif­fer­ent imple­men­ta­tions of the DOM between browsers is a men­ace I couldn’t dupli­cate 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 real­ize how pow­er­ful the lan­guage was until recently. When I real­ized I could select and manip­u­late DOM ele­ments with CSS selec­tors then I was off to the races! I love how it’s tai­lored for design­ers who already under­stand that syn­tax. There is no more getElementById(“search”) or other garbage, because I can write this.

$("search").show();

Now, that is ele­gant! The only thing more impres­sive then the way it does selec­tors is how exten­sive the API is. Not only is exten­sive, but it is actu­ally under­stand­able. It’s the per­fect bal­ance between exten­si­bil­ity and ease of use. It’s like adding Mootools and script.aculo.us together with bet­ter DOM selectors.

Tog­gle Goodness

I love JavaScript tog­gles and its vari­a­tions. It’s much more ele­gant that sim­ply chang­ing an ele­ment from dis­play “none” to “block.” jQuery comes with an easy way to tog­gle ele­ments, and I recently did some­thing like this at work. 

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

Ajax With jQuery

jQuery doesn’t stop there. Doing Ajax is sim­pler than it seems it should be. Here’s a func­tion that onclick will do a GET via Ajax and return a mes­sage noti­fy­ing 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 con­tent into the DOM? Dif­fi­cult right? Not so much.

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

jQuery Plu­g­ins

The cool thing for all those effects that jQuery doesn’t pro­vide out-of-the-box then it pro­vides a rich API for users to develop plu­g­ins on top of jQuery. For instance, my port­fo­lio uti­lizes the Coda-Slider jQuery plugin.

At work I was tasked to cre­ate some DHTML menus which I believe is a usabil­ity night­mare and an IA mis­take, but alas I had to. I wanted to max­i­mize the usabil­ity, and I found Super­fish which is “Suck­er­fish on ‘roids.” I was able to make sexy menus that had plu­g­ins on top of the plu­gin includ­ing the hov­er­In­tent jQuery plu­gin which is smart enough to know whether you really want the menu or if you’re just try­ing to move around the page.

Addi­tional Resources

Well, that’s just scratch­ing the sur­face of what jQuery can do! While learn­ing more about it I’ve found sev­eral sites that have helped me.

Tutorials/Blogs
jQuery Plu­g­ins
API Doc­u­men­ta­tion
IDE Inte­gra­tion

No Comments

Got Something to Say?

(Required)
(Required)