jQuery $(document).ready() function
The jQuery document ready event occurs when the DOM (document object model) has been loaded. While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. 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. 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. Syntax
$(document).ready( function )
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.
Syntax
$( function )
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:
$(document).ready(function(){
// DOM manipulation code
});
This is to prevent any jQuery code from running before the document is finished loading (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.
example
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
console.log('ready!');
});
</script>
</head>
<body>
<p>Wait for document is ready ...</p>
</body>
</html>
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.
Related Topics