Code has been added to clipboard!

Making Sure Your Code Is Safe: jQuery document ready Method

Reading time 1 min
Published Jan 10, 2018
Updated Oct 10, 2019

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.

Example
$(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:

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

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

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 15/05/2021
2287 People Used
Only 92 Left
Rating
5.0