Jquery Document Ready

Jquery comes with two versions i.e. the production version which is compressed or minified to make it easier to download to your user’s website. It is light weight so it will be downloaded quickly and will work fast. The other version is the uncompressed or development version which is formatted in such a way that the developers can understand it well that how the code is working. Typically you should download both the versions of Jquery. While developing you should use the development version and after the development is completed use the minified or production version.

You can download the Jquery from the Jquery website i.e. www.jquery.com.

Creating your first page in Jquery enabled page

It needs to have a Jquery library included in the page. Most of the time it is be included in the head section of the page. Then rest of the code will follow up. In an example we are going to run a code when the page is loaded. With the help of JavaScript we can do it in the following way:

function runOnLoad(){

alert(“The Page is Loaded!”);


window.onload = runOnLoad;

This is the typical way of writing JavaScript code for an on load function. In the above program the onload function of a window is called. It only fires after all the page content has been downloaded; it includes the downloading of images as well. The addition of multiple load functions is also hard.

On the other hand JQuery provides you a way to run code when the DOM of the page is ready not considering that all the images are downloaded or not. This method is called document.ready event. Following is the code with the help of jQuery:


alert(“The Page is Loaded!”);


The “$” dollar sign in the beginning is the jQuery object. It can be replaced by the word “jQuery” as well but in most of the cases the dollar sign is used.

Now this code will execute when the DOM has been loaded. It will not wait for all the page contents to finish downloading. The benefit of this is document.ready function is that you can call it multiple times in your function. They will be chained together by the JQuery to be called in succession.

Related Posts