Marc Grabanski

5 Tips for Better jQuery Code

November 14, 2008

logo jquery

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('attribute', 'this is the data that I am storing') // then later getting that data with $('selector').attr('attribute');

Why is this a bad thing? Because “attribute” has absolutely no meaning whatsoever. 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');

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 the new on syntax.

When you add elements to the page a lot, attaching events with delegation. This way you can do things like:

 $(document).on('click', 'div.edit', function(){ ... });

Then whenever you add a div to the page with class “edit” it will attach that click event.

#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.

Update: Todd Motto has written a great article on using data attributes for state changes instead of classes. Back when I wrote this article data attributes weren’t standard in HTML5…now they are!

Edit Post on Github

Marc Grabanski

Web Development, Business and Life Thoughts from Marc Grabanski – Founder, CEO & UI Developer of Frontend Masters

<< Acheiving Freedoms in 2008Getting Projects Done in 2008 >>