CODEWITHSUNDEEP
jquery
Aperture
Aperture

Reputation: 2427

How do you interpret jQuery(document).ready()?

So jQuery() is is a function and document is an object which is used as a parameter of the jQuery() function.

I suppose, the jQuery(document) function then return an object, which has a ready() method? Is it correct? What kind of object does jQuery(document) return then?

Upvotes: 1

Views: 121

Answers (4)

Adil
Adil

Reputation: 148110

If you take typeof document, you will get object so jQuery(document) will give the jQuery object of document.

You might have done like $(this) to treat this as jQuery object. With javascript keyword this we can call all the dom method/properties but not jQuery methods and properties similarly with $(this) we can call all jquery methods / properties but not basic dom methods and properties.

Now $(document).ready() means to get the dom object document convert it to jQuery object and attach ready function to it.

Here are few commands I have given in chrome console to explain it more.

typeof document
"object"

$(document).ready
function (a){e.bindReady(),A.add(a);return this}

document.ready
undefined

Here document.ready showing undefined is making clear that it is not known to dom and $(document).ready showing its definition with the help of jquery

Upvotes: 1

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59111

What kind of object does jQuery(document) return then?

It returns a jQuery object:

A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document.

The jQuery method itself is documented here: http://api.jquery.com/jQuery/#jQuery1

The second and third formulations of this function create a jQuery object using one or more DOM elements that were already selected in some other way. A common use of this facility is to call jQuery methods on an element that has been passed to a callback function ...

The jQuery(...) function is also commonly abbreviated $(...), as in:

$(document)

Basically it is the first common hook into the jQuery library. You'll quite often see it used this way:

$(document).ready(function() {
  // This code gets called once the document has finished loading
  // to the point where you'd want to use the jQuery library against the DOM
});

Here is documentation on the .ready method:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code ...

Upvotes: 1

Dmytro Shevchenko
Dmytro Shevchenko

Reputation: 34591

Refer to jQuery documentation:

http://api.jquery.com/jQuery/ - you're interested in the jQuery( element ) version of the jQuery function. It wraps the element you pass in a new jQuery object. This object then contains a .ready() method where you can pass an event handler as a function.

Upvotes: 1

ThiefMaster
ThiefMaster

Reputation: 318508

jQuery uses a lot of magic (e.g. to avoid the need of using new).

jQuery(...) always creates a new jQuery object, containing zero or more elements (depending on the arguments) passed to it.

jQuery has a ready method so you can call it on any jQuery object. It doesn't matter if you use $().ready() or $(document).ready() or $('whatever').ready() - it will always do the same thing:

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

    // Add the callback
    readyList.add( fn );

    return this;
},

As you can see, this is only returned for chaining - the actual logic of the function does not use it at all.

Upvotes: 3

Related Questions