I’ve been using jQuery in my web apps for over three years now and a lot of the time – I use it in projects for my clients too. It’s an incredibly versatile way of using JavaScript and today I thought I’d share some tips that helped me do things a little better.

1: Use $(document).ready() or define your scripts before the closing </body> tag.

Although you might be used to defining your JavaScript functions without $(document).ready, I would recommend using it – everything inside it loads up as soon as the DOM does and even before the rest of your page’s contents have. It’ll also allow you to attach events to any of the elements on your page and it won’t interfere with their mark-up.

An example: I’ve come across lots of cases where you might want jQuery to hide some of the content in your page. If you’re running your function before the document is ready, you increase your chances of it not being executed at all if the server’s taking a while to load up the whole page. So..play it safe and use this method instead.

Experienced jQuery users can also define their scripts before the last body tag to make sure they’re executed as soon as they are loaded by the DOM.

2: Client side storage is getting more and more popular – do you use the data method instead of storing your data in the DOM?

I keep seeing people doing this in their plugins to store data

jQuery:

$('selector').attr('alt', ‘I am a string of data’);

// and then they access this data back through

$('selector').attr('alt');

So…why’s this such a bad thing? Well..it’s because ‘alt’ wasn’t created for this purpose and HTML isn’t supposed to be used for storing your data.  Instead… why not go for the data() method in jQuery. It was made to offer a way to store associated data with an element on the page.

Here’s an example of what I’m talking about.

jQuery:

$('selector').data('albumName1', ‘The Best of Phil Collins’);

// then you can access this data back through

$('selector').data('albumName1'); 

 

The overall effect of this is that you can store your data with meaningful names *and* you’re able to store as much information you want on any element on the page.  It’s an awesome little tool and one which you might just end up relying on some day.

3: Use jQuery’s built-in custom selectors

I won’t go into the reasons why using something like Sizzle.js is a good idea, but jQuery has lots of selectors that are beyond your run of the mill CSS selectors, so use them. Some that I find handy are:

:input  

Example: This’ll get you all the “input” elements on your page whether they’re text areas, text boxes, select lists or anything else.

[attribute=value]  

Example: If I want to find an input element with the name “eMail” I would use input[name='eMail']

:eq(index) 

Example: Btw..this is very very useful. To get the fifth div on a page use div:eq(5)

4: If you manipulate the DOM a lot use live().

When frequently adding elements to your page, attaching events or even running functions try to use the live() method. That way, you can easily do things like:

jQuery:

  $("div.fork").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

This way, anytime you add a new div to your page with the class “fork”, it’ll attach that click event to it.

5: Use the jQuery Form plugin to submit files using Ajax

Try out this jQuery form plugin – it allows you to easily submit files to your server  via Ajax. The plugin uses a neat trick to do with an iframe to submit the data, but it’s really easy to use. Simply add an input type file and  use $(form).ajaxSubmit();

Thats it and you should be good to go.

6: Please..don’t call the same selector again and again

There’s no need to have jQuery find the element you’re interested in more than once so why don’t we do it more efficiently.

jQuery:

//rather than this

$(‘div.hi’).css(‘color’, ‘#ffffff’);

$(‘div.hi’).text(‘hello world’);

$('div.hi’).addClass(‘amazingclass’);

//lets do this

var $q = $(‘div.hi’);

$q.css(‘color’, ‘#ffffff’);

$q.text(‘hello world’);

$q.addClass(‘amazingclass’);

7: How to effectively use “classes” as a sort of flag

So, you might not be trying to store data, but do want to set a flag on a particular type of element that uses a class – for example, if you wanted to lock down a form after a user has switched from the “edit” mode on your page, jQuery provides you with the addClass method which can later be checked using the very useful hasClass method