jQuery ready() Method

jQuery | ready() Method: Learn about the jQuery ready() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 30, 2022

ready() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the ready() method here.

The ready() method is a built-in jQuery method. This method gets triggered once the DOM is completely loaded. Generally, all the jQuery code and functions are written within this method which has to be executed once the page is loaded.

ready() Method Syntax

$(document).ready(function(){});

It accepts only one required parameter – function. Within this function, we write all our jQuery code that has to be executed once the DOM is loaded. Hence, every jQuery code contains this method in its very first line of code. The below given example showcases how the image is faded out once the document is ready for execution.

jQuery ready() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - Ready</h2>
    <p>Clicking the button disappears the image once the DOM is ready.</p>
    <button>FadeOut Image</button>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <p>This is a jQuery Tutorial for Event Methods.</p>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    <img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>  
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('img').fadeOut()
        });
    });
  </script>
</html>

Output:

jQuery resize() Method

jQuery mousemove() Method

Comments and Discussions!

Load comments ↻