1. Be lazy

 

// Don't
if ($('#item').get(0)) {
    $('#item').someFunction();
}

// Or
if ($('#item').length) {
    $('#item').someFunction();
}


// Just do
$('#item').someFunction();

jQuery will call the function only if there is a match, no need to double check.

2. Use shortcuts

 

// You can but..
$(document).ready(function(){
    // ...
});

// There is a shorter equivalent
$(function(){
   // ...
});

It should be well known, but obviously it is not.

3. Chain

 

// Don't
$('#frame').fadeIn();
$('#frame .title').show();
$('#frame a:visited').hide;

// Do
$('#frame').fadeIn()
    .find('.title').show().end()
    .find('a:visited').hide();

Unnecessary DOM traversal is a expensive operation, avoid it when possible.

4. Group queries

 

// Ugly
$('div.close').click(closeCallback);
$('button.close').click(closeCallback);
$('input.close').click(closeCallback);

// Not ugly
$('div.close, button.close, input.close')
    .click(closeCallback);

5. Select siblings like a pro

 

// Don't
$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});

// Do
$('#nav li').click(function(){
    $(this).addClass('active')
        .siblings().removeClass('active');
});

6. Use each and map

 

// Try to avoid
var output = [];
for (var i=0;i < arr.length; i++) {
    output.push(arr[i]);
}

// Do
var output = $.map(arr, function() {
    ...
});

// Or
var output = [];
$.each(arr, function(index, value) {
    output.push(value);
});

Using jQuery's each and map is more reliable because they won't break if another library is extending the Array object.

7. Use namespaces

Events can be namespaced

 

$('input').bind('blur.validation', function(e){
    // ...
});

The data method also accept namespaces

 

$('input').data('validation.isValid', true);

8. triggerHandler is great

Instead of

 

var refreshFrame = function() {
    $('#frame').load('http://reddit.com');
};

$('.button').click(refreshFrame);

refreshFrame();

You can do

 

$('.button').click(function() {
    $('#frame').load('/page/frame.html');
}).triggerHandler('click');

// You can also use a shortcut
$('.button').click(function() {
    $('#frame').load('/page/frame.html');
}).click();

triggerHandler is also useful for creating custom events, which leads me to my next tip

9. Custom events

In some situation it can saves you lots of pain, it's also really handy to encapsulate plugins interactions. Let me illustrate.

 

$('.button').click(function() {
    $('div#frame').load('/page/frame.html', function(){
        $(this).triggerHandler('frameLoaded');
    });
});

// PluginA.js
$('#frame').bind('frameLoaded', function(){
    $(this).show('slide', {direction: 'top'});
});

// PluginB.js
$('div').bind('frameLoaded', function(){
    // do something else
});

10. Test !

jQuery comes with a nice unit test framework called QUnit. Writing tests is quite easy and allow you to confidently modify your code while ensuring that it still works as expected.

 

module("A simple test");

test("The frame should appear #button is clicked", function() {
  expect(1);
  $('#button').click();
  ok($('#frame').is(':visible'), "The frame is visible" );
});