Why we are using $(document).ready(function() in jquery?

This is used to restrict any jQuery code from running before the document is finished loading or document is ready.

It is good practice to wait for the document to be fully loaded and ready before working with it.

This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

• Trying to hide an element that is not created yet
• Trying to get the size of an image that is not loaded yet

Alternate Syntax instead of using document ready event

 $(function(){

   // jQuery methods go here...

});