5 Tips for Better jQuery Code: jQuery, Tutorial

I've been coding using jQuery since shortly after it came out, and well -- I've been using it almost every work day. Here is a few tips that have saved me time.

#1: Use data method instead of storing data inside the DOM.

The mistake I see people making all the time is this:

$('selector').attr('alt', 'this is the data that I am storing'); 
// then later getting that data with 
$('selector').attr('alt');

JavaScript:

$('selector').attr('alt', 'this is the data that I am storing'); 
// then later getting that data with 
$('selector').attr('alt');

Why is this a bad thing?  Because "alt" has absolutely no meaning whatsoever, as well as HTML is not meant to store data.

Instead use the data method in jQuery. It allows you to associated data with an element on the page. 

$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');

JavaScript:

$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');

This allows you to store data with meaningful names and as much data as you want on any element on the page. It is a really amazing utility and something I've come to rely on.

#2: Take advantage of jQuery's built-in custom selectors.

jQuery has a plentiful amount of selectors that are beyond basic CSS selectors, so use them. Some that I use are:

• :input   example: get all the inputs on the page regardless if they are checkbox, textarea or select list - use :input
• [attribute=value]   example: find an input with the name, "container" - use input[name='container']
• :eq(index)  example: get the fourth table on the page - use table:eq(3)

#3: If you are Manipulating the DOM a lot, use livequery.

Note on March 21st, 2009: New in jQuery 1.3, the live method has adopted many of the same events of livequery into the core of jQuery.

Note on November 16th, 2008: If you understand event delegation, use it as an alternative to using livequery for attaching events.

When you add elements to the page a lot, attaching events to them and running functions on them then use Brandon Aaron's livequery plugin. This way you can do things like:

$('div.edit').livequery('click', function(){
//go into edit mode
});

JavaScript:

$('div.edit').livequery('click', function(){
//go into edit mode
});

Then whenever you add a div to the page with class "edit" it will attach that click event. This works for all other events, as well as if you want to run a function on an element right when it is added you can do this:

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

JavaScript:

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

#4: Use jQuery form plugin to submit files via Ajax.

If you use Mike Alsup's jQuery form plugin you can use it to submit files via Ajax. It uses a trick with an iframe to submit the data. Just put in an input type file, then use $(form).ajaxSubmit(); and you are good to go.

#5: Use classes as flags.

If you aren't storing data, but need to set a flag on an element use a class. What do I mean by a flag? Well, for instance if you are in "edit mode" of a form you might use the class, "editing".  With jQuery you can add a class with the addClass method and then check later if an element has the class with the hasClass method.