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

Syntax

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.

$(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.

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.

Example

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.

<!DOCTYpe html>
<html>
<head>
<title> jQuery ready() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css({"font-size": "30px", "color": "blue", "background": "yellow", "fontWeight": "bold"});
$("#p2").css({"fontSize": "20px", "fontWeight": "bold", "color": "red"});
$("#p3").css({"color": "blue"});
});
});
</script>
</head>
<body>
<p id = "p1"> Welcome to the javaTpoint.com </p>
<p id = "p2"> This is an example of using the $(document).ready() function. </p>
<p id = "p3"> This is a third paragraph element </p>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
</body>
</html>

Test it Now

Output:

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