jQuery newbie: what does jQuery(function($) { ... }) means?

Question

I know in jQuery, $(callback) is the same as jQuery(callback) which has the same effect as $(document).ready().

How about

jQuery(function($) {

 });

Can some one explain to me what does this kind of function mean?

What does it do?

what is the difference between this one and $(callback)??

what is the difference between this one and $(function())??

Solution 1

jQuery(function($) {

});

is the safest version of all three. It makes $ the local variable and thus gracefully avoids the conflicts with any other variables which possibly use $ symbol.

I think it was also added fairly recently, don't remember seeing it before.

These function all do the same things - execute some code when DOM is ready. $(document).ready(function(){}) is the original one, and it matches the underlying javascript API.

"$" and "jQuery" which accept function as an arguments were created as shortcuts to avoid repeating such a common construct. Accepting a function which accepts $ as its first argument is a further syntax sugar - now you get convenience of the closures without the need to do it yourself.

Solution 2

• $(function()) is a syntax error.
• $() creates an empty jQuery object.
• $(document).ready(function() { ... }) executes the given function when the DOM is ready
• $(function() { ... }) is a shortcut for the same thing
• jQuery(function($) { ... }) does so, too, but it also makes $ available inside the function no matter what it's set to outside.

Solution 3

When you call the main jQuery factory function (either as jQuery(<something>) or the common shortcut $(<something>)) it decides what to do based on the type of <something>.

If you pass a string as <something> it assumes that is a selector specification and will return a jQuery list of elements matching that selector.

If you pass a jQuery object (representing a list of elements, i.e. an object returned from a previous call to jQuery) it will just return that object (essentially this is a non-operation).

If you pass it a DOM element it will return a jQuery list containing just that element (so you can apply jQuery methods to that element). This is what is happening with $(document).ready() - you pass the factory function the DOM element "document", it returns a jQuery object representing that element, and you use that object's ready() method to add an event handling function to the ready event of all the DOM elements in the list (just the one, document, in this case).

If you pass it a function, this is just a shorthand for "run this when everything is ready for you to do so", so $(function() { ... }); is equivalent to $(document).ready(function() { ... });

Solution 4

So I was corrected on this and if you read the first comment it gives some context.

jQuery(function() {
    // Document Ready
});


(function($) {
    // Now with more closure!
})(jQuery);

I'm not 100% sure but I think this just passes the jQuery object into the closure. I'll do some digging on the google to see if I am right or wrong and will update accordingly.

EDIT:

I'm pretty much right, but here it is straight from their website:

http://docs.jquery.com/Plugins/Authoring

"Where's my awesome dollar sign that I know and love? It's still there, however to make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution."

Solution 5

First off, jQuery() is not the same as $(document).ready()

$() is a shortcut for jQuery()

and...

$(function(){ ...}); is a shortcut for $(document).ready(function(){ ... });

Thus:

jQuery(function(){ ... }) 

Will function the same as

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

But...

jQuery('#foo').css("background-color", "#f00");

would not function the same as

$(document).ready('#foo').css("background-color", "#f00");

So...

jQuery() is not the same as $(document).ready()

View more solutions