Difference between $(document).ready and $(window).load method in jQuery

$(document).ready()

• Executes when HTML Document is loaded and DOM is ready
• The Document Object Model (DOM) is a model that represents the HTML elements on a page. JavaScript can access these elements as a selector on the web page to manipulate and edit them.
• The purpose of the ready method is that it should occur as soon as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
• You can use multiple ready method.
• As ready() method can only be used on the current document, so no selector is required:

$(window).load()

• onload method executes when complete page is fully loaded, including all frames, objects and images.
• The onload event is a standard event in the DOM
• You can use only one load event.

You can write document ready method in 4 different ways as following :

1st:

    $(document).ready(function() {
    //YOUR CODE HERE
    });

OR

2nd:

    $(function() {
    //YOUR CODE HERE
    });

OR

3rd:

    jQuery(document).ready(function() {
    //YOUR CODE HERE
    });

OR

4th:

    jQuery(function() {
    //YOUR CODE HERE
    });

Shortest and widest use of writing the document ready method is 2nd because it is very short. Most experienced developers choose the 2nd option.

You can write window load method in 2 different ways as following :

1st:

$(window).load(function() 
{
  //YOUR CODE HERE
});

OR

2nd:

jQuery(window).load(function() 
{
  //YOUR CODE HERE
});

Example of HTML DOM (Document Object Model). Tree Structure.