Edit
The answers pointed out that keyword this is used in jQuery just as in any JavaScript code. That is, an object method receives the object itself as this, this is what happens with $.fn functions (they are called on jQuery objects). Event handler functions are callback functions, they are not object methods, and it is the caller that decides what this will refer to inside the function. It normally references a DOM element.

Original question

The differece between this and $(this) is often explained as this references a DOM object, while $(this) references a jQuery object (a DOM element with a jQuery wrapper around it).
In the following example, the handler function is passed this as a DOM element, and by wrapping it in $() we make a jQuery object from it, thus we can use on it the functions living in the $.fn namespace.

$('div').on('click', function(event){
    event.preventDefault();
    $(this).css('backgroundColor', 'red');
});

However, I have just e across this explanation on learn.jquery:

Plugins | jQuery learning center

$.fn.greenify = function() {
this.css( "color", "green" );
};
$("a").greenify(); // makes all the links green

// Explanation provided by the author of the article:
// "Notice that to use css(), another method, we use this, not $( this ).
//  This is because our greenify function is a part of the same object as css()." 

Does it mean that this references a DOM object when passed to an event handler function, but refers to a jQuery object when passed into a jQuery object method?
In fact, it makes sense, since the method is called on a jQuery object, thus it is logical to pass it a jQuery object.

Edit
The answers pointed out that keyword this is used in jQuery just as in any JavaScript code. That is, an object method receives the object itself as this, this is what happens with $.fn functions (they are called on jQuery objects). Event handler functions are callback functions, they are not object methods, and it is the caller that decides what this will refer to inside the function. It normally references a DOM element.

Original question

The differece between this and $(this) is often explained as this references a DOM object, while $(this) references a jQuery object (a DOM element with a jQuery wrapper around it).
In the following example, the handler function is passed this as a DOM element, and by wrapping it in $() we make a jQuery object from it, thus we can use on it the functions living in the $.fn namespace.

$('div').on('click', function(event){
    event.preventDefault();
    $(this).css('backgroundColor', 'red');
});

However, I have just e across this explanation on learn.jquery.:

Plugins | jQuery learning center

$.fn.greenify = function() {
this.css( "color", "green" );
};
$("a").greenify(); // makes all the links green

// Explanation provided by the author of the article:
// "Notice that to use css(), another method, we use this, not $( this ).
//  This is because our greenify function is a part of the same object as css()." 

Does it mean that this references a DOM object when passed to an event handler function, but refers to a jQuery object when passed into a jQuery object method?
In fact, it makes sense, since the method is called on a jQuery object, thus it is logical to pass it a jQuery object.

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow edited Apr 18, 2013 at 7:16 asked Apr 17, 2013 at 20:25 user1563285user1563285 1

• 3 In JavaScript, doing object.myMethod() automatically makes object the value of this inside .myMethod(). So $("a").greenify() makes the jQuery object the value of this in .greenify(). – user1106925 Commented Apr 17, 2013 at 20:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

The "this" identifier has nothing to do with jQuery, it's an integral part of javascript.

You can check this link which provides a detailed explanation of the "this"-keyword: http://www.devign.me/javascript-this-keyword/

In a jQuery plugin method this is already the jQuery object. Thus, you can use jQuery methods directly on this.

This has nothing to do with event handlers. It's because when a method is called on an object (a jQuery object in this case), javascript sets this to point to the object. So, since the object in this case is a jQuery object, that's what this is.

An event handler callback function is not a method call so it works differently - it's a callback and the caller of the callback decides what to set this to using either .call() or .apply(). For most event handler callbacks the code specifically decides to set this to the DOM object that triggered the event.

That's because in your greenify plugin, there is no callback involved, no event handler.

It is called by

$("a").greenify();

which means that this, inside the function, is the receiver, that is $("a"), just like this, in b when you execute a.b(); is a.

.greenify is invoked as a method on the jQuery instance. If you look in the jQuery source, you'll find

jQuery.fn = jQuery.prototype = {
  // All the goodies...

which shows that your understanding is correct.