jQuery Document Ready function

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 makes 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.

$( document ).ready(function() {
// jQuery methods here
});

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:

$(function() {
// jQuery methods here
});

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:

$("p").click(function(){
// action goes here!!
});


Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.