Contents
1) Wherever possible, use an ID selector
This one allow is probably the most important change I’ve done to the way I code jQuery. It’s pretty easy and well, convenient, to select elements based on their class:
1 | $('div.submitbutton'); |
However, doing so means that jQuery will have to traverse the entire DOM and look for a div which has that submitbutton class assigned.
Instead, you have two options which are better:
1 | $('div#submitbutton'); // The best option |
or, if you absolutely must use a class on the button, always descent from the closest parent ID:
1 | $('div#container div.submitbutton') |
That way, jQuery will immediately start looking for the button insidediv#container.
2) Cache your Selections
If you need to do several things to one element, you could do the following:
1 2 | $('div#submitbutton').css("font-weight","bold");$('div#submitbutton').css("font-size","15px"); |
However, this means your jQuery code will have to look for that button twice. Instead, cache the result of your selection as follows:
1 2 3 | var $submitbutton = $('div#submitbutton');$submitbutton.css("font-weight","bold");$submitbutton.css("font-size","15px"); |
Even better, why don’t you use method chaining? You could replace that code with:
1 2 | var $submitbutton = $('div#submitbutton');$submitbutton.css("font-weight","bold").css("font-size","15px"); |
3) Use the 2nd parameter of your selector method
Though not many might know this, the selector method actually accepts two parameters, not one. For instance, say we had the following code:
1 | $('div.submitbutton').html('Click me!'); |
We could optimize this by also including the closest parent ID:
1 | $('div#container div.submitbutton').html('Click me!'); |
The second parameter was made so that you could pass the parent ID as a parameter. For instance, the code we just wrote could be re-written as:
1 | $('div.submitbutton', 'div#container').html('Click me!'); |
What’s different to the other one though? Since the parent ID is a seperate parameter, it could be a cached object. Let’s re-write that code in the most optimized way:
1 2 3 4 | var $container = $('div#container');$('div.submitbutton', $container).html('Click me!');$('div.cancelbutton', $container).html('Click me also!'); |
As you can see, this means you can use the cached parent without jQuery having to find it each time.
4) Use .val instead of .html
I recently built a form in which one of the fields needed to have a character count displayed next to it. Initially, I tried to do this with:
1 | <input id="subject" name="subject" /> |
1 | $('div#character_count').html(1); |
My jQuery would then update the character_count div layer whenever a character was entered in the subject input box.
When I realised that this was really slowing down my application, I decided to switch the div layer to an input layer and update it using .val instead of .html. The result? Much, much faster.
1 2 | <input id="subject" name="subject" /><input id="character_count" name="character_count" value="0" /> |
1 | $('input#character_count').val(1); |
If you’re going to be updating some text in your site regularly, avoid using .html. Use .val to change the value of an input box. Remember, direct DOM manipulation is very slow.
