What is the difference between these jQuery ready functions?

Question

what is difference between

$(function(){

}); 

and

$(document).ready(function() { 

});

Answer 1

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.

Answer 2

$(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.

Answer 3

} 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

Answer 4

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.

Answer 5

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

Answer 6

Both are equivalent, the first is a shorthand form.