What does $ mean in jQuery?

Question

I recently came across a piece of code. It is as follows:

      var myFeature = {

'config' : { 
    'container' : $('#myFeature')
},

'init' : function(config) { 

    if (config && typeof(config) == 'object') {
        $.extend(myFeature.config, config);
    }

    myFeature.$container = myFeature.config.container;

    myFeature.$sections = myFeature.$container.
        find('ul.sections > li'); 

    myFeature.$section_nav = $('<ul/>').
        attr('id','section_nav').
        prependTo(myFeature.$container);

    myFeature.$item_nav = $('<ul/>').
        attr('id','item_nav').
        insertAfter(myFeature.$section_nav);

    myFeature.$content = $('<div/>').
        attr('id','content').
        insertAfter(myFeature.$item_nav);

    myFeature.buildSectionNav(myFeature.$sections);
    myFeature.$section_nav.find('li:first').click();

    myFeature.$container.find('ul.sections').hide();

    myFeature.initialized = true;

},


'buildSectionNav' : function($sections) {

    $sections.each(function() {

        var $section = $(this);

        $('<li/>').
            text($section.find('h2:first').text()).
            appendTo(myFeature.$section_nav).
            data('section', $section).
            click(myFeature.showSection);
    });

},

'buildItemNav' : function($items) {

    $items.each(function() {
        var $item = $(this);

        $('<li/>').
            text($item.find('h3:first').text()).
            appendTo(myFeature.$item_nav).
            data('item', $item).
            click(myFeature.showContentItem);

    });

},

'showSection' : function() { 

    var $li = $(this);

    myFeature.$item_nav.empty();
    myFeature.$content.empty();

    var $section = $li.data('section');

    $li.addClass('current').
        siblings().removeClass('current');

    var $items = $section.find('ul li');

    myFeature.buildItemNav($items);

    myFeature.$item_nav.find('li:first').click();

},

'showContentItem' : function() {

    var $li = $(this);

    $li.addClass('current').
        siblings().removeClass('current');

    var $item = $li.data('item');

    myFeature.$content.html($item.html());

}

 };

I know what $('#myFeature'), $(this) means. But what does $li and myFeature.$container mean? Are they some type of variables? If so, what is the scope of myFeature.$container? since it is not declared using var, is it global?

possible duplicate of [How does Jquery use the dollar sign?](http://stackoverflow.com/questions/7083340/how-does-jquery-use-the-dollar-sign) — user113716, Sep 20 '11 at 15:03

score 10 · Answer 1 · answered Sep 20 '11 at 14:18

10

$li and $container are just variable names, named like that so the programmer knows they are jQuery extended objects.

answered Sep 20 '11 at 14:18

Clive

36,918
8
87
113

score 2 · Accepted Answer · answered Sep 20 '11 at 14:19

2

this is just commons variables, $ is authorized to be part of a var name and the author just like to name his vars with a $ at start. Regarding myFeature.$container this is just a property of the myFeature object so it's the same scope of myFeature

answered Sep 20 '11 at 14:19

malko

2,292
18
26

So, is the myFeature.$container variable like fields in a JAVA class, which has class-level scope ? – Harke Sep 20 '11 at 14:42
this is more a like a property of the myFeature object, with a public visibility don't know how to explain that in java – malko Sep 20 '11 at 14:48

score 2 · Answer 3 · answered Sep 20 '11 at 14:20

2

No, it's just a simple variable name.
I do the same with variables which contain jquery objects to quickly distinguish them from my other (non-jquery) vars.

answered Sep 20 '11 at 14:20

Andy

29,707
9
41
58

jeffreydev · Answer 4 · 2011-10-26T12:02:41.997

While using a framework like jQuery it is often so that the programmer puts $ signs in front of a variable name so that he knows that the content is a jQuery object.

So for example when you bind a click event and inside the function you have the variable this available. But this refers to the dom element and not to the jquery object.

So for example you could use something like this to recognize the value of a variable:

var $this = $(this);

$this.doSomeJquery();

score 2 · Answer 5 · answered Sep 20 '11 at 14:23

2

It just allows you to identify the jQuery variables easily from JavaScript variables.

For example:

var $section = $li.data('section'); //jQuery variable
var num = 2; //JavaScript variable

Can be useful if you have a lot of code with JavaScript and jQuery variables.

See here for more info.

answered Sep 20 '11 at 14:23

adamjmarkham

2,150
2
18
26

Thanks. But could you give me more info about myFeature.$container variable? – Harke Sep 20 '11 at 14:45
Its just a property of `myFeature`, where `$container` references the jQuery object ` $('#myFeature')`. If it was pure JavaScript you would omit the `$` as you wouldn't be working with a jQuery object. – adamjmarkham Sep 20 '11 at 14:53

score 1 · Answer 6 · answered Sep 20 '11 at 14:20

1

The dollar sign ($) is an alias for "JQuery"

I mean that

$(document).ready(function(){



});

is like write:

jQuery(document).ready(function(){



});

Edit: I miss interpreted the question, sorry.

Yes, are variables name

answered Sep 20 '11 at 14:20

DonCallisto

29,419
9
72
100

1

but that wasn't his question ;) – Andy Sep 20 '11 at 14:21
I miss interpreted the question, sorry :) – DonCallisto Sep 20 '11 at 14:22

score 0 · Answer 7 · answered Sep 20 '11 at 14:21

0

I'd say it's just some code convention to indicate that it's a variable containing a Jquery object (instead of a DOM object).

answered Sep 20 '11 at 14:21

Sirs

1,277
17
30

score 0 · Answer 8 · answered Sep 20 '11 at 14:21

0

If you look at the JQuery source (http://bit.ly/jqsource) - right at the end, you'll see:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

Its just a reference to window.jQuery.

answered Sep 20 '11 at 14:21

isNaN1247

17,793
12
71
118

What does $ mean in jQuery?

8 Answers8

Linked