$(document).ready()

Tutorials:Introducing $(document).ready()

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don't have to put any "behavioral" markup in the HTML. You can separate all of your JavaScript/jQuery into a separate file where it's easier to maintain and where it can stay out of the way of the content. I never did like seeing all those "javascript:void()" messages in the status bar when I would hover over a link. That's what happens when you attach the event directly inside an <a href> tag.

On some pages that use traditional JavaScript, you'll see an "onload" attribute in the <body> tag. The problem with this is that it's limited to only one function. Oh yeah, and it adds "behavioral" markup to the content again. Jeremy Keith's excellent book, DOM Scripting, showed me how to create an addLoadEvent function to a separate JavaScript file that allows for multiple functions to be loaded inside it. But it requires a fair amount of code for something that should be rather straightforward. Also, it triggers those events when the window loads, which leads me to another advantage of $(document).ready().

With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.

Tutorials:Multiple $(document).ready()

Some advanced tips for working with $(document).ready()

One more great thing about $(document).ready() that I didn't mention in my previous tutorial is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your JavaScript file with them.

It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free.

You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:

 <script src="/scripts/jquery.js"></script>
 <script src="/scripts/common.js"></script>
 <script src="/scripts/homepage.js"></script>

You could also do something like this inside a single .js file:

 $(document).ready(function() {
   // some code here
 });
 
 $(document).ready(function() {
   // other code here
 });

A final note: Here's an excellent tip for shrinking your code. There's a shortcut available for $(document).ready(), you can write $(function(){ ... }) instead, like so:

 $(function() {
   // do something on document ready
 });

A function passed as an argument to the jQuery constructor is bound to the document ready event. This way you can have even shorter code!

Examples

Example 1

Displays a message, when DOM is ready:

$(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});
  });
  </script>
  <style>p { color:red; }</style>
</head>
<body>
  <p>
  </p>
</body>
</html>

Try it yourself

Example 2

Executes the function when the DOM is ready to be used.

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

Example 3

Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

Example 4

Usually write like this:

$(function() {
  // Your code here...
});

Was this information helpful?

Yes No