JQuery Ready Event Example

The ready() event fires up a function to execute when document is ready. It will run once the page document object model is ready for JavaScript code to execute. When document object model(DOM) is loaded, the event handler is passed to ready() function which is to be executed after DOM is ready. DOM means all html tags/scripts such as div tag, table tag, paragraph tag etc. It is earliest stage in the page load process. It’s good place to attach all JQuery event handlers and functions. If ready() method is called after DOM is ready, then the new event handler passed in will be executed immediately.

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

JQuery Ready() Syntax

$(document).ready(handler)

It contain parameter called handler which defines function that should be loaded after the document is loaded.

JQuery Ready() Example

<!doctype html>
<head>
<title>JQuery Ready Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Ready Event Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("p").click(function(){
        alert("Welcome to JQuery!!!");
      });
   });
</script>
<body>
   <p>Click Here</p>
</body>
</html>

Try It On JSFIDDLE

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
When you run the example, you will get line Click Here. After clicking on this line, alert box will display with specified message.

When you run the above example, you would get the following output:

JQuery Ready() Syntax

JQuery Ready() Example

About Krishna Srinivasan