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]

This entry was posted in programming and tagged . Bookmark the permalink.



4 Responses to JQuery Fun

  1. Adam Kahtava CANADA Mozilla Firefox Windows says:

    To make things even more fun… :)

    In the first example you could have listened to a container object like the window.onclick, then filtered out the event type, this could have probably distilled your first example into something similar to your later example.

    Something like:

    window.onclick = function onClickFunction(myEvent){
    if(myEvent.target === ‘A’){
    // the on click code goes here
    }
    }

    Reply  |  Quote
  2. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    Hey, I actually didn’t think about that. Good one! Still, JQuery code remains slightly more readable.

    I could do something like this:

    $(document).ready(function() {
        $("#nice > a:even").click(function() {
            // on click code goes here
        });
    });

    This would only add the on-click function to the even numbered link inside a container with the id of nice which would probably require more code in your example. :mrgreen:

    Reply  |  Quote
  3. Adam Kahtava CANADA Mozilla Firefox Windows says:

    Many of the other JavaScript libraries (YUI, Scriptaculous, even the ASP.NET AJAX Client Side libraries) offer capabilities almost identical to JQuery. Scriptaculous / Prototype is probably closest to JQuery. The nice thing about these JavaScript libraries is that they’re cross platform compatible, and built around the Event Driven Programming Model – so they really force you to think differently.

    Reply  |  Quote
  4. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    Yeah, I had a run in with dojo at one point, but I remember it was big and confusing mess. At least that was my first impression, and I didn’t really work with it long enough to fully appreciate it.

    I also saw some really cool stuff being done with prototype but I never actually used it.

    I kinda fell in love with JQuery because it was so tiny/simple, and yet could do most of the things her bigger brothers and sisters were capable of. :)

    Reply  |  Quote

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>