JQuery $ (document). Ready ()

Table of Contents

• JQuery Document Ready Example
• Multiple Document Ready Listeners

Whenever you use a jQuery to manipulate your Web page, you wait for until the document ready event has fired. The document ready event signals that the DOM of the page are now ready, so can manipulate it without worrying that par TS of the DOM have not yet been created. The document ready event fires before all images etc. is loaded and after the whole DOM itself was ready.

JQuery Document Ready Example

Here are a jQuery document Ready Listener Example:

$ (document). Ready (function () {    //dom Manipulation code});

You call JQuery's $ function, passing to it the document object. The $ function returns an enhanced version of the document object. This enhanced object has a ready() function of you can call and to which you pass a JavaScript function. Once the DOM is ready and the JavaScript function is executed.

Inside the function passed ready() to the method, you can execute all the JQuery and JavaScript code of need, in order to I Nitialize/enhance the HTML elements in your page. You'll see many examples of this, in the following pages.

Multiple Document Ready Listeners

JQuery allows you-register multiple document ready listeners. Just call $(document).ready() multiple times. Here are a multiple document ready listener example:

$ (document). Ready (function () {    //dom Manipulation code}), $ (document). Ready (function () {    //dom manipulation Code});

The listener functions registered in this example would both get called when the DOM was ready. They'll get called in the order they were registered.

Registering multiple document Ready event listeners can is really useful if you include HTML pages inside other HTML pages (e.g. using server side include features of your Backend/web server). Need some page initialization to occur both in the outer and inner page. Thus both the outer and inner page can register a document ready listener, and perform the page initialization they both n Eed.

JQuery $ (document). Ready ()