Skip to content
Related Articles

Related Articles

Improve Article

What is the starting point of code execution in jQuery ?

  • Last Updated : 14 Jul, 2021
Geek Week

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({....})); 

or 

$(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  -->
            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>

Output:

document ready




My Personal Notes arrow_drop_up
Recommended Articles
Page :