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);
Read Also: Performance boosting tips
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);
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.