What is the difference between these jQuery ready functions?

what is difference between

$(function(){

}); 

and

$(document).ready(function() { 

})开发者_StackOverflow社区;

Nothing whatsoever.

This function behaves just like $(document).ready(), in that it should be used to wrap other $()

You can see this in the source code:

rootjQuery = jQuery(document);

...

} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

} else if (jQuery.isFunction(selector)) {
    return rootjQuery.ready(selector);
}

From the source

Calling $(document).ready(selector) saves a few if statements.

Although jQuery does cache $(document) internally that might make $(f) faster.

Benchmarked

Both are equivalent, the first is a shorthand form.

$(function(){}) is a short cut for the dom ready

A function passed as an argument to the jQuery constructor is bound to the document ready event.

I suggest you read this. As you can see

All three of the following syntaxes are equivalent:

$(document).ready(handler)

$().ready(handler) (this is not recommended)

$(handler)

So it's up to you and to what you prefer.

The two are exactly equivalent: use whichever form you like.

That said, I personally always use the expanded form $(document).ready(function(){}); for the simple reason that it is completely obvious what the code is doing. The approximate idea is that of "self-documenting code". Anyone coming to the code later on will immediately see that the code is to be run on the document's ready event. With the short-hand form, you have to rely upon the reader of your code understanding the meaning.

We have run into situations where IE9 does not run functions within $(function() {}); in the same manner or timing as $(document).ready(function(){});

The issue reared its head for us specifically in reading information out of a query string and processing and displaying that information on the screen, or using it to process a form. IE9 would process the information once it was cached with $(function(), and a user refreshed the page. But on first run, nothing worked right. However, once we switching from $(function(){}); to $(document).ready(), the issue was fixed. We changed NOTHING else.

I so look forward to the day I don't have to test for IE9 and lower.

They're effectively the same. No difference.

This is the native way.

$(document).ready(function() {
    // code
});

And this is a shorthand for the previous.

$(function() {
    // code
});

jQuery source code

I use $(function() {}); because it's shorter. As far as I know there is no difference between the two ways of doing it.

jQuery recommends to use $( fn ).

$(document).ready(function() {}); or $(document).on("ready", fn); will cause the function to be called when the document is ready, but only if it is attached before the browser fires its own DOMContentLoaded event. That makes it unreliable for many uses, particularly ones where jQuery or its plugins are loaded asynchronously after page load.

For more info, please look into jquery-migrate