I see this syntax in some advanced jQuery:

$container

as in:

$input = $container.find('.fn_this_timeline')

EDIT: based on some of the ments below, just to clarify the first instance of '$container' that I can see is created right at the beginning:

init: function($container){
var myThing = this,
$input = $container.find('.fn_do_some_calc'),
$submit = $container.find('.fn_do_some_other_calc'),
defaultValue = parseInt($input.val(), 10);

myThing.$container = $container;

The line above confuses me even more :/

I'm used to using jQuery selectors like this: $('#mySelector').method('etc');

Can someone let me know what the difference is and when it's appropriate or applicable to use the 'shorthand' style?

I see this syntax in some advanced jQuery:

$container

as in:

$input = $container.find('.fn_this_timeline')

EDIT: based on some of the ments below, just to clarify the first instance of '$container' that I can see is created right at the beginning:

init: function($container){
var myThing = this,
$input = $container.find('.fn_do_some_calc'),
$submit = $container.find('.fn_do_some_other_calc'),
defaultValue = parseInt($input.val(), 10);

myThing.$container = $container;

The line above confuses me even more :/

I'm used to using jQuery selectors like this: $('#mySelector').method('etc');

Can someone let me know what the difference is and when it's appropriate or applicable to use the 'shorthand' style?

• javascript
• jquery

• is $container just storing a jQuery object? Somewhere is there a $container = $('#container')? – Troy Cosentino Commented Feb 15, 2013 at 7:15
• Troy, see the edit above. It doesn't appear to be as straightforward as that. – timmackay Commented Feb 15, 2013 at 7:22
• @hyperdouche myThing.$container = $container; is totally different. It's saying that the "$container" property (yes, objects can have property names that start with $ of the myThing object should be set as the $container variable (jQuery object). – Ian Commented Feb 15, 2013 at 7:28
• @hyperdouche see my answer below – Troy Cosentino Commented Feb 15, 2013 at 7:29

4 Answers 4

This isn't some shorthand, this is just the use of Javascript variables. For example, the $container variable was probably declared like this:

var $container = $("#container");

Because it's stored, the element (jQuery object) is "cached" and can be reused without having jQuery go out and re-traverse the DOM to find it again (because it has to every time $("select") is used).

The use of $ at the beginning of the variable name is sometimes helpful for the developer to remember that it holds a jQuery object and not a Javascript element (like what's returned from document.getElementById("container");.

Depending on where your question's init method is, the line myThing.$container = $container; is just setting an object's property "$container" as the value of the $container variable. So the object is probably like:

var myObject = {
    init: function () {
        // blah blah blah
    },

    $container: undefined
};

And after running the init method, it will set the "$container" property to something.

This is just to make clear, that the $container variable is already a wrapped jQuery object, instead of e.g. a native DOM node.

For Example you can write:

var container  = document.getElementById('item');
var $container = jQuery(container); // or:
var $container = jQuery('#item');

Got the point?

Basically, yes it is shorthand.

For the function you noted:

init: function($container){
var myThing = this,
$input = $container.find('.fn_do_some_calc'),
$submit = $container.find('.fn_do_some_other_calc'),
defaultValue = parseInt($input.val(), 10);

The $ is included so you know to pass a jQuery object into the function. So When you call it, you may do something like this:

init($('#theid'));

As far as the line below:

myThing.$container = $container;

That is just storing your jQuery object as part of your myThing object. One other note, you could do something like $var = 1 and that would be perfectly valid. However usually it is done as a reminder to store a jQuery object.

There is no shortcut method for using jQuery.

It is Standard Method to declare variable in jQuery.

i.e $container = $("#container");

$container is a jquery object.

Understanding: $ indicate that it is jquery object so apply operation on it as appropriate.