views:

610

answers:

2

I've seen four different ways to tell jQuery to execute a function when the document is ready. Are these all equivalent?

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

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

$(function () {
  alert('$()');
});     

jQuery(function ($) {
  alert('jQuery()');
});
+10  A: 

There is no difference.

$ is the same as jQuery. If you view the unminified source, you will see var $ = jQuery = ... or something to that effect.

The jQuery function checks the type of it's parameter, if it is a function, it treats it the same as $(document).ready(...)

Calling jQuery without a parameter defaults to using document. So $() and $(document) are identical. Try it in Firebug.

geowa4
This doesn't explain the second one
Draemon
crap, i thought i got them all. hold on.
geowa4
edited to include the second one.
geowa4
Is it defaulting to using document or is it a result of jQuery being returned via chaining after passing no args?
David Archer
Since you pointed it out, is there a difference between $(window).ready() and $(document).ready()?
Patrick McElhaney
+1, nice explanation
Draemon
@David: run `$()` in firebug, you will see that the result is jQuery with 1 element--`document`.
geowa4
@Patrick: to my knowledge, there is no effective difference if used consistently. The only thing that I think that could change is the order of the ready event, due to propagation. I'd have to test it to be sure.
geowa4
I see! Oh and re $(window).ready and $(document).ready: I wonder if $(window) might wait for images to be loaded etc, cos $(document).ready fires as soon as the DOM is ready (before images etc)
David Archer
@David: that would certainly make sense to me if that were the case.
geowa4
From browsing the source, it seems it all boils down to "this.call( document, jQuery )" [line 2912 in 1.3.1] meaning the anonymous function is passed the JQuery object and executed in the context of document. $(window).ready(), $(document).ready(), and even ('#bogus_selector').ready() all do the same thing.
Patrick McElhaney
@patrick, that looks like its inside the extend function
David Archer
nevermind my last comment, being stupid :-(
David Archer
+2  A: 

re: Geroge IV's comments regarding $() == $(document) its correct. From the unminified source (init is what get called internally):

init: function( selector, context ) {
 // Make sure that a selection was provided
 selector = selector || document;

Also from source, to back up previous conversations:

// HANDLE: $(function)
 // Shortcut for document ready
 } else if ( jQuery.isFunction( selector ) )
  return jQuery( document ).ready( selector );

this should be community wiki. I've always been interested in the inner workings of jquery, now I've had an excuse to start looking :-)

David Archer
good hunting @Davd!
geowa4
btw, "this should be community wiki" <- so why isn't it?
geowa4
Ah don't know how to do that or if I can, but i've opened one up linking to this :-D
David Archer