jQuery $(document).ready() function
A page can't be manipulated safely until the document is ready. jQuery's $( document ).ready() waits for the HTML Document content to be loaded fully and become ready, after rendering all the elements into the window object or in a nutshell, completes the loading of the body.
Here we use $(document) to create a jQuery object from the document. Then .ready() function is called on that jQuery object, then pass the function we want to execute.
Here we use $(function) can be used as an alternative to $(document).ready() . This method is not compatible with "onload" attribute. Generally it is not used with < body onload="" >. If you want to use the load attribute you can use .load() function in jQuery instead of .ready() function.
The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. Everything inside the $(document).ready() function will load as soon as the DOM is loaded and before the page contents are loaded. Before you can safely use jQuery you need to ensure that the page is in a state where it's ready to be manipulated. With jQuery, we accomplish this by putting our code in a function, and then passing that function to $(document).ready() . All jQuery methods in our examples, are inside a document ready event:
With $(document).ready() , you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.