Fun With jQuery: The Big Dance

jQuery logo

Fun With jQuery: The Big Dance

by
Harry Bartlett

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.

Related Topics

About the author

Harry started Bartlett Interactive in 1998 and focuses on integrating best practices in branding, user experience design, Internet marketing and technology to increase the value of an online presence.
Read full bio »

Free Audit

Want to boost your website's performance? Submit the form below for a detailed report that evaluates the design, marketing, and functionality of your website.