3

Possible Duplicate:
$(document).ready shorthand

Can someone help me to understand the JS code below, please:

$(function(){  <-- Is this a JS constructor? Why we need this?
    var someVariable = $(".classa").on('click', function() { <-- At what point in time does someVariable get populated?
        var $this = $(this);
            id = $this.attr('id');
         someVariable.removeClass('selected'); 
    });

    var someVariable2 = $(".classb").on('click', function() {
        var $this = $(this);
            id = $this.attr('id');
         someVariable2.removeClass('selected');
    });
});
Community
  • 1
  • 1
Nil Pun
  • 17,035
  • 39
  • 172
  • 294

2 Answers2

2

$ is the name of a function. You're passing an anonymous function inside of it as its first argument. If we were to reduce it in complexity, it would look like this:

var $ = function( arg1 ){
  /* Internals */
};

If we were to call this now, it would look like the following:

$("foo");

In this code, "foo" is our first argument. Now suppose we replaced our "foo" with another function:

var callback = function(){
  alert("Hello World");
};

If we passed that into our $ function it would look like this:

$( callback );

But we really don't need to use a named function, we could use an anonymous function:

$(function(){
  alert("Hello World");
});

Starting to see the similarities? At some point in the life of $, it will decide it's going to execute the function we're passing in. Until it executes it, our function does nothing.

Now we're talking about jQuery here, and jQuery will execute that function whenever the DOM is ready. So we're passing code in that ought to be executed whenever the DOM is ready.

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 2
    This would be a bit more helpful if you mentioned that `$(...)` is shorthand for `$(document).ready(...)` in this case. – configurator May 21 '12 at 22:49
  • Also, forgot to mention that the variables get populated at declaration (inside the `document.ready` event with a jQuery object representing a collection of the elements with the class `classa`. – Ricardo Souza May 21 '12 at 22:56
  • @configurator and @rcdmk This post could become much longer if I were to cover the way in which `$` moves. I purposefully tried to keep it to a minimum. – Sampson May 21 '12 at 22:58
  • @JonathanSampson thanks, how do we call :$(function(){ alert("Hello World"); }); – Nil Pun May 21 '12 at 23:09
  • @nilpun Whenever you follow a function handler with `()`, it executes itself. So if we have `var $ = function(){...}`, and we write `$()`, we execute `$`. Try this: `var hello = function(){alert('Hello')};` - right now `hello` *holds* a function, but it hasn't executed the function. If we write `()` after the handler, we can execute it: `hello();`. – Sampson May 21 '12 at 23:23
  • @JonathanSampson, right. In that case if we have N number of var $=function(){....}, which one gets executed for $()? – Nil Pun May 21 '12 at 23:25
  • @nilpun That's a slightly different question. You see, `$` can accept various different types of things as its first argument. It will accept a function, a string, or even an element on the page. Depending on what you give it, it will respond differently. Some things will cause it to react immediately, while others it will wait to deal with. – Sampson May 21 '12 at 23:26
  • 1
    @nilpun - if you have N number of `var $=function(){...}` what you are doing is repeatedly reassigning `$` to reference different functions - it only ever references the last one specified so `$()` executes the last function assigned. (This is a different issue to what the `$()` function in jQuery is for.) – nnnnnn May 22 '12 at 00:16
  • @nnnnnn I was assuming the OP was referring to use `$()` over and over. – Sampson May 22 '12 at 00:26
  • Cheers all, very helpful – Nil Pun May 22 '12 at 01:38
0

$ is not a js constructor.. it is a jquery(js library) function. The variable gets populated on declaration.

Daedalus
  • 7,586
  • 5
  • 36
  • 61