What is Jquery document.ready function $(document).ready(function() in jquery and when to use it
- Document.ready function fires as soon as the DOM is loaded and ready to be manipulated by script.
- Document.ready function is the earliest point in the page load process where script can safely access element in the page's HTML DOM.
- Document.ready function events is fired before all the images, css etc.. are fully loaded.
Sample code for document ready
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
alert("Welcome");
});
});
</script>
</head>
<body>
<input type="button" value="click" id="button1">
</body>
</html>
Another way of writing (document.ready function) document ready function mentioned bellow
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$("#button1").click(function(){
alert("Welcome");
});
});
</script>
</head>
<body>
<input type="button" value="click" id="button1">
</body>
</html>
Example 1 without (document.ready function) document ready function.
Here you get to know why we use document.ready function with the bellow example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#button1").click(function(){
alert("Welcome");
});
</script>
</head>
<body>
<input type="button" value="click" id="button1">
</body>
</html>
By the Time the Jquery Script is executed the Button Element is not loaded into the Browser DOM so the script not able to find #button1 id in the DOM, because of that the above example doesn't work.
What is the solution for that we have to use our code inside $(document).ready function so it will fully loaded all the html element so that jquery can find #button1.
Example 2 without (document.ready function) document ready function.
Placing our Jquery code just before the closing body Element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="click" id="button1">
<script>
$("#button1").click(function(){
alert("Welcome");
});
</script>
</body>
</html>
Now By the time the jquery is executed the button element already loaded. so the above code will work without document.ready function.
Conclusion : document.ready function in Jquery ensures that, all Html element is loaded into the Browser DOM then it will execute our Jquery code.
Excellent code Example given, Thanks for the information.
ReplyDeleteThe above given codes are understandable.
ReplyDeleteThanks for the information.
best example .
well, your code is working correctly. Thank You
ReplyDeleteThanks for the tutorial. Very simple to understand.
ReplyDeletevery useful and easy understand. thank you very much.
ReplyDeleteThanks for the information. Its Easy to understand and the examples are the best for the $(document).ready(function()
ReplyDeleteAnd without $(document).ready(function() is a new thing that i never heard. Thank you once again.
This code is very simple and easy to understand for the starters like us.
ReplyDeleteVery easy to understand Thanks.
ReplyDeleteIt very simple & Shortly
ReplyDeleteYa, it's good and easy to understand.
ReplyDeleteSimple and super
ReplyDeleteIt's pretty good.I got some idea about jquery .thanks
ReplyDeletebetter and understandable..
ReplyDelete