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:
