Making Sure Your Code Is Safe: jQuery document ready Method

jQuery document ready: Main Tips

• The document ready jQuery method runs a function once the DOM is fully loaded.
• By using this method, you can run JavaScript code as soon as the DOM becomes safe to work with.

Usage and Syntax of jQuery .ready()

The jQuery document ready method detects when the DOM is fully loaded and then runs the code. It understands when a page can be modified safely and doesn't let the code run before that happens.

$(document).ready(() => {
    $("button").click(() => {
        $("img").slideToggle();
    });
});

If you need some assets to be loaded (for example, images), the .load() method should be used. jQuery document ready only waits for the DOM itself to be ready.

The syntax for document ready jQuery method is as follows:

$(document).ready(function);

You can also skip the selector and the name of the method:

$(function);

In the example below, jQuery document ready method is implemented using this simplified syntax:

$(function(){
    $("button").click(() => {
        $("img").slideToggle();
    });
});

Note: it is advised to use the standard (not simplified) syntax, as it helps avoid unexpected results.