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

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

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.

       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:



  • linkedin
  • reddit


I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate