javascript – What is the difference between $(this) and $this and this?


I always used $(this) regardless of the situation and it always worked. Rarely have I had to use one of the others and these times I did it because of someone's guidance and not because I knew exactly what I had to do.

  • So what's the difference between the 3 types of this?
  • When should I use one and when should I use another?
  • Does it somehow change the performance of the code?


Simple version:

this – simple object. Nodejs DOM, window or global element
$this – a simple variable, it can have any value
$(this) – jQuery object with methods that jQuery provides

Longer version:

  • this when pointing to an element

When we use this inside for example an event handler we are referring to the raw, simple, original element.


$('#minhadiv').click(function(){ alert(}); // dá: "minhadiv" quando clicado
  • this when in global scope

When we use this in global space we are referring to window or global if it is in NodeJS

    glob.variavelXPTO = '2014!';
alert(variavelXPTO); // dá: 2014 - note que está no escopo global
  • $this is a simple variable

$this is used as a simple variable. Very common to use $this = $(this); which is a way to store the jQuery object reference in scopes where the this is other, such as inside an Ajax call or inside a Class.

var $this = 'that';
alert($this); // dá: "that" - aqui o $this guarda simplesmente uma string
var $this = $('#minhadiv');
alert($this.attr('id')); // dá: "minhadiv", ou seja retorna a id via método .attr() do jQuery
  • $(this) is this but with jQuery powers!

In order to use jQuery methods on objects, you must pass the object as a parameter to the jQuery $() . Then the function returns a new object with the methods that jQuery makes available. It can be used in arrays, for example $(['foo', 'bar']).each(minhaFn);

Example using something from the first example:

$('#minhadiv').click(function(){ alert(}); // dá: minhadiv
$('#minhadiv').click(function(){ alert($(this).id)}); // dá erro
$('#minhadiv').click(function(){ alert($(this).attr('id'))}); // dá: minhadiv

    $(this).closest('.main'); // aqui vai procurar o elemento pai com a classe "main"

To do the same as $(this).closest('.main'); does but in pure JavaScript, ie using this had to be something like:

 var closestByClass = function(el, clz) {
    while(el && el != document) {
      var p = el.parentNode;
      var classes = ((p && p.className) || '').split(/\s+/);
      if (arrayIncludes(classes,clz)) {
        return p;
      else {
        el = p;
    return null;

Which takes more work to write 😛

To remove the original element from inside a jQuery object we can use index, ie var divs = $('div'); gives an array-like object where divs[0] is the first div, raw. would be the same as with this . You can also use .get() to fetch the raw, simple object of the jQuery object

Scroll to Top