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 =
</ script >
< 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 >
< 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 =
</ script >
< 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 >
< button >Click Here!</ button >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
07 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...