What is Document Ready Event and how to use it ?

This event prevents any jQuery code from running before the document is finished loading (is ready)

It waits for the document to be fully loaded and ready before working with it.

You can keep JavaScript code before the body of your document, in the head section.

$(document).ready(function(){

   // jQuery methods go here . . .

});

You can also use an even shorter method for the document ready event :

$(function(){

   // jQuery methods go here . . .

});

You can use either way. 

Preferred is : Document Ready Event