Javatpoint Logo
Javatpoint Logo

jQuery ready() function

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 <body onload = "">.


We can use the ready() function in two ways, as given below.

  • The commonly used syntax of the ready() function is as follows.
  • 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.

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.

The above code is equivalent to the below code.

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.

Parameter Values

The ready() function has only a single parameter value defined as follows.

function(): It is the mandatory parameter that specifies the function which executes after the document is loaded.

Let's see an example of using the $(document).ready() function.


In this example, there are some paragraph elements and a button. Here, we are using $(document).ready() function to change the style of the given paragraphs.

Test it Now


After the execution of the above code, the output will be -

jQuery ready() function

After clicking the given button, the output will be -

jQuery ready() function

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA