When using jQuery it's really easy to fall on the object selector madness, for example, when trying to use an HTML element in different places in your code, is common to see code like this:

$('#anInput').addClass('active');
$('#anInput').click(clickHandler);
$('#anInput').val('');
$('#anInput').show();

The problem with that code is that each time $('#anInput') gets called, jQuery reads the DOM entirely and then tries to parse it down to find where the HTML element is located. This really affects the performance of our application. One way to avoid this is to save the jQuery object in a variable and then use it anytime we need it in our application.

var $anInput = $('#anInput'); // Save a reference to the object

$anInput.addClass('active');
$anInput.click(clickHandler);
$anInput.val('');
$anInput.show();

A good practice is to precede the name of the variable that holds the jQuery object with a $ sign. This helps us identify the jQuery objects in our code.

Something to have in mind is whenever possible try to chain the methods that you are calling, this also helps to get a better performance in a jQuery application.

$anInput.addClass('active')
        .fadeIn('fast')
        .css('background', '#333');

Hope this little information comes in handy for you.
Happy Coding! :)


Comments? Something wrong in the post? or just want to contact me? Send me a tweet to @gpopoteur on twitter.