What is the starting point of code execution in jQuery ?

Last Updated : 14 Jul, 2021

The jQuery starts its code execution from the $(document).ready() function which is executed whenever the whole HTML DOM is loaded and is totally rendered by the browser, so that the event handlers work correctly without any errors. This $(document).ready() function load the script only after the whole DOM is loaded by the browser.

It takes time for the browser to get the document ready when we don’t use $(document).ready() function in the script tag. The jQuery in the script may get executed before some content or element on which an event handler or some other function is acting hence this may cause some problems in the webpage, so it is always necessary to start execution whenever the whole DOM is ready. So we use $(document).ready() function.

Syntax:

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

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

$(document).ready() ensures that it gets executed when DOM is loaded. When we want the execution of the script such that all the resources like images, videos and iframes gets loaded, we need to use $( window ).on( “load”, function() { … }).

Syntax:

$( window ).on( "load", function() { ... })

Example:

HTML

<!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"> 
     
    <!-- Including jQuery  -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous"> 
    </script> 
    <style> 
        h1 { 
            color: #006600; 
            text-align: center; 
        } 
        #btn{ 
            text-align: center; 
            background-color:#006600 ; 
            color: white; 
        } 
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> Geeks For Geeks</h1> 
    <button id = "btn"> Click to see the effects</button> 
    <div> 
        <p> 
            When compared with C++, Java codes are   
            generally more maintainable because Java   
            does not allow many things which may   
            lead bad/inefficient programming if used  
            incorrectly. For example, non-primitives   
            are always references in Java. So we   
            cannot pass large objects(like we can do   
            in C++) to functions, we always pass  
            references in Java. One more example,   
            since there are no pointers, bad memory   
            access is also not possible.  
        </p> 
  
    </div> 
    <script> 
        $(document).ready(function (){ 
            console.log("Document is ready") 
            $('#btn').click(function(){ 
            $('p').fadeToggle(1000); 
        }) 
        }) 
    </script> 
</body> 
  
</html> 