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

jquery define function
jquery function call
how to add function in jquery
jquery function()
jquery documentation

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

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.

What does (function($) {})(jQuery); mean?, will call the supplied method when the DOM finishes loading. "$" 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. share | improve this answer

What does the "$" sign mean in jQuery or JavaScript?, First, let's look at some jQuery basics, and at how we can use jQuery to perform its The jQuery library provides the jQuery function, which lets you select Of course, in JavaScript, functions are objects too, so that means that $ (and jQuery , of 'li' ) .click(function() { $( this ).addClass( 'clicked' ); }) .find( 'span' ) .attr( 'title'  // Expose jQuery to the global object window.jQuery = window.$ = jQuery; When you call the $() function and pass a selector to it, you create a new jQuery object. Of course, in JavaScript, functions are objects too, so that means that $ (and jQuery, of course) has properties and methods, too.

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

What does $(function() {} ); do?, window.onload = function() {. alert( "welcome" );. }; Unfortunately, the code doesn'​t run until all images are finished downloading, including  jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial. Tip: If you don't know CSS, you can read our CSS Tutorial. The Document Ready Event. You might have noticed that all jQuery methods in our examples, are inside a document ready event: $ (document). ready ( function () {

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

How does jQuery work under the hood?, The few that do will have an explicit note on their API documentation page. XML data returned from an Ajax call can be passed to the $() function so individual elements of the XML structure can be retrieved using .find() Define a plain object addClass( "my-div" ) .on({. touchstart: function( event ) {. // Do something. } }). $ ("a").click(function(event) { event.preventDefault(); Try it Yourself » Definition and Usage. The event.preventDefault () method stops the default action of an element from happening. Prevent a submit button from submitting a form. Prevent a link from following the URL. Tip: Use the event.isDefaultPrevented () method to check whether the

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

jQuery Basics, declare a JavaScript function can be confusing for beginners as there are several different ways to declare functions using JavaScript/jQuery. jQuery is a javascript library(collection of class and methods).When it is used in a web page it creates its own object. $ holds the referances of that object. Later at any point of time we can use $ to use any jQuery method.

How jQuery Works, Everything we do using jQuery reads/manipulates the DOM so use the ready function. so I thought we would clarify it for all those jQuery beginners out there. “Does jQuery code work outside the document ready function? Hi, I am using JQuery v 1.4. I recently ran into a problem where I added a function to my script to show/hide a div when I submit a form. When I put my

jQuery(), Novice to Ninja Earle Castledine, Craig Sharkie So far we've seen the jQuery function used for selecting, but it does have another function of equal importance: creating new That means it's instantly ready for further jQuery processing. hi everybody, i am newbie in jquery and i want to learn what does jQuery.fn.center = function {. mean? (fn?, center?)

5 Different Ways to Declare Functions in jQuery, When we first defined the fake debugfunction, we probably didn't think it would've overwrittenthe whole content ofthe plugin's original function. Perhapsit  Well I was too puzzled alot when new to jquery. A dollar sign to define jQuery ; A (selector) to "query (or find)" HTML elements ; A jQuery action() to be performed on the element(s) Basically $. referenc any DOM object provided insided the small brackets. like $.("a") will represent all anchors in html. Basically it plays a role as selector

Comments
  • I like your answer(if it is correct), quite clear explanation:)
  • can i do the following? Same? $(function($){...});
  • So $(document).ready(function(){}) is equivalent to jQuery(function($) {}); ??
  • -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.
  • 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.
  • 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
  • um... i'm pretty sure it is if you pass a function inside?
  • 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.