What is the difference between “this”, “$this” and “$(this)”?

Question

What is the difference between these three forms:

this
$this
$(this)

Answer 1

• this is the object upon which a method was called
• $this is a poorly named variable with no special meaning
• $(this) calls the poorly named function $ with this as its only argument

Answer 2

In the context of jQuery, 'this' is the object upon which a method was called. '$this' is indeed a poorly named variable with no special meaning. '$(this)' passes 'this' to jQuery, which will return a jQuery object associated with whatever 'this' is, as long as 'this' is a DOM object.

Answer 3

In typical usage you'll usually see them like this (the $this usage may vary):

• this - Refers to the DOM element in the handler you're currently on, but this may be another object entirely in other situations, but it's always the context.
• $this - Usually created by var $this = $(this) a cached version of the jQuery wrapped version for efficiency (or chain off $(this) to get the same in many cases).
• $(this) - The jQuery wrapped version of the element, so you have access to all its methods (the ones in $.fn specifically).

Answer 4

Your question would be better served with more context.

However I assume you're asking about variables within the context of a callback on an element's event (click for example).

• this is the context of your handler (normally the DOM element, in the case of a DOM event handler)
• $this is usually used to store the result of $(this)
• $(this) returns the jQuery object that wraps this - see the jQuery documentation for more information.

Answer 5

Expanding on what David said:

• $this is usually used to have a copy of the this object in the current scope. For example with var $this = this; you can use the variable $this anywhere in the current scope and always be able to reference that object that would otherwise change if simply referenced with this... I personally dislike the $this naming convention and prefer something like var parentScope

• $(this) is a function (var $ = function(){}) used by some frameworks like jQuery or PrototypeJs. The reason it is used is because $ is very easy to type instead of someLongFunctionName and because it is usually called many times in the code it's easier to have it be as short as possible

Answer 6

this

"this" - is a keyword, like "if", "while", etc. You cannot assign to it directly.

// won't work
this = 'foo';

// true, in the top-level scope "this" points to window object
alert(this === window);

Read more about "this" keyword.

$this

It's just a name of a variable. Like foo, bar, etc. You can assign values to it. It's usually used in jQuery event handles, where "this" refers to unwrapped DOM object.

$('a').click(function() {
  this; // refers to <a> DOM node
  var $this = $(this); // here, we wrap the DOM node into jQuery object
  var link = jQuery(this); // the same as previous line, but the name of variable is different
});

Picking a name of a variable is a matter of taste. I usually prefix everything I wrap in jQuery with $.

container = document.getElementById('wrap');
// but
$container = $(container);
// or simply
$container = $('#wrap');