jQuery Selector Before Function

Question

what is the difference between:

   $(function () {

    });

and this:

  function HideDiv() {

    }

i know first is jQuery Function and second is Javascript function. but i don't know why it putted selector '$' before Function Keyword . i thought that jQuery Selector is for finding an html Element for example this:

$("#loading").hide('fade');

finding an element with the name loading and hide that. regards.

Give this a look its a lot of content but will help tremendously http://jqfundamentals.com/book/index.html — stanwilsonjr, Mar 14 '11 at 15:54

score 3 · Accepted Answer · answered Mar 14 '11 at 15:52

The $ is shorthand for jQuery, and represents the jQuery object. That context is basically a shorthand of:

jQuery(document).ready(function()
{


});

and acts as an onDOMReady function for executing code when the page has loaded. You are fundamentally "finding" the document element and running a script when it has finished loading.

The second one is just a general function

score 2 · Answer 2 · answered Mar 14 '11 at 15:52

The difference is very large!

function HideDive(){

}

Creates a named function which you can later call as: HideDiv

$(function() {

});

Does something entirely other: it registers an anonymous function with jQuery, essentially saying: when the page is done loading, please call this function.

The $( ... ); notation is a shorthand which means jQuery(document).ready( ... ).

Hope this clears it up!

score 2 · Answer 3 · answered Mar 14 '11 at 15:54

There are functions involved in both of those, but the context is a little different. The first:

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

is both a function call and a function definition. The call is to the jQuery function itself, whose alias is "$". The function call has a parameter, and that parameter is an anonymous function. The jQuery function will respond to this function call by saving a reference to the anonymous function, and then — when the document is ready — it will call your function.

The second form is just a simple JavaScript function definition statement. It creates a function with a name that can be called by other code in the same scope, or in any lexically-enclosed scope.

score 1 · Answer 4 · edited May 23 '17 at 10:33

1

The former is an anonymous function that is invoked when the DOM is ready to be interacted with by jQuery. It is analagous to:

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

The latter is a named function which can be called by any code within it's scope.

Another interesting piece of function syntax is:

(function() {
    // ...
})();

which is a self-executing function.

edited May 23 '17 at 10:33

Community

1
1

answered Mar 14 '11 at 15:53

justkt

14,610
8
42
62

score 1 · Answer 5 · answered Mar 14 '11 at 15:54

The first function (the "jQuery function") is, technically, still a JavaScript function as jQuery is just a JavaScript library. However, in this specific case, this function means something special to jQuery. Specifically, it is the ready function meaning that it will run after the DOM is ready (AKA, the page has loaded).

The second function is a "regular" function. This can be called from other portions of JavaScript code (including jQuery code, which, if you recall, is JavaScript). This allows you to encapsulate various actions or pieces of information that you may use repeatedly (rather than repeating over and over). You can combine the two, as well, like this:

$(function() {
  // Call the function...
  MyFunctionToDoSomething();
});

function MyFunctionToDoSomething() {
  // Do stuff here.
}

score 1 · Answer 6 · edited May 23 '17 at 11:55

The first is shorthand for $(document).ready(function(){}) [though doesn't work in after 1.4 I believe]. I can see it being easily confused with an anonymous function either way based on syntax.

A typical anonymous function would look just like your first example without the $. See Why do you need to invoke an anonymous function on the same line? for how the anonymous function works.

The second is a standard JS function (which is also an instantiatable object).

jQuery Selector Before Function

6 Answers6