Articles → JQUERY → Ready Function In Jquery

Ready Function In Jquery

If you are thinking of learning Jquery then this is your first step.

Prerequisite

Before you read this article you should have

Hands on experience in creating HTML page.
Basic knowledge of JavaScript.
Basic knowledge of event handling in JavaScript.

Introduction

$(document).ready function executes when the DOM is ready but before the contents gets loaded.

Note - When the HTML is rendered by the browser then we can say that the DOM is ready.

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.

Consider an example in which we have an image control, when the image control is rendered on the browser so it means DOM is ready then $(document).ready function executes. But when the image in the control gets loaded then windows.onload fires.

Syntax

$(document).ready(function() {
	//  Add your code here
});

Adding Events In $(Document).Ready()

In the traditional programming if you want to attach any event with the control then you have to add behavioral mark up.

For example

<a href='#' onclick="javascript:alert('this is the click event');">Click Me</a>

But in case of $(document).ready() function we can add events.

For example

$(document).ready(function() {
	$('a').click(function() {
		alert("you clicked me!");
	});
});

It means that the click event in added to all the anchor tags on the page.

Full Code

<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
      <a href="#">Click Me</a>

      <script>
          $(document).ready(function () {
              $("a").click(function () {
                  alert("You clicked me!");
              });
          });
      </script>
  </body>
</html>

Try It

Posted By -	Karan Gupta

Posted On -	Monday, October 24, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**