$(document).ready() function in jQuery

$(document).ready() function in jQuery

In this article, I am going to discuss the $(document).ready() function in jQuery with Examples. This is the most important function that we need to understand in jQuery.

What is $(document).ready() function in jQuery?

$(document).ready() is an event in jQuery that is fired only when the whole DOM is fully loaded and ready to be manipulated by jQuery. This document.ready event is to prevent any jQuery code from running before the document is finished loading (is ready). This is the earliest safe point of the page loading process where we can manipulate our DOM elements. This allows you to write your jQuery (or JavaScript) code before the body tag.

Note: The document.ready event fires just after the DOM is loaded but before all the images, CSS, frames, etc are fully loaded.

Syntax:

Following is the syntax to use $(document).ready()

$(document).ready() function in jQuery

Example:

Now let us see these things by practical examples of how this event works actually.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>$(document).ready() event in jQuery</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                alert("Button is Clicked");
            });
        });
    </script>
    <button id="demo">Click Me</button>
</body>
</html>

Output: Now run the above HTML code and you will get the following page.

$document.ready() function in jQuery with Examples

Now, click on the Click Me button and it will give you the following alter box.

What is $document.ready() function in jQuery?

As you can see, in our example, our code is wrapped inside the $(document).ready(). Also, notice that our button element is placed at bottom of our script. But that is working perfectly fine as document ready event has not fired until the DOM elements are fully loaded. But what if we remove that $(document).ready() from our code as shown in the below example.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>$(document).ready() event in jQuery</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
                $('#demo').click(function () {
                alert("Button is Clicked");
            });   
    </script>
    <button id="demo">Click Me</button>
</body>
</html>

Now, with the above changes in place, run the code and you will get the following page and click on the Click Me button.

What is $(document).ready() in jQuery?

Here nothing is occurring when we are clicking the button because in this case when our code is executing, our script tag is at the top of the button element so our script is executing before the button element is loaded. So, our selector is unable to find “#demo”.

But if we put our script code after the button element as shown in the below example, then our output will be OK and fine. Because by the time of executing our script, the button element is loaded.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>$(document).ready() event in jQuery</h1>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
                $('#demo').click(function () {
                alert("Button is Clicked");
            });
       
    </script>
</body>
</html>

In the next article, we will elaborately discuss everything about using CDN in jQuery. Here, in this article, I try to explain $(document).ready() event in jQuery with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published.