How does the "this" syntax work?

Question

Is this line

$(this).attr("id").replace("_button","");

equivalent to this one?

this.attr("id").replace("_button","");

Answer 1

since this always contains a reference to the object of invocation, it really depends where you call that code.

If you call this within a jQuery event handler, this is a reference to the DOM element itself, so you need to translate it into a jQuery object by calling $() before you can call jQuery methods on it. That in turn means

this.attr("id").replace("_button","");

will not work there.

If you're writting a plugin method for instance, this already IS a jQuery object (reference) and both lines would actually do the same. Of course, if this already is a jQuery object you doing extra work, trying to parse it again.

example:

$.fn.yourplugin = function(){
     // this refers to a jQuery object
     return this.each(function(i,v){
     });
});

Answer 2

It depends on the context, but probably not.

If you have an event handler, say:

$('#_button_foo').click(function() {
     $(this).attr("id").replace("_button","");
});

Then this will refer to the DOM element whereas $(this) creates a jQuery object and let you call jQuery functions on this object.

---

On the other side, if you develop a plugin and have

jQuery.fn.plugin = function() {
     this.each(function() {...});
}

then this refers to the jQuery object you call the method on.

Answer 3

this refers to the object it is used in. In the global scope it refers to window and in a method call it refers to the object the method is called on.

In your case this will probably refer to an element in the DOM that is fetched with some other jQuery mechanism like an event (click, hover, etc.) or an iteration over a list of elements (like jQuery.each). In that case you only get that DOM element but not a jQuery object with the extension of jQuery methods like attr. So you need to turn it into an jQuery object using the $ constructor function.

Answer 4

The $(this) will turn the DOM Object into a jQuery object, so you can use the jQuery functions.

So $(this) and this are not the same.

Answer 5

In Javascript, the keyword 'this' refers to the object whose context you're in. So if you're calling myObj.method1(), then inside method1's code, 'this' would refer to myObj.

In jQuery, most operations return a jQuery result set object, often called a jQuery wrapper. For example, the selector $("a") would return a jQuery result set that contains all the <a> DOM elements. $("a").get(0) would return the first anchor DOM element, $("a").get(1) would return the second anchor, etc.

So $(this) refers to the jQuery wrapper object, and this refers to the DOM element.

So to sum it all up: $(this).get(0) would be the same as this.

Answer 6

It depends on which context you are using it.

$(this) is a jQuery object and this is a DOM object.

So, they are not same.

If you are developing jquery plugin then this is same as $(this).