• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

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

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

$(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:

ReadyExample ReadyExample1

Category: jQueryTag: 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.

Previous Post: « 10 Tips To Improve MongoDB Security
Next Post: JQuery Error Event Example jquery»

Reader Interactions

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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

EJB 3.0 Timer Services

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact