JQuery - Difference between $(document).ready() and window.onload()

 

 

$(document).ready()

window.onload()

Execution Point:
$(document).ready() event occurs after the HTML document (DOM) has been loaded. window.onload() event occurs later, when all content (e.g. images, frames) also has been loaded.
DOM vs JQuery:
ready event is specific to jQuery. onload event is a standard event in the DOM.
Quicker:
Execute before onload() Execute after ready()
Requires JQuery:
Yes No
Syntax:

//Load JQuery first before execution
$(document).ready(function){
//Code goes here
}
OR
$(function){
//Code goes here
}

window.onload(){
//Code goes here
}
#Usage
We can have multiple usage on page Can be used only once on page

What is jQuery.noConflict?

jQuery.noConflict is used to avoid conflict of jQuery $ function or variable name used/referred by other JavaScript libraries  (e.g. Prototype, MooTools).

In case of conflict we can use jQuery.noconflict(). After execution of this we can reference JQuery  ($) using jQuery  or own specific keyword.

 

Example 1: Refer JQuery using jQuery

jQuery.noConflict();

// Something with jQuery

jQuery( "div p" ).hide();

// Something with another library's $()

$( "content" ).style.display = "none";

 

Example 2: Refer JQuery using own keyword ($own)

 

Var $own = jQuery.noConflict();

// Something with jQuery

$own( "div p" ).hide();

// Something with another library's $()

$( "content" ).style.display = "none";