9 errors that JQuery developers should be aware of _jquery

The JQuery is-easy to-use "Sometimes we just forget that it's not CSS." While using CSS, we don ' t have to give much thought to performance, because it's so fast that it's not worth the effort to Optimize it. But when it comes to the real world, JQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even it. Also, it ' s so easy to forget about some functions and we keep the using the old (and Not-so-good) ones.

Let's take a look at a few's most-common-and-easiest-to-fix mistakes while using jQuery in your projects.

1. You aren ' t using the latest jQuery version
Each version update means higher performance and several bug fixes. The current stable-1.7.2, and I ' m pretty sure you know about plenty of sites of the using developed and 1.6. OK, OK, you can ' t just update every old site for every jQuery update (unless your client are paying you.) but you Hould at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time for you start a new project.

2. You aren ' t using a cdn-hosted copy of JQuery
How many unique visitors your ' ve got last month? I bet the number is still under 1 billion, right?
So your ' d better use Google ' s copy of JQuery instead of yours. If your user still has the cached file of Google ' s website (or from many other sites, that uses its CDN) he browser'll j UST get the cached version, improving a lot your website ' s performance. can use it with copying & pasting this HTML:

<script type= "Text/javascript" src= "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></ Script>

3. Aren ' t using a fallback for CDN version
I know I said Google is awesome and stuff, but they can fail. So, every time your rely upon external sources, make sure to have a local fallback. I ' ve seen this snippet in the HTML5 boilerplate source code and just found it amazing. Should use it too:

<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>window.jquery | | document.write (' <script src= ' js/libs/jquery-1.7.2.min.js ' ><\/script> ') </script>

4. You aren ' t chaining stuff
While doing common operations, your don t need to call the element every time you want to manipulate it. If you are doing several manipulations in a row, use chaining, so jQuery won ' t need the element twice.

Instead of this:

$ ("#mydiv"). Hide ();
$ ("#mydiv"). CSS ("Padding-left", "50px");

Use this:

$ ("#mydiv"). Hide (). CSS ("Padding-left", "50px");

5. You aren ' t caching stuff
This is one of the most important performance tips. If you'll call a element at least twice, you should cache it. Caching is just saving the jQuery selector into a variable, so if you are need to call it again you ll just reference the Vari Able and jQuery won ' t need to search the whole DOM tree again to find your element.

/* Can use it this way because almost every jQuery function returns
The element, so $mydiv'll be equal to $ ("#mydiv"); Also it ' s good to
Use the $mydiv so know it ' s a jQuery caching var * *

var $mydiv = $ ("#mydiv"). Hide ();
[.. lot of cool stuff going in here ...]
$mydiv. Show ();

6. You aren ' t using pure JS
Specially for attributes modification, we have several built in methods do with stuff JavaScript. You can even the "convert" JQuery objects back to DOM nodes to use them with simpler methods, like this:

$mydiv [0].setattribute (' class ', ' awesome '); Can convert JQuery objects to DOM nodes using $JQOBJ [0]

7. aren ' t checking plugins before including in your site
You are know, the jQuery is isn't the hardest thing in the world to code. But Good JS (and JQuery), which is pretty hard. The bad news is this while you aren ' t a good programmer, your ' ll have to rely on trial and error to find out what is good a nd what isn ' t. A few points you must is aware of while including a plugin in your project:

File Size (the easiest to check!) –if a ToolTip plugin are bigger than jQuery source, something is really wrong;
Performance–you can try it with Firebug and others. They give to understand charts and you'll know when something are out of the place;
Cross-browsing–test, at least in IE7, but Chrome, Firefox, Safari and Opera are good ones to try Also
Mobile–don ' t forget that everything is getting mobile. If the plugin works, or at least doesn ' t crash your mobile browser
8. Aren ' t open to remove jQuery
Sometimes it ' s just better to remove it and use simple ol ' CSS. Actually if you are want, for instance, a opacity hover, or transition can do with CSS along with good browser support. And there ' s no way jQuery can beat plain CSS.

9. Are using JQuery for server side tasks
I know that masking and validating are good, but don ' t rely just in jQuery for those. You are need to recheck everything on the server side. This is especially important if you are thinking about using AJAX. Also, make sure everything would work with JS disabled.

So, it ' s your turn!

Do your have anything you should is on this list? Share your thoughts!

About the Author