In the jQuery context, the this
keyword refers to the current DOM element targeted by a jQuery selector. If you use it within the $()
expression, you're actually using a jQuery object, meaning that you can still use all the jQuery's methods and properties. Instead, if you refers it as $(this)[0]
, you're actually using a normal DOM element and for that reason you're outside the jQuery chain, so that you can't use jQuery's methods directly. So $(this)[0].addClass('test')
won't work, but the normal DOM property $(this)[0].className
will work as expected, because you're actually using a DOM node, not a jQuery object.
The following video shows you a practical example of where the this
keyword comes into play. The example provided there is really detailed.