jQuery ready() Method

jQuery Events

The ready() method specifies a function to be executed when the DOM is fully loaded.

The correct approach is to wait for the document to be fully loaded and ready before using it.

If a method is run before the document is fully loaded, the following are some examples of operations that fail:

• Try to select an element that has not been created yet

• Try to get the size of an image that has not been loaded yet

Syntax:

The ready() method is usually used with an anonymous function:

$("document").ready(function(){
　　//　Handler for calling ready()
　　});

jQuery has a shorter method to handle the document ready event:

$((function(){
　　//　Handler for calling ready()
　　});

Example

Display a message when the DOM is loaded:

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

Use a shorter syntax to display a message when the DOM is loaded:

$((function(){
　　$("p").text("The DOM has now been loaded, and it can be manipulated.");
});

Use ready() to make a function available after the document is loaded:

$("document").ready(function(){
　　$("button").click(function(){
　　　　$("div").slideToggle();
　　});
});

Parameter Values

jQuery Events