Excellent tips to improve your Jquery programming-Part 3

After overwhelming response to first and second installment of this series, here is the final installment. You will surely like these small tips-n-tricks to improve your jQuery programming.
Read first version.
Read second version.

How to tell when images have loaded

This is another one of those problems that doesn't seem to be as well documented as it should be (not when I went looking anyway) and it's a fairly common requirement when building photo galleries, carousels etc, but it's fairly easy. All you have to do is use the .load() method on an IMG element and put a callback function in it. The following example changes the "src" attribute of an image tag to load a new image and attaches a simple load function.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});  

Always use the latest version

jQuery is constantly improving and John Resig, it's creator, always seems to be in search of ways to improve performance. John has already revealed that he's working on a new selector engine called Sizzle, which may apparently improve selector speeds in Firefox by up to 4x. So, it pays to keep up to date.

How to check if an element exists

if ($('#myDiv).length) {  
   // your code  
}  

Add a JS class to your HTML attribute

I learned this tip from Karl Swedberg whose excellent books I used to learn jQuery. He recently left a comment on one of my previous articles about this technique and the basics are as follows...
Firstly, as soon as jQuery has loaded you use it to add a "JS" class to your HTML tag.

$('HTML').addClass('JS');  

Because that only happens when javascript is enabled you can use it to add CSS styles which only work if the user has JavaScript switched on, like this...

.JS #myDiv{display:none;}  

So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content as it's not hidden. I'll be using this one a lot in the future.

Return 'false' to prevent default behaviour

This should be an obvious one but maybe not. if you have a habit of doing this...

<a href="#" class="popup">Click me!</a>

... and then attaching an event handler like this...

$('popup').click(function(){  
    // Launch popup code  
});  

... it'll probably work fine until you use it on a long page, at which point you'll notice that the # is causing it to jump to the top of the page when your click event is triggered.
All you have to do to prevent this default behaviour, or indeed any default behaviour on any event handler is to add "return false;" to your handler, like this...

$('popup').click(function(){  
    // Launch popup code  
    return false;  
});  

Shorthand for the ready event

A small tip this one but you can save a few characters by using shorthand for the $(document).ready function.
Instead of this...

$(document).ready(function (){  
    // your code  
});  

You can do this...

$(function (){  
   // your code  
});