The jQuery document ready function is a way to run JavaScript code after the HTML document is fully loaded and ready for manipulation¹. This ensures that the code will not run before the elements it needs are available².

The syntax for the jQuery document ready function is:

Alternatively, you can use a shorter syntax:

Both syntaxes are equivalent and do the same thing¹.

You can also pass a named function to the jQuery document ready function instead of an anonymous function. For example:

The difference between using $(document).ready() and $(window).on("load") is that the former will run as soon as the DOM (Document Object Model) is ready, while the latter will run after the entire page (including images and iframes) is loaded¹. Depending on your use case, you may want to use one or the other, or both.

Here is an example that shows both functions in action:

In this example, you will see "document loaded" in the console before "window loaded", because the iframe takes longer to load than the rest of the document.