Understanding the document-ready event

Question

Hey, I was just writing another basic script for my JS & jQuery practice, and I was just pumping out the goold ol' document-ready event when I realized what this was actually comprise of, and I wanted to know if I was right or not:

Here is the document ready for jQuery:

$(document).ready(function(){});

Now, the dollar sign is shorthand for jQuery, which calls the jQuery library, so we can make jQuery statements and calls, correct?

The (document) is a selector that is referring to the "highest" piece of the DOM (other than Window?).

.ready is an action that occurs when the DOM is fully loaded. Now, the "DOM" being fully loaded, does the DOM in this case refer to what's being selected? So if, body was selected instead of document, would the script executed before the loaded?

(function(){});

This part gets me a little confused.

I know that once our document has loaded, then it will run our script. In other words, it will run our function right? Is our whole script being thought of as a function? And, it's really just one big JavaScript statement, correct? Because it ends in a semi-colon. Also, why does our script generally go between the braces, and not the parentheses of the function? What is the difference?

Thanks so much, sorry for the n00by question, I was just curious! xD

Answer 1

im not really clued up on jscript and jquery but statements go in {} and parameters go in (). so () what gets passed into function {} what function does

Answer 2

In jQuery, you're able to add a function to any jQuery event to be run once the event has happened.

In this case, when the (document) is ready(), run the function(){} within it.

In some cases you're able to add parameters to the function. For example, when using jQuery.ajax I can use parameters in the success setting, to gain access to the data I got back from the ajax request, and reuse that paramter in the function itself.

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Answer 3

1. (document) is not a selector. It's a reference to the "document" object.
2. .ready is a reference to a function available on jQuery objects. It's shorthand for .bind("ready", f)
3. (function() { ... }) is the handler for the event.

Binding a function as a "ready" handler is conceptually no different than binding a "click" handler.

Answer 4

Now, the dollar sign is shorthand for jQuery, which calls the jQuery library, so we can make jQuery statements and calls, correct?statements and calls, correct?

Yes

.ready is an action that occurs when the DOM is fully loaded. Now, the "DOM" being fully loaded, does the DOM in this case refer to what's being selected? So if, body was selected instead of document, would the script executed before the loaded?executed before the loaded?

No. Only the document can fire the ready event.

This is the function that will be execute when the dom is ready

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

You colud alos write:

$(document).ready(mxFunction)
function mxFunction(){alert('ready')}

Answer 5

The .ready() function only fires when document is selected. I don't believe you can call $(body).ready()

Basically, the ready() function takes 1 argument - a function. You could easily call

$(document).ready(alert)

But what we usually do is define an anonymous function with function(){}

You're correct in that all the code inside the typical $(document).ready(function(){}) is just one big function.

Our script goes between the curly braces, because that's how you define a function.

Rather than doing this:

function myFunc()
{
  alert('We are in my function');
}
$(document).ready(myFunc)

we cut out the middle man and do this:

$(document).ready(function()
{
  alert('We are in my function');
});

Answer 6

I have to disagree with @eskimoblood 'Only the document can fire the ready event.' That is not true there is no document ready event, 'ready' is introduced by jQuery and other libraries to indicate that the DOM is ready not necessarily loaded.

window.loaded is fired when all the images frames and other assets have been loaded so 'ready' will fire before 'loaded'. Take a look at 'DOMContentLoaded' it will give you more details on how 'ready' type event is implemented.

Answer 7

Wow, that is a lof of questions for one answer :)

Now, the dollar sign is shorthand for jQuery, which calls the jQuery library, so we can make jQuery statements and calls, correct?

Yes, $ and jQuery refer to the same object. Taken from jQuery's source:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

window is the global object. Anything added to it becomes available globally, so you may call it either as window.$, or just $ for instance.

The (document) is a selector that is referring to the "highest" piece of the DOM (other than Window?).

document is not a selector, but a DOM object referring to the top-most node in the DOM. It has other properties such as document.domain, etc. One of its children is the <html> element.

.ready is an action that occurs when the DOM is fully loaded. Now, the "DOM" being fully loaded, does the DOM in this case refer to what's being selected?

Yes, DOM refers to the items we usually select in a jQuery selector. More specifically it is the in-memory representation of the page. ready uses a bunch of events for different browsers to determine when the DOM has loaded.

So if, body was selected instead of document, would the script executed before the loaded?

Currently jQuery's source code does not care what selector was passed in when you're calling ready. Here's the ready function:

ready: function( fn ) {
    // Attach the listeners
    jQuery.bindReady(); 

    // If the DOM is already ready
    if ( jQuery.isReady ) {
        // Execute the function immediately
        fn.call( document, jQuery );

    // Otherwise, remember the function for later
    } else if ( readyList ) {
        // Add the function to the wait list
        readyList.push( fn );
    }

    return this;
},

Since it doesn't care about what selector is passed in, you could just as well pass it body, nothing, or anything you wish.

$({
    an: 'object', 
    that: 'has', 
    nothing: 'to', 
    'do': 'with', 
    ready: 'event'
}).ready(function() { .. });

and it will still work.

(function(){});

This part gets me a little confused.

I know that once our document has loaded, then it will run our script. In other words, it will run our function right?

Yes, this and each function that you bind with the ready event will be executed when the DOM is ready.

Is our whole script being thought of as a function?

No, not the entire script. Only items that depend on the DOM. Some things need to be processed as they are found. Think about the jQuery library itself. It does not wait for any DOM ready event before getting processed. If you write a JavaScript statement, it will be processed in the order it was found unless it is a callback function like the one you pass to ready(..). So the code below will execute immediately and alert "hello" regardless of whether the DOM is loaded or not.

<script>
    function hello() { alert("hello"); }
    hello();
</script>

And, it's really just one big JavaScript statement, correct?

Not really. You can modularize your JavaScript as neatly as you want. For example, you can have something akin to classes, objects, reusable widgets, architecture patterns such as MVC among a bunch of other things.

Because it ends in a semi-colon.

A semi-colon has nothing to do with when something gets executed. I could very well write.

<script>
    alert("Hello"), alert("World")
</script>

which will work and alert the two words in sequence and there is no semi-colon.

Also, why does our script generally go between the braces, and not the parentheses of the function? What is the difference?

It's how a function is defined in JavaScript and several other languages. Brush up your basic skills to understand better. Don't refer to it as a script as it only confuses matters. It is just a function with some statements inside it.