jQuery, it really is simple

I've started playing around with jQuery along with the rest of the world it seems and all I can say is WOW. Working with it has been straight forwards and simple.

There's a couple of things out of the box that I like about it, but mainly the fact it comes as one .js file so doesn't matter what affect you want its there. In regards to it's simplness here some quick examples to get going:

First you need the jQuery.js file. This comes in 3 flavours, while i'm still testing I'm using option 2

  1. Download jQuery 1.2.1 (14kb, Minified and Gzipped) Great for production use.
  2. Download jQuery 1.2.1 (77kb, Uncompressed) Great for testing, learning and development.
  3. Download jQuery 1.2.1 (26kb, Packed) For those that can't Gzip their JavaScript.

Adding jQuery to your HTML is an easy one-liner

<!-- Fall all effects etc this is all you need-->
<script type="text/javascript" src="/jquery/jquery-1.2.1.js"></script>

This is an example bit of code that fades out a link (click the link to see it in action) $(this).fadeOut('slow')
This is what the full code looks like:

<!-- jQuery Code-->
<a href="http://localhost" onclick="$(this).fadeOut('slow');return false">$(this).fadeOut('slow');return false;</a>

How simple is that?

To fade in a link you just use $(this).fadeIn('slow'). Whats even better about jQuery is that you can join these effects together on a actions; "chainability". So upon one click you can fadeOut() and fadeIn() a link by joining the effects. $(this).fadeOut('slow').fadeIn('slow');return false;

<!-- jQuery Code-->
<a href="http://localhost" onclick="$(this).fadeOut('slow');return false">$(this).fadeOut('slow');return false;</a>

As I carry on my journey I'll hopefully blog more this.

In the meantime has anyone read the book Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques. Is it worth buying or can you find everything online?

Comments (7) Print Send del.icio.us Digg It! Linking Blogs

1881 Views | Posted At : September 19, 2007 4:19 AM | Posted By : Andy Jarrett
Related Categories: jQuery

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment]

Andy Matthews's Gravatar Andy...

Don't ignore one of the most powerful aspects of jQUery, it's unobtrusiveness. Were someone to have JS disabled, that code wouldn't work at all. A better way to do it would be to use a script block in your head:

$(document).ready(function(){
$('a').fadeOut('slow');
return false;
});

Or some variation using a better selector than just an a tag (which would affect all A tags on the page).
# Posted By Andy Matthews | 9/19/07 4:56 AM
Andy Jarrett's Gravatar @andy Wahey there ... I'm gonna try and put more of that in a another post ... I just wanted to show the pure easyness of creating an effect here ;o)
# Posted By Andy Jarrett | 9/19/07 4:57 AM
johnb's Gravatar dude, i'm on exactly the same journey as you :)
# Posted By johnb | 9/19/07 5:13 AM
Jim Priest's Gravatar If you haven't already - join the jQuery mailing list - lots of CFers on there...

Also - check out ui.jquery.com for some more jQuery goodies!
# Posted By Jim Priest | 9/19/07 9:01 AM
Jim Priest's Gravatar Oh yeah - book is great! I'm still working my way through it - basically skipping around picking up things I want to implement... But it's nice to have on the desk here. They are also going to release a reference book as well though for that sort of thing I tend to hit the web as it's usually more up-to-date.

http://www.thecrumb.com/2007/07/13/5-minute-jquery...
# Posted By Jim Priest | 9/19/07 9:04 AM
Josh Nathanson's Gravatar Welcome to the land of the living Andy. jQuery is the best. Get ready for some more "WOW" moments as you discover what jQuery can do. The ajax stuff is easy and powerful as well.
# Posted By Josh Nathanson | 9/19/07 10:11 AM
Karl Swedberg's Gravatar @Jim, the reference book has been out for over a month now. I'm too tired to make a fuss about it, though. And you raise a good point about the problem of keeping this stuff up to date. Anyway, if anyone is interested, you can find the book on packtpub.com or amazon.com. Just search for jQuery Reference Guide.

Cheers,
Karl
# Posted By Karl Swedberg | 9/19/07 11:41 AM
[Add Comment]