Is jquery $(this). the same as $?

Question

I was wondering something about the $ of jQuery. I know that it refers to jQuery object, but I a found something a bit different today : $parent In the code I'm working on, that's a substitute to $(this).parent : eg : var $parent = $(this).parent();

So my question is, why $parent and not parent ? Is that the only selector ? How to use it this way ? And I'm not talking about the dotted functions like $.ajax or $.post.

Thaks for helping

enough questions are there already http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign & http://stackoverflow.com/questions/10443463/do-i-need-to-put-a-dollar-before-variable-names-with-javascript — Arun P Johny, Mar 18 '14 at 16:01
Probably shouldn't mark this as a duplicate *of* a duplicate. Should probably have followed that page's duplicate link for the right post ;) — nzifnab, Mar 18 '14 at 16:02

score 7 · Answer 1 · edited Mar 18 '14 at 16:04

It is a very typical convention where a developer will prefix a variable name with $ to indicate it is a jQuery object, and will have access to all the typical jQuery methods. It is not a selector.

In your example you have this: var $parent = $(this).parent();. This is a reference to the DOM object, once you have saved that, you can use it multiple times:

You can do this:

$(this).parent().css('color', 'green');
$(this).parent().css('border', '1px solid pink');
$(this).parent().css('background', 'purple');

In this example, jQuery will select the $(this) object, and then select its parent

You can also do this:

var $parent = $(this).parent();
$parent.css('color', 'green');
$parent.css('border', '1px solid pink');
$parent.css('background', 'purple');

You have saved the reference to the parent, and made jQuery only look it up once.
*Small sidenote: The css method can be done better, I did it this way for demo-purposes *

True enough, you don't have to read from the DOM on subsequent uses, therefore the performance is better. — Mister Epic, Mar 18 '14 at 16:13

score 4 · Answer 2 · answered Mar 18 '14 at 16:00

$parent is a variable name. It has nothing to do with the jQuery library.

Many developers use the $ prefix for variables to identify them as jQuery collections.

The dotted functions (i.e. $.post and $.each) are simply indicative that they're part of the jQuery library, for example (and I hasten to add this isn't how jQuery is written!):

var $ = {
    post: function() {  },
    each: function() {  }
}

In the above example, we can now access the two functions as $.post() and $.each() respectively.

When you use $(this), you're taking the current HTML Object, and generating a jQuery object so that you can use the added functions that jQuery brings to the table. For example:

this.style.color = '#000';

Is identical to doing something like:

$(this).css('color', '#000');

Might be nice to know that the `this.style.color` is the faster method. This because you set the attribute direct, where the jQuery method uses the function `.css()`, which performs some checks (and thus takes time). The `.css()` method has an advantage, they fix some crossbrowser problems, like opacity — Martijn, Mar 18 '14 at 16:08

score 1 · Answer 3 · answered Mar 18 '14 at 16:00

1

$ before a variable is just a convention. A lot of people us it to describe a variable which is a jQuery object. It doesn't actually do anything special. You could prefix all of your javascript variables with it if you wanted to (not sure why you would, but it would be valid).

It's similar to the convention many devs use to denote that a variable/method should be private (_privateVar).

answered Mar 18 '14 at 16:00

brbcoding

12,042
2
33
50

Ok, thanks, just weired to me to use it only for this one, not the others. Thank you all it aswered my question :) – Neovea Mar 18 '14 at 16:11

score 1 · Answer 4 · answered Mar 18 '14 at 16:01

1

$parent is just a variable name, you can use parent as well if you want.

$(this) is just a local copy of this wrapped in jQuery in order to utilize jQuery method.

answered Mar 18 '14 at 16:01

Felix

36,929
7
39
54

Is jquery $(this). the same as $?

4 Answers4