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