TOP 5 JQuery Mistakes

Posted on by jordanhaines

jQuery is a big part of web development and weather you love it or hate it, its hear and hear to stay for the forceable future. Here is a list of mistakes that I have noticed when working with jQuery.

1 – Not storing elements in variables

Every time you run $(selector), you are running the same function over and over again. It is better to store the element in a variable which will increase the speed at which a script can be executed.

Bad way

$('.myButton').click();
$('.myButton').prop('disabled', true);
$('.myButton').hide();</code>

Good way

var $button = $('.myButton')
$button.click();
$button.prop('disabled', true);
$button.hide();

2 – Add CSS from JQuery

When using JQuery to change elements on certain states like an mouse over state, it is bad practise to use JQuery to add CSS inline when you want to make a visual change.

The correct way would be to add and remove a class name to the element which you are targeting with your Javascript. By doing it this way you keep your CSS separate in its own file. An example is given below:

Bad Way

var someElement = $(".some-class");
someElement.on('mouseenter',function(){
$(this).css({ //20 css properties });
});

Good Way

var someElement = $(".some-class");
someElement.on('mouseenter',function(){
$(this).addClass("element-mouseover");
});

3 – Not loading JQuery from Google CDN

There are two ways to load JQuery, One is locally. This is where you download your own copy of JQuery and host it on your server. The second is to use Google’s CDN.

Google host a number of libraries on there CDN and JQuery is on of them, This is the best and the preferred option.

  • The most important benefit is caching. If any previously visited site by user is using JQuery from Google CDN then the cached version will be used. It will not be downloaded again.
  • It reduces the load on your web server as it downloads from Google server’s.
  • You will be also benefitted from speed point of view. As Google has dozen’s of different servers around the web and it will download the JQuery from whichever server is closer to the user. Google’s CDN has a very low latency, it can serve a resource faster than your webserver can.
  • As the js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

Google hosted libraries can be found here (https://developers.google.com/speed/libraries/)

4 – Not Chaining

In JQuery if you are planning to perform several operations on 1 element, instead of having JQuery call the element every time, you can chain your calls together. This is more efficient and is the fastest way to do it. An example is given below

Bad Way

$(‘#element’).show();
$(‘#element’).addClass(‘open’);
$(‘#element’).removeClass(‘closed’);

Good Way

$(‘#element’).show().addClass(‘open’).removeClass(‘closed’);

5 – Not checking plugins

The great thing about JQuery is that is extremely popular and if you can’t do something in JQuery the chances are there are a few plugins which can help you. While this is a good thing, it must come with a massive caution.

Please do your research on the plugin and also check if you even need to us a plugin to get what you want done before including it in your code.

I have seen time and time again plugins being used in JQuery when it is not necessary. The more plugins you use the more your user will need to download before your site can work correctly.

This entry was posted in JQuery, Web Development. Bookmark the permalink.