1. Set Context and improve the performance
On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.
$("input:radio", document.forms[0]);
2. Live Event Handlers
Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:
$('button.someClass').live('click', someFunction);
This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.
3. Checking if an element exists
Use following snippet to check whether an element exists or not.
if ($("#someDiv").length) {
//Enjoy!!! it exists...
}
4. Line breaks and chainability
Instead of doing:
$("a").hide().addClass().fadeIn().hide();
You can increase readability like so:
$("a")
.hide()
.addClass()
.fadeIn()
.hide();
5. Alternate way of Document Ready
//Instead of
$(document).ready(function() {
//document ready
});
//Use
$(function(){
//document ready
});
6.Selecting immediate child of an elements
If you want to count all the DIVs present in the element #outer
<div id=”outer”>
<div id=”immediat1″></div>
<div id=”immediat2″>
<div id=”inner”>
</div>
<span><span>
</div>
//jQuery code to count child elements
$("#foo > div").size()
7. Getting Parent DIV using closest
If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:
$("#searchBox").closest("div");
8. Disable right-click contextual menu
There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});