Updated April 1, 2023
Introduction to jQuery ready
ready () function is a predefined function available in jQuery API. This ready() function is invoked after the document object mode (DOM) has been loaded. Why because this event occurs once the document is ready. It is really bad practice in programming showing the end result without available of all the functions like frames, images, graphics etc.Once all the page resources available to the DOM then only this ready function becomes ready. The ready() function tell us what is going to happen when the ready event fired.The ready() function cannot be used with <body onload=”function()”> tag.
While we are using jQuery code to modifying our web page, you must wait until the document ready event has executed. This document ready event tells us that the DocumentObject Model of the page is ready, so we can modify the code without any hurdle, with which parts of the DOM object have not been created. Whatever logic we write insidethe $(document ).ready() then the ready() function will be executed after the page DOM object is ready.
How does ready() Function Work in jQuery?
Once we write logic to implement the user required web page then we will put or call that logic from (document).ready () function to make it work all the required resources.
Syntax:
$(document).ready (function ())
{
//desired jQuery logic
}Explanation: Accepted Parameters: This ready () function allows to accept only a single parameter which is compulsory. This compulsory function tells us that run the function after the document is loaded.
What is Return Value?
- It returns the document object from the ready () function.
Note: Make it work jQuery application we must import this script in html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Examples of jQuery ready
Following are the example are:
Example #1 – Content with Button
jQuery Code: ReadyContentButton.html
<!DOCTYpe html>
<html>
<head>
<title>ready() function</title>
<!--importing jQuery resource-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
p {
color: red;
text-align:center;
width: 90%;
min-height: 100px;
padding: 10px;
font-size: 25px;
border: 3px solid green;
}
button
{
color: brown;
background: blue;
font-size: 22px;
margin: 2px 0px 0px 300px;
}
h1
{
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>Introduction to ready() function</h1>
<p>This is an Example of Content with Button. </p>
<button>See the Magic</button>
</div>
<!-- jQuery logic -->
<script>
$(document).ready(function(){ //performs ready action
$("button").click(function(){ // displays loaded text after a click
$("p").css("color", "navy"); //set navy color to paragraph text
$("p").css("font-size", "30px"); //set font size to the paragraph text
$("p").css("font-weight","bold") //set font-weight to bold for the paragraph text
});
});
</script>
</body>
</html>Output:
Before Click on See the Magic Button
After Click on See the Magic Button
Example #2 – Button with Alert Box
jQuery Code: ReadyAlertButton.html
<html>
<head>
<title>jQuery Function</title>
<!--importing jQuery resource-->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--CSS Styles-->
<style>
h1
{
color:green;
text-align:center;
}
button
{
color: white;
background: maroon;
font-size: 22px;
margin: 2px 0px 0px 300px;
}
</style>
</head>
<body>
<div class= "myClass">
<h1>The ready() function with Alert Button and Alert Box</h1>
<button>Alert Me</button>
</div>
<!--jQuery logic-->
<script>
$(document).ready(function() { //performs ready action
$("button").click(function() {// displays loaded text after a click
//below alert pop up box alert the user
alert("This is an Alert Box for the example of ready function."); });
});
</script>
</body>
</html>Output:
Before Click Alert Me Button
After Click Alert Me Button
Example #3 – Toggle Content
jQuery Code: ToggleReady.html
<html>
<head>
<title>ready() function</title>
<!--importing jQuery resource-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--CSS Styles-->
<style>
h1{
color:blue;
text-align:center;
}
button
{
color: white;
background: maroon;
font-size: 22px;
margin: 2px 0px 0px 300px;
}
p {
color: orange;
text-align:center;
width: 80%;
min-height: 100px;
padding: 10px;
font-size: 25px;
border: 3px solid violet;
}
</style>
</head>
<body>
<div class="myClass">
<h1>ready function with Toggle Content</h1>
<p class="p">This is an Example of ready() function with Toggle Content.</p>
</div>
<button>Toggle My Content</button>
<!--jQuery Logic-->
<script>
$(document).ready(function() { //performs ready action
$("button").click(function() {// displays loaded text after a click
$(".p").toggle();//when we click button then content collapses
});
});
</script>
</body>
</html>Output:
Before Click Toggle My Content Button
After Click Toggle My Content Button
Now, let’s see something interesting. The following example manipulated HTML elements after loading of these elements since we will include them inside the ‘ready’ function. Thus, they will only get to be executed until the DOM as well as these HTML elements are loaded fully.
Example #4 – Change Format
JQuery Code: ChangeFormat.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Ready Function Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("#demo1").click(function()
{
$("#ID").css("color", "red");
$("#ID").css("font-weight", "400");
$("#ID").css("font-size", "40px");
$("#demo").css("color", "green");
$("#demo").css("font-size","20px")
$("#demo").css("font-weight", "200");
});
});
</script>
<style>
div {
min-height: 80px;
width: 50%;
border: 2px solid red;
border-radius: 5px;
padding: 10px;
text-align:center;
}
</style>
</head>
<body>
<div>
<p id="ID"> Welcome to the </p>
<p id="demo"> Ready Function Demo! </p>
<!-- click on this button -->
<button id="demo1"> Click to change format </button>
</div>
</body>
</html>The above example changes the format of <p> element after the <button> and <p> elements are loaded, since both these elements are inside the ‘ready’ method block. When the button is fully loaded and user clicks it, the <p>elements are manipulated. One of the <p> element is universally selected and manipulated and one is selectively manipulated selected it using its id, ‘#demo’. The output we get is shown below.
Before click on Change Format Button
So when we click the button above, ‘Click to change format’, the format of both the <p> elements is manipulated through java script function code added inside the ‘ready’ DOM function.
After click on Change Format Button
Recommended Articles
This is a guide to jQuery ready. Here we also discuss the Introduction and how does ready() function work in jquery? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
