jQuery - What are differences between $(document) and $()?

Question

I am currently working through this course: jQuery Events.

I know that all the below statements are equivalent:

$(document).ready( /*handler*/ );
$().ready( /*handler*/ );
$( /*handler*/ );

And I thought that $() is the same as $(document).
But when I needed to handle a key press on an entire document I've noticed that

$(document).keydown( /*handler*/ );

is working and

$().keydown( /*handler*/ );

is not.

What is the object matched by jQuery $() selector? How is it different from document?

I think this answers your question http://stackoverflow.com/questions/10753306/why-readyhandler-is-not-recommended — sjm, Jul 28 '15 at 13:31

score 2 · Answer 1 · answered Jul 31 '15 at 10:36

I think that $() != $(document) , you can test this subject by below code:

alert($(document).length); // 1
alert($().length); // 0

$(..) code causes call below constructor in jquery library:

    function( selector, context ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Handle HTML strings
    if ( typeof selector === "string" ) {
        some code to find element
        // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {
        this.context = this[0] = selector;
        this.length = 1;
        return this;

        // HANDLE: $(function)
        // Shortcut for document ready
    } else if ( jQuery.isFunction( selector ) ) {
        return typeof rootjQuery.ready !== "undefined" ?
            rootjQuery.ready( selector ) :
            // Execute immediately if ready is not present
            selector( jQuery );
    }

    if ( selector.selector !== undefined ) {
        this.selector = selector.selector;
        this.context = selector.context;
    }

    return jQuery.makeArray( selector, this );
}

"return this" in above code causes return array of jquery object that does not have any item.

so below code not assign event handler to any element:

$().keydown( /*handler*/ );

score 0 · Answer 2 · answered Jul 28 '15 at 13:37

0

keydown(): Event fired when a key is pressed on the keyboard.

$(document).ready() get your events to load whatever you want them to do before the window loads Everything inside its brackets is ready to go earliest possible time. soon as the DOM is registered by the browser.

answered Jul 28 '15 at 13:37

Regan

21
2

This does not answer my question. – naXa stands with Ukraine Jul 28 '15 at 13:54

score 0 · Answer 3 · answered Jul 28 '15 at 14:30

The difference is that

The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.

(Quoted from https://api.jquery.com/ready/) whereas the keydown method (docs here) is callable on a jQuery object to attach an handle to it, in order to detect when a key is pressed.

So it's a different thing from the ready method, which is invoked ONLY after the DOM is loaded AND ready.

score 0 · Answer 4 · edited May 23 '17 at 12:22

$() is not equivalent to $(document) in jQuery 1.4+. $() is an empty jQuery object.

An official answer from one of the jQuery developers:

$().ready(fn) only works because $() used to be a shortcut to $(document) _{(jQuery <1.4)}
So $().ready(fn) was a readable code.

But people used to do things like $().mouseover() and all sorts of other madness. And people had to do $([]) to get an empty jQuery object

So in 1.4 we changed it so $() gives an empty jQuery and we just made $().ready(fn) work so as not to break a lot of code.

$().ready(fn) is literally now just patched in core to make it work properly for the legacy case.

^{Source: Q: Why “$().ready(handler)” is not recommended?}

$().ready( /*handler*/ ) is a special case and that's why it works.

jQuery - What are differences between $(document) and $()?

4 Answers4