2

Possible Duplicate:
What is the difference between these jQuery ready functions?

I have always used:

$(document).ready(function (){
    //Code goes here
});

And inserted my jQuery/JavaScript code therein (so that it waits on the html page to be fully loaded before running any code).

Lately, I have seen this:

jQuery(function($){
    //Code goes here
});

I have searched for what the difference is here (mainly what the 'jQuery' part is all about).

My questions:

  • What does the jQuery part of the latter code block do, if anything?
  • What is the '($)' argument doing for that function?
  • Is there even a difference (other than making the page wait to be loaded) between my two code block examples?
Community
  • 1
  • 1
VoidKing
  • 6,282
  • 9
  • 49
  • 81
  • There is no difference. The `$` argument will serve as a local reference to the jQuery object; it's passed to such functions by the library. [Documentation.](http://api.jquery.com/jQuery/#jQuery3) – Pointy Nov 28 '12 at 18:00
  • Its the same, sometimes $ can get confused with other js libraries so that may be why people use jQuery – Andy Nov 28 '12 at 18:01
  • possible duplicate of [What is the difference between these jQuery ready functions?](http://stackoverflow.com/questions/2662778/) / http://stackoverflow.com/questions/593292/ - http://stackoverflow.com/questions/7068916/ - http://stackoverflow.com/questions/10894777/ - http://stackoverflow.com/questions/12524496/ – I Hate Lazy Nov 28 '12 at 18:07

4 Answers4

3

The main difference is the closure around the $ variable. The first snippet assumes that the $ variable has not been released (by using .noConflict() or if another library you are using also makes use of $ but not as the jQuery variable).

The second implementation is safer because it doesn't make any assumptions but allows your internal code to safely use the $ variable by making it a parameter.

Babak Naffas
  • 12,395
  • 3
  • 34
  • 49
  • So, as I have no reason not to, I should use the second snippet, just to be safe in the future (in case I am using jQuery in a different environment, using .noConflict, etc.)? – VoidKing Nov 28 '12 at 19:10
  • Yes. It's the proactive solution as opposed to waiting for something to potentially break. – Babak Naffas Nov 28 '12 at 19:17
  • And, just to be clear, the jQuery(function($) will always wait until the document is ready? – VoidKing Nov 28 '12 at 19:20
  • Yes. To be more specific, jQuery(function(){}); is short hand for jQuery(function($){ }); – Babak Naffas Nov 28 '12 at 19:23
  • Awesome, thanks! I will replace my document.ready(s) as I see them :) Another thing to clarify, jQuery(function(){}); = jQuery(function($){}); as the former is shorthand? Any reason to ever use the latter? – VoidKing Nov 28 '12 at 19:26
2

It is the same thing:

Using jQuery(function(){}) is just a shorthand for $(document).ready(function (){});

Note: you can use $ or jQuery

Ibu
  • 42,752
  • 13
  • 76
  • 103
1

They're the same. From the documentation:

JQuery Call back (jQuery( callback ))

"This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready. While this function is, technically, chainable, there really isn't much use for chaining against it."

phant0m
  • 16,595
  • 5
  • 50
  • 82
Adam
  • 1,202
  • 11
  • 25
0

They are nearly the same.

In the second function you are passing in jQuery i.e. $ into the function. $ is shorthand for the jQuery.

Straight from the jQuery library code for when you call $()

// tests to see if you passed in a function
} else if (jQuery.isFunction(selector)) { 
    // adds the function to be called when jQuery fires the ready event
    return rootjQuery.ready(selector); 
}

Comments are mine.

Bruno
  • 5,772
  • 1
  • 26
  • 43