What is the starting point of code execution in jQuery ?

What is the starting point of code execution in jQuery ?

Last Updated : 05 Aug, 2024

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

Output:

What is the starting point of code execution in jQuery ?

L

lokeshpotta20

Improve

Article Tags :

Similar Reads

What is the use of .each() function in jQuery ?

The each() function in jQuery iterate through both objects and arrays. Arrays that have length property are traversed from the index 0 to length-1 and whereas arrays like objects are traversed via their properties names. Syntax: $.each('array or object', function(index, value){ // Your code }) In th

What is the difference between position() and offset() in jQuery ?

Both the jQueryUI method the returns the object which contains integer co-ordinate properties of the top and left positions. The positions of top and left coordinates are returned in pixels. Both functions are applied only on visible elements, not on hidden elements. Example: The example gives top a

What is the use of ready() function in jQuery ?

In this article, we will see how to use ready() function provided by the jQuery library. The ready() function is used to execute some javascript code only when the HTML DOM is fully loaded. We should not manipulate the DOM until it is fully loaded. ready() method comes very handy to detect when the

What is the difference between parent() and parents() methods in jQuery ?

The jQuery parent() and parents() methods return the elements which are ancestors of the DOM. It traverses upwards in the DOM for finding ancestors. In this article, we will learn about the difference between parent() and parents() methods. parent() Method: The parent() method traverse only one leve

Which function is used to prevent code running before document loading in jQuery ?

In this article, we will learn how to prevent code from running, before the document is finished loading. Sometimes we might need to run a script after the entire document gets loaded, for example, if we want to calculate the size of images in the document then we need to wait until the entire docum