Home/ Questions/Q 956265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T00:30:56+00:00

Hey, I was just writing another basic script for my JS & jQuery practice,

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0