jQuery Document Ready function

As jQuery selectors allow you to select and manipulate HTML elements. A page can’t be manipulated safely until the document is “ready.”

jQuery Document Ready function make sure that function available after the document is loaded.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:

  • Trying to hide an element that is not created yet
  • Trying to get the size of an image that is not loaded yet

A code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

This is to prevent any jQuery code from running before the document is finished loading (is ready).

Tip: The jQuery also provides an even shorter method for the document ready event:

Few Examples of jQuery:

Set a CSS Property:
$("p").css("background-color", "yellow");

Set Multiple CSS Properties:
$("p").css({"background-color": "yellow", "font-size": "200%"});

Adds one or more classes:
$("h1, h2, p").addClass("blue");

jQuery Syntax For Event Methods:


Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.