jQuery $(document).ready() function

The jQuery "document ready" event triggers when the DOM (document object model) finishes loading. In contrast to the JavaScript load event, which only activates once all assets are received, the "document ready" event fires as soon as the DOM structure is complete. This event is an optimal point for attaching event handlers and executing jQuery code, ensuring that your JavaScript functions effectively interact with the fully loaded document. Adhering to this practice not only promotes efficient code execution but also enables the placement of JavaScript code in the head section, preceding the body of the document.

$(document).ready()

Safe manipulation of a page's elements necessitates waiting until the document is fully ready. jQuery's $( document ).ready() function ensures that the HTML Document content is completely loaded and prepared, encompassing the rendering of all elements within the window object. In essence, it signifies the culmination of body loading, providing a secure environment for subsequent interactions and modifications.

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.

DOM

The occurrence of the document ready event indicates the complete readiness of the page's DOM, providing a secure context for manipulation, unaffected by potential incomplete DOM elements. Any code encapsulated within the $(document).ready() function will promptly execute as soon as the DOM is prepared, preceding the full loading of page contents. To ensure the safe utilization of jQuery, it is imperative to place your code within a function and subsequently associate that function with $(document).ready(). All jQuery methods in our examples, are inside a document ready event:

$(document).ready(function(){ // DOM manipulation code });

Implementing this approach ensures that no jQuery code executes prior to the completion of document loading. Waiting for the document to attain full readiness is a recommended practice, as it safeguards against potential issues. Additionally, adhering to this practice grants the advantage of situating JavaScript code ahead of the body within the head section of the document.

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>

Conclusion

By utilizing $(document).ready(), you can orchestrate the loading and activation of events prior to the window being fully loaded. Any content enclosed within its parentheses becomes immediately functional the moment the browser records the DOM, enabling seamless implementation of concealment, revelation, and various other effects as soon as the user's initial view of the page elements takes place.






Related Topics
  1. What is jQuery?
  2. How jQuery Works
  3. jQuery Fundamentals
  4. jQuery method chaining
  1. jQuery Hello world example