Tips and Tricks for powerful developers

Here we will discuss few jQuery techniques and Tricks for powerful developers which is useful for library. So starts with a few tips about performance & continue with little introductions to some of the jQuery library’s more features.

Use selectors as simple

You should try to optimize the way you get elements not to force jQuery into traversing the whole DOM tree, which is too slow.

 $('div[data-selected="true"] a') // Classy, but slow
 $('div.selected a') // So so
 $('#mydivId') // Good

Always use latest version of jQuery

Every release of the jQuery library optimizes and fixes bugs, so most of the time upgrading involves only changing a script tag only.
Include jQuery directly from CDN servers, which provide free CDN hosting for a number of libraries.

Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Microsoft CDN:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>

An Empty jQuery Object

Somehow, you need to create an empty jQuery object to fill it in with the add() method later.

var container = $([]);
container.add(element);

Objects as Arrays

// Selecting all the navigation anchors:
var anchor = $(‘#nav a’);

If performance is always first choice, then simply use a for (or a while) loop instead of $.each(), that make your code several times faster. And checking the length is also the only way to check whether your data contains any elements.

if(buttons.length){
for(var i=0;i<anchor.length;i++){
....
}
}

Use of HTML5 Data Attributes

With the help of jQuery data() method, HTML5 data attributes are pulled and are available into scripts:

<div id="div_one" data-title="Div title" data-last-score="40" data-point="1" data-options='{"name":"Tim"}'>
 ...
</div>

$("#d1").data("title"); // "Div title"
$("#d1").data("lastScore"); // 40
$("#d1").data("point"); // 1;
$("#d1").data("options").name; // "Tim"

Want your code to be use on jQuery plugin?

Creating a jQuery plugin is easier now:

 (function($){
 $.fn.your_plugin = function(){
 // Your code goes here
 return this;
 };
 })(jQuery);