admin管理员组

文章数量:1221457

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

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

  • javascript
  • jquery
  • domready
Share Improve this question edited Jul 29, 2010 at 15:39 Andreas Köberle 111k58 gold badges280 silver badges307 bronze badges asked Jul 29, 2010 at 15:34 QcomQcom 19.2k29 gold badges91 silver badges113 bronze badges
Add a comment  | 

7 Answers 7

Reset to default 15

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.

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');
});
  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.

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')}

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.

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);
  }
});

I amm not really clued up on JavaScript and jQuery but statements go in {} and parameters go in (). So () what gets passed into function {} what function does

本文标签： javascriptUnderstanding the documentready eventStack Overflow

版权声明：本文标题：javascript - Understanding the document-ready event - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739310444a2157556.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。