I've been working with JQuery for some time now and I've always used the following to initalise my javascript:
$(document).ready( function() {
// Initalisation logic
});
However, recently I've noticed a lot of examples using the following:
$(function() {
});
Whats the difference?
Thanks
Basically, there isn't one. The $(...) format is a shortcut. See the API docs for jQuery() for details.
I like to use it like this:
jQuery(function($) {
// ...all of my jQuery-specific code here...
});
...because then if I need to, I can use noConflict if I end up having to mix something into the page that also wants the $ symbol, but I can still use $ in my code (because jQuery passes itself into the callback as the first argument, and as you can see I'm accepting that argument as $ in my callback function — and so that shadows any global $ symbol that another library might be using). The above also has the advantage that I can have symbols global to my code (vars within the anonymous function) that are not actually globals.
noConflict is important, because Prototype and MooTools also use and rely on the $ symbol.
The difference is a matter of style. One is just a shortcut of the other. :) See http://api.jquery.com/jQuery/ near the bottom where it says "Executes the function when the DOM is ready to be used"
When I asked one of the jQuery UI people what they preferred, he said he preferred the more verbose way. However, people in my shop use this version:
$(function() {
});
The difference is that the first is more readable. So please just use this one.
$(document).ready(function() {
// Initalisation logic
});
$(document).ready(function() { ... }) is more readable than $(function() { ... }), but I think jQuery(function($) { ... }); is perfectly readable. Like any idiom, you have to learn it once.
jQuery function has way too many completely different things that it does depending on what you pass in (even doing different things when you pass in strings, depending on the content of the string), no argument there, it's one of my pet peeves about jQuery. But at least it only has the one thing it does when you pass in a function by itself.
document ready is used so often that a shortcut like that is not confusing at all. You could say the $ symbol is bad too, since it's not as explicit as jQuery, but again, it's about how commonly it is used, and hence how easy it is to remember.