CODEWITHSUNDEEP
javascriptjqueryvariables
Harke
Harke

Reputation: 1289

What does $ mean in jQuery?

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?

Upvotes: 1

Views: 3427

Answers (8)

jeffreydev
jeffreydev

Reputation: 1722

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

Upvotes: 2

adamjmarkham
adamjmarkham

Reputation: 2164

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.

Upvotes: 2

isNaN1247
isNaN1247

Reputation: 18109

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.

Upvotes: 0

Sirs
Sirs

Reputation: 1297

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

Upvotes: 0

Andy
Andy

Reputation: 30135

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.

Upvotes: 2

DonCallisto
DonCallisto

Reputation: 29932

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

Upvotes: 1

malko
malko

Reputation: 2382

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

Upvotes: 2

Clive
Clive

Reputation: 36965

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

Upvotes: 10

Related Questions