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:

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:

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:

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.

4 Responses to JQuery 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.

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.

Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page.Click here for instructions on how to enable JavaScript in your browser.