What is the difference between jQuery's startup functions?

Officially there is no difference :

This function behaves the same as $(document).ready(), in that it should be used to wrap other operations $()on your page that depend on the DOM already being ready.

You can see it in the sources :

rootjQuery = jQuery(document);

...

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

However, technically there is a difference that could be useful depending on the circumstances: $(function()it will not run if jQuery has not been loaded correctly, whereas $(document).readyit will

Update: As mentioned in the comments $(document).readyit will also not run if jQuery is not loaded. To achieve a similar ( but not identical ) effect without jQuery you can use window.onload.

This answer is a translation of the original in English: https://stackoverflow.com/a/2662783/4574 (the last sentence was not in the original)

Seeing that the question dates from the year 2015. Today there is a big difference:

$(document).ready(function() { 

});

it has been deprecated in jQuery3 and will most likely be deprecated in jQuery4.

Therefore, to keep your code up to date, it is recommended to start using it now:

$(function(){

});

in all of our code.

This change is clearly explained in the jQuery API:

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with "document" which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.

_{See: .ready()in the jQuery API}

---

JQuery offers several ways to attach a function that will be executed when the DOM is ready. All of the following syntaxes are equivalent:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated . This is because the selection has no bearing on the behavior of the method .ready(), which is inefficient and can lead to incorrect assumptions about the behavior of the method. For example, the third syntax works with "document" which doesn't select anything. The fourth syntax expects the document to be ready, but implies (incorrectly) that it expects the images to be ready.

In conclusion: the recommended way from jQuery3 is:

$(function() {
  // Handler for .ready() called.
});

You can also consult the following questions:

• What is the difference between window.onloadand $(document).ready()?
• jQuery 3 document.readydeprecated are there changes also for window.load?

According to the documentation:

jQuery( callback ): Hooks a function to be executed when the DOM has finished loading. The behavior is like $().ready()and should be used to encapsulate other operations that depend on the DOM being loaded.

While:

.ready( handler ): Specifies a function to execute when the DOM is fully loaded.

If it is executed after the DOM is loaded, your (usually anonymous) function will be executed immediately.

Conclusion:

Both methods are synonymous. The use of one or the other is a matter of what you prefer. For example, I really like the first one because, as they mention, it is short-lived.

Recommendation:

It is recommended that you use the alias jQueryto always obtain the desired behavior in your plugins or components (it does not matter what method you use), examples:

Method 1:

jQuery(function( $ ) {
    // Tú código usando aquí el alias «$».
});

Method 2:

jQuery( document ).ready(function( $ ) {
  // Código usando el símbolo «$» (como comúnmente) aquí.
});

Sources

• jQuery() | jQuery API Documentation
• .ready() | jQuery API Documentation

This is also equivalent:

    $(document).on('ready',function() { 

    });

Personally, I recommend using the method by default on, and in the case of the method ready, I recommend not using it, and instead maintain the order of execution of the scripts/functions when you know that the resources (elements/variables, app.js) already exist in the current context, and/or execute those same scripts/functions in callbacks.