Hello World Program OR details about document.ready event in jQuery.

By Published jQuery 


<!--This example will show you how to write jQuery code actually and what is document.ready event in jQuery -->



<!-- we will show an alert "hello world" when the document is ready to be loaded -->



<html>

<head>

<script type="text/javascript" src="jquery.js"></script>



<script type="text/javascript">

alert("first message");

$(document).ready(function(){

  alert("hello world");

 

});

</script>

</head>



<body>

<p>If you had observed, two alerts had appeared saying "first message" and then "hello world".</p>





<p>

The "document" as we know is the second object lies under the DOM model after the Window abject and the events associated with document.ready event is executed when our document is completely interpreted and is ready to be displayed to the user. This event is slightly different from the body onload event in JS which gets executed when the body starts loading whereas document.ready event is executed when the document is completely interpreted by the browser and is only left to be displayed on the browser. It is an advanced method provided by jQuery to simplier the task of executing functions when all objects of the DOM are manipulated.</p>



<p>This event is the most useful because the statements that are defined under this are executed when the complete DOM tree is interpreted by the browser and any event can access any DOM object.</p>



<p>The problem with some events like body onload is that the DOM tree under the body tags are left to be interpreted and when we try to call any element under the body tags, may be our browser doesn't able to find it.</p>



<p>If you want to try this example, them just copy the whole post into the jQuery box below and try it out.</p>



</body>



</html>
0 0 votes
Article Rating

Tags:

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments