JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JQuery Ready Event Example

April 24, 2014 by Krishna Srinivasan Leave a Comment

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

[code lang=”xml”]
$(document).ready(handler)
[/code]

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

JQuery Ready() Example

[code lang=”xml”]
<!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>
[/code]

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

ReadyExample ReadyExample1

Filed Under: jQuery Tagged With: JQuery Events

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved