jQuery ready() Method

Last Updated : 07 Jul, 2023

The jQuery ready() method helps to load the whole page and then execute the rest code. This method specifies the function to execute when the DOM is fully loaded.

Syntax:

$(document).ready(function)

Parameters: This method accepts a single parameter function which is mandatory. It is used to specify the function to run after the document is loaded.

Return Value: This method returns the document after performing the ready() method.

Example 1: This example illustrates the ready() method in jQuery.

HTML

<!DOCTYpe html>
<html>
 
<head>
    <title>The ready Method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "green");
                $("p").css("font-size", "40px");
                $("p").css("font-weight", "bold")
            });
        });
    </script>
    <style>
        div {
            text-align: center;
            width: 60%;
            min-height: 100px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <div>
        <p>Welcome to</p>
        <p>GeeksforGeeks!</p>
        <!-- click on this button -->
        <button>Click Here!</button>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will animate the text in ready() method.

HTML

<!DOCTYpe html>
<html>
 
<head>
    <title>The ready Method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").animate({ fontSize: "+=14px" });
            });
        });
    </script>
    <style>
        div {
            text-align: center;
            width: 60%;
            min-height: 100px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <div>
        <p>Welcome to</p>
        <p>GeeksforGeeks!</p>
        <!-- click on this button -->
        <button>Click Here!</button>
    </div>
</body>
 
</html>

Output:

jQuery resize() method

kundankumarjha

Improve

Article Tags :

jQuery ready() Method

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?