Heard of jQuery yet?

It's a new way of working with javascript, and it's incredibly concise.

Let's see what we can do with single lines of jQuery:

Click here to make new friends

for( i=0; i<35; i++ ){ $("#box").append('<div class="friend"></div>'); }

That was easy, but they look bored. Let's make them dance.

Let's Dance!

setInterval( function(){ $(".friend").each( function(){ $(this).fadeTo('fast',Math.random()); } ); }, 500 );

You call that dancing?

I said dance! Dance!

setInterval( function(){ $(".friend").each( function(){ $(this).fadeTo('fast',Math.random()); } ); }, 250 );

They're dancing too hard! Stop!

But I enjoy the dancing!

setInterval( function(){ $(".friend").each( function(){ if( Math.random() > 0.9 ){ this.zIndex = 666; this.style.background = 'url(dead.gif) center center no-repeat'; $(this).fadeTo('slow',0.2 ) } } ) }, 250 );

Well this is just terrible.

Sorry, let's clean up this mess.

$("#dancefloor").slideUp();

That's jQuery.

If you want an in depth lesson on jquery, start here.

Otherwise, all you need to know is that it takes code like this:

Traditional Javascript:

var element = document.getElementById("box");
if( element.style.display != 'hidden' ){
element.style.display = 'hidden';
} else {
element.style.display = 'block';
}

And replaces it with something like this:

JQuery:

$('#box').toggle();

JQuery is also useful for more practical tasks. Want a slideshow, voting system, or form autocompletion? JQuery makes it all easy, whether you code from scratch or use any of the hundreds of free, open source plugins.

It's not just pretty, either. Dynamic loading with jQuery's ajax functionality can lower server load dramatically.

Let's look at a simple ajax request to pull some content from the server:

JQuery code:

$.get("content.xml","",function(x){ $("target").html( x ) });

I'd include the alternative code here, but it's so long that it would simply be rude to do so.

That's the basics of jQuery. Really simple interactive coding. Plus, it's free and open source.

Read more about it at jquery.com, or check out our eValuator, which uses jQuery for visual effects.

Bookmark/Search this post with: