CODEWITHSUNDEEP
javascriptjquery
Rachel
Rachel

Reputation: 103417

jQuery NewBie Questions: What's the deal with $(document).(ready)?

I am newbie to jQuery, just trying to learn it since last couple of days. In my office, there are few experience JavaScript Developer and they work mainly with jQuery for all their needs and whenever I got and talk to them to get some better understanding of how jQuery works and first they say is that on $(document).(ready) you do this and on $(document).(ready) you do that.

So my main question is What is the $(document).(ready) and how does it really works?

Any inputs would be highly appreciated.

Update: In the accepted answers comment there is mention on When DOM is ready, so what does that really means ?

Upvotes: 7

Views: 353

Answers (6)

slier
slier

Reputation: 6740

it just like window.onload event

except it dosent wait all the binary data such image to complete loading

this is crucial if u want to work with dom,because u dosent want your code to access dom element that dosent exist

Upvotes: 0

Scott Ivey
Scott Ivey

Reputation: 41558

$(document).ready() fires once the DOM is completely loaded and ready for manipulation. This prevents your code from firing before the objects that it'll act against exist. $(document).ready() is the most verbose version of it, and can be replaced up with any of these statements...

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
$(document).bind("ready", handler)

See here for the documentation.

Upvotes: 9

retornam
retornam

Reputation: 339

The DOM means Document Object Model. You can read more about it here. So

$(document).ready()

is fired once the DOM is completely loaded by your browser.Since Javascript is executed on your browser, we would only like to start execution once the browser knows about every element on the page on which we want the script to be executed on.

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816404

I think it is best described in the tutorial:

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

$(document).ready(function(){
    // Your code here
});

Or in short, it guarantees that every element of the document is loaded so that you can access it, but it does not wait until the images are loaded.

Upvotes: 3

7wp
7wp

Reputation: 12674

Document Ready is referred to the event that gets triggered by jQuery/JavaScript when the entire HTML document and all of its elements are loaded, and ready for manipulation.

The way that the browser loads elements is it renders them as the page is being downloaded. If you have some script that runs prematurely then you have a risk of that script failing.

So you use Document Ready to ensure that it only runs when the entire page is ready.

Here is an example... This will print "hello" once the entire document is done loading in your browser:

$(document).ready(function(){ 
   alert('hello');
});

Upvotes: 1

Tom Cabanski
Tom Cabanski

Reputation: 8018

$(document).(ready) is called once all the elements of your page are loaded. This allows you to setup things like event handlers with confidence because you know that the elements all exist.

Upvotes: 1

Related Questions