Why document.ready function is used in jQuery ?

The ready() function in jQuery executes the code only when the DOM (Document object model) is fully loaded. It is an inbuilt function in jQuery. It can fire before loading of all images, etc. but only when the DOM is ready. The code inserted between $(document).ready() is executed only when the page is ready for JavaScript code to execute. We should not use the ready() method together with the . Syntax We can use the ready() function in two ways, as given below. The commonly used syntax of the ready() function is as follows. $(document).ready(function) As we can use the ready() function only for the current document, so the selector can be skipped. We can also write the above syntax as follows. $(function) Both of the above ways are valid to use. The second syntax can be used as an alternative to the first syntax. It can be clear from the following piece of code. $(document).ready(function() { $("p").css("color", "red"); }); The above code is equivalent to the below code. $(function() { $("p").css("color", "red"); }); Some experienced developers use the shorthand $() rather than using $(document).ready(), but If we are writing the code for non-experienced people, so it's better to use the long-form.