What's the difference between $(this) and this in jQuery?

Question

What's the difference between $(this) and this in jQuery, and why do they sometimes give the same result and other times behave differently?

Answer 1

$(this) wraps this with the jQuery functionality.

For example, this code would fail:

$('.someDiv').onClick(function(){
    // this refers to the DOM element so the following line would fail
    this.fadeOut(100);
});

So we wrap this in jQuery:

$('.someDiv').onClick(function(){
    // wrap this in jQuery so we can use jQuery fadeOut
    $(this).fadeOut(100);
});

Answer 2

$(this) decorates whatever object this points to with the jQuery functions. The typical use case is for this to reference a DOM element (say, a <div>). Then, writing $(this) allows you to use all the jQuery API functions on that <div>.

If this already refers to a jQuery object - usually a jQuery-decorated DOM object - then calling $(this) will have no effect because it's already decorated.