What is the starting point of code execution in jQuery ?
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
Please Login to comment...