23

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())??

Rubén
  • 34,714
  • 9
  • 70
  • 166
Leem
  • 17,220
  • 36
  • 109
  • 159

5 Answers5

23
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.

Kurt Peek
  • 52,165
  • 91
  • 301
  • 526
George Karpenkov
  • 2,094
  • 1
  • 16
  • 36
18
  • $(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.
ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
5

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() { ... });

David Spillett
  • 1,401
  • 11
  • 21
2

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."

Seth
  • 6,240
  • 3
  • 28
  • 44
  • 1
    -1 for your first line. There is a very good reason to do so: If you used `$.noConflict();` to restore whatever `$` was before including jQuery you can make `$` available in your function (the ready callback receives the jQuery object as the first argument) without wrapping everything in another anonymous function. – ThiefMaster Jun 23 '11 at 13:21
  • You would do that in the document ready? Fair enough, I'll update the post and my own general knowledge at the same time! Thanks for the clarification. – Seth Jun 23 '11 at 13:23
  • 1
    Depends - if all you want to write is a document.ready function it makes sense. If there's any other code using jQuery before/after the document.ready function i'd certainly go with the `(function($){ ... })(jQuery);` approach – ThiefMaster Jun 23 '11 at 13:24
1

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()

Mutt
  • 937
  • 6
  • 9
  • 3
    um... i'm pretty sure it is if you pass a function inside? – George Karpenkov Jun 23 '11 at 13:21
  • 1
    yes if a function is passed, using the anonymous function shortcut, the two will perform the same. But saying that `jQuery()` is the same as `$(document).ready()` is a false statement. – Mutt Jun 23 '11 at 13:49