jQuery: Document ready event

This entry is part 3 of 33 in the series jQuery Tutorial

In this simple jQuery program, we have a document ready event.


The $ tells us that document is a jQuery object and it accesses a jQuery method called ready().

This ready() method is a way to check that the document we are accessing has all its elements (h1, body, p, span etc) loaded.

For example, we need to ensure that <h1> is ready before changing the text wrapped inside the heading tags.

Ready() is only one of the jQuery methods and this method is associated with document object.

Its been said that this document ready method is so common that the jQuery team develops a shorter method to write it.


Look also at how we update <h4> using a jQuery method.  This line here will execute after the document is fully loaded.

$('#demo').html('Document is ready and loaded');


<!DOCTYPE html>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        $(function () {
            $('#demo').html('Document is ready and loaded');
<h4 id='demo'>Document Not Ready</h4>
Try The Code
Series Navigation<< jQuery: Set up the source file
jQuery: Document.ready vs windows.load >>