Unable to understand $variable and how it works

Question

I have this piece of code

    var $slider = $('#divSlider')
                    .hover(function () {

                    }, function () {

                    }).appendTo('div');

    $('a').mouseover(function () {
        $slider
            .addClass('active')
    });

I have the following questions:

What is $slider?
When does it appendTo div, does it happen after hovering or instantly?
In the mouseover function, $slider is used again. What does $slider contain?

Thanks

This is a fundamentally-loaded question that is more than something you should just ask on SO. If you understand Javascript itself and the basics of jQuery, this site might be useful: http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html — Deryck, Feb 02 '14 at 06:01

score 0 · Answer 1 · answered Feb 02 '14 at 05:55

0

$slider is a variable that's set to a jQuery-wrapped #divSlider element
It'll appendTo as soon as the code above is executed.
$slider is simply a reference to $('#divSlider') so it can be used again. So .addClass will really be adding a class to the #divSlider element

answered Feb 02 '14 at 05:55

helion3

34,737
15
57
100

so is $slider like a cached variable? – gshaffer Feb 02 '14 at 05:56
Yes, a variable. Variables hold things - `cached` sums it up as far as you're concerned but it's not really cache, it's a reference. It *refers* to the jquery-wrapped element we assigned to it. – helion3 Feb 02 '14 at 06:27

score 0 · Accepted Answer · answered Feb 02 '14 at 05:57

What is $slider?

In your context, It is just a variable.
When does it appendTo div, does it happen after hovering or instantly?

#divSlider will append to the div instantly and it will register #divSlider for hover events too. Finally the object which having details regarding the same will be assigned to that variable.
In the mouseover function, $slider is used again. What does $slider contain?

No, $slider will not be used while user is hovering. That variable just contains an object of #divSlider

I think you mentioned `hovering` when the user was asking about the `mouseover` event handler on the anchor. Good answers! — helion3, Feb 02 '14 at 06:28

score 0 · Answer 3 · answered Feb 02 '14 at 06:02

$slider is a simple variable which is equal to $("#divSlider"). There is no any special meaning of $ here. This is similar to var slider = $("#divslider"). No difference is there in both slider or $slider. Now a days, this is being fancy to create variables starting with $ like $varName. Most of jQuery guys are used to do this. :-)
this is appended to DIV instantly. It has nothing to do with hover here in your case.
in mouseover, $slider is being used and it still contains $("#divSlider") only. After mouseover on <a /> the class active will be added there.

Unable to understand $variable and how it works

3 Answers3