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
- Download jQuery 1.2.1 (14kb, Minified and Gzipped) Great for production use.
- Download jQuery 1.2.1 (77kb, Uncompressed) Great for testing, learning and development.
- Download jQuery 1.2.1 (26kb, Packed) For those that can't Gzip their JavaScript.
2<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:
2<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;
2<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?
| Tweet |
Comments (7) | 
Print |
Send |
3777 Views
| If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck. |
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).
Also - check out ui.jquery.com for some more jQuery goodies!
http://www.thecrumb.com/2007/07/13/5-minute-jquery...
Cheers,
Karl