jQuery ready() Event

The jQuery ready event triggers when DOM (Document Object Model) is fully loaded.

Syntax of Ready Event

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

The function parameter is required. This is called after the document is fully loaded. The above ready event syntax is equivalent to this given syntax.

$(function() {
  // jquery code goes here
});

All the jquery codes are written within this ready event. This bound the all functions within it and triggers once the document is fully loaded. This increases the web page performance.

Example

<style>
.box {
	width: 200px; 
	height: 150px; 
	border: 2px solid black; 
	padding: 20px; 
} 
</style>

<div class="box">Hover over me!</div> 

<script>
$(document).ready(function(){ 
function hoverin() {
$(this).css({"background-color":"#ffffe0"});
}
function hoverout() {
$(this).css({"background-color":"blue"});
}
$("div.box").hover( hoverin, hoverout);  
}); 
</script>

Output of the above code

In the above example, all the jquery code goes within the ready() function.