awesome jQuery Tips And Tricks for Beginner

Please follow and like us:
RSS
Facebook
Facebook
Twitter

jquery tips & tricks

jQuery is still widely used by most of the people because it’s still the easiest way of creating most browser compatible websites. If you like to have as many customers as possible you should definitely use jQuery and surely below jQuery Tips can help you go ahead with it. According to BuiltWith.com still 65% website using it.

If you are going to create a very basic website then maybe performance is not the factor for you but whenever in future if you are going to make it huge you will face very high page load time bad performance on the page if you have used jQuery without using proper performance.

Let’s point out some jQuery Tips And Tricks below!

1. Check jquery version

Always use the latest jQuery version on jquery website here. because most of the time bug fixes come and also major improvements and it can help you with existing issues you are facing. from my personal point if I say please update it always because when our one client was facing issues in his website we found that after updating most of the bugs were removed and also performance improved drastically.

also if you are going to upgrade, you can always use jQuery Migrate plugin for a temporarily solution to incompatibilities.

2. Get matched elements counts

This is very simple tricks to use when you are creating some values and getting content out of it this can be helpful as this will help you to not get the undefined error:

$('element').size();

3. check selectors very cautiously

Every selector performs differently.

top one is fastest and the bottom is slowest:

  • ID selectors:
$('#awesome-element')
  • Element selectors:
$('form')
  • Class selectors:
$('.awesome-element')
  • Pseudo & attribute selectors:
$('[data-attr]'), $(':hidden')

ID and Element selectors are supported by native DOM operations, while attribute selectors take a long time because it checks whole HTML content for all the matching DOM.

4. Adjust heights of columns

This seems to be a highly-requested hack: How to make columns having exactly the same height? cssnewbie have the solution.

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

/*
Usage:
$(document).ready(function() {
equalHeight($(".recent-article"));
equalHeight($(".footer-col"));
});
*/

5. Disable right-click on page

There’s many so many plugins and option available but with jquery, you can do it by simple code as below.

$(document).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
});

6. Find out how much DOM your page contain

the more content your page has, the more time it takes your browser to render it. You can get a quick count of the number of DOM elements on your page by below code:

console.log( $('*').length );

If you find a high amount of DOM element than its necessary to optimize it. You can optimize it by removing the redundant markup and unnecessary wrapping elements. usually, best DOM count should be considered 1200-1500.

7. give preference to data() over attr()

data() and attr() are relying on data attributes initially (read them from element), but the first one associated data with element while attr() writes data attributes to DOM.

Yet again, DOM operations are slow. Use data() where possible, but remember that when you update data it wouldn’t happen on DOM, which might affect other libraries which are relying on data attributes. so choose when it’s effective. this jQuery Tips is really good and fast for you to manipulate DOM and use AJAX for server side data sending.

8. Get mouse cursor x and y-axis

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

<p></p>  

That’s it!

keep on learning new jQuery Tips and share with us in a comment below.

 

Always be happy and make the crazy effort for what you do in life.

Jay Ambe, Namaste (greeting we Hindu people follow same like “bye” in English)

 

Please follow and like us:
RSS
Facebook
Facebook
Twitter