jQuery $(document).ready() function
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
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
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 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:
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.