Quickly understanding the jQuery Document Ready – $(document).ready() method

Last Updated: June 4, 2021

The jQuery Document Ready makes sure the page DOM is ready for the jQuery codes to execute. Remember to put all your jQuery Codes inside it.

$(document).ready(function() {
    alert('DOM is Ready');
});

We can also use the shorthand $() for $(document).ready():

// Shorthand for $( document ).ready()
$(function() {
    alert('DOM is Ready');
});

Do you want to find one or more HTML element based on some condition? Then this tutorial is meant for you – jQuery Find Method – The Complete Tutorial for Programmers

Example of a Button Click

In this example I will show how to place a button click event in jQuery. I will place this event inside $(document).ready() method.

$(document).ready(function(){
    $("button").click(function(){
       alert('Button is Clicked');
    });
});

Note – In the above code If you do not place the button click event inside the document ready function then your code will not execute.

Therefore always place all your codes inside jQuery Document Ready function.

Changing the color, font, padding, margin or any other CSS property of an HTML element can be easily done by using the jQuery CSS method

The link to download the source codes is given below: