JQuery Fun

I’m doing more and more work with JQuery lately, and as I mentioned several times before I’m totally loving Javascript again. It is really a very concise and terse framework so it doesn’t really take long until you start feeling like you know it inside out. But it is very powerful and learning to use it properly, and efficiently will probably take me a while. Last time when I was raving about it I did it without any neat code samples to show you how cool it is, so this post will have a few.

One nice thing about this framework is that it is all about closures. Most of the JQuery functions take a pointer to a callback function as an argument, and the selectors automatically loop through DOM instances they match forcing you to write very different code. For example, if I wanted to add an onClick event to all links on my page with regular javascript I would probably do something like this:

function addOnlclickToLinks()
{
    myLinks = document.links;
    for(var i=0;i < myLinks.length;i++) 
    {
       myLinks[i].onclick = return onClickFunction();
    }
}

function onClickFunction()
{
    // the on click code goes here
}

 window.onload = addOnClickToLinks

It's readable, and understandable code, but it looks messy. JQuery saves you tons of typing and really makes the code more ellegant:

$(document).ready(function() {
    $("a").click(function() {
        // on click code goes here
    });
});

This is a totally new way to code, and it forces you to think in a much different way. After doing this for a while, you come to rely on this new way of coding to the point where it trips you up. For example, the other day I wanted to do something like this:

$("input.someclass").after(function() {
    if($(this).val() == foo)
    {
        // do somethign complex
    }
    else
    {
        // do something else
    }

    return something;
}());

What I want to do here is to generate element called something based on the value of the selected input - and the process may actually be quite complex, requiring several lines, or multiple function calls. The sample above doesn't work because I'm using the $(this) selector in the wrong context. To the best of my knowledge, the way to achieve this sort of thing would be by doing:

$("input.someclass").each(function() {
    if($(this).val() == foo)
    {
        // do something complex
    }
    else
    {
        // do something else
    }

    $(this).after(something);
});

The each function actually iterates through all the selected elements, and runs the passed function in the context of each one. At least I think this is how you would do it.

Either way, it is really a much nicer way to program and the way you select DOM elements and interact with them is consistent across platforms. If you still haven't tried JQuery, I highly recommend checking it out. Javascript is really a great language - it has a somewhat traditional syntax (braces and semicolons, ftw) but all the awesome features of a modern highly dynamic scripting language like Python or Ruby. The only thing that is holding it down these days is the inconsistency in which it is interpreted across browsers. JQuery fixes that issue, and draws on some of the cool dynamic features of the language to really make your life easier.

[tags]jquery, javascript, web design, programming[/tags]