Difference between $(this) and this in jquery

Question

What is the fundamental difference between using $(this) vs this

$('.viewComments').click(function(ev){
    //returns the desired value
    alert(this.getAttribute('id'));

    //Gives an error sayin function is not defined 
    alert($(this).getAttribute('id'));

    //returns the desired value
    alert($(this).attr('id'));
});

What I thought was "$(this)" will contain all functions that "this" has and more..But that doesn't seem to be the case.

So what exactly is $(this)? and

Hw do I know what functions are available when I'm using it? (I know I can get them through firebug. but I would like to know if there any some other way- some doc may be)

possible duplicate of [Why do I have to use $(this)](http://stackoverflow.com/questions/3316113/why-do-i-have-to-use-this) — jAndy, Sep 03 '10 at 06:48

score 156 · Accepted Answer · answered Sep 03 '10 at 05:42

156

this is the DOM object, whereas $(this) is the jQuery wrapper around same.

When using this, you can call DOM methods on it, but not jQuery methods. When using $(this), you can call jQuery methods on it, but not DOM methods.

answered Sep 03 '10 at 05:42

C. K. Young

219,335
46
382
435

So is it more advantageous or a best-practice to use $(this) over this in my jquery code? – Sheldon Fernandes Sep 03 '10 at 06:55
1

@Sheldon: Of course. You want to be able to use all the juicy jQuery goodness, don't you? :-) – C. K. Young Sep 03 '10 at 07:10
if so, how can I get DOM methods and jQuery methods only using one 'this' ? – Aldi Unanto Jun 10 '14 at 07:20
@AldiUnanto Why would you want to do such a thing? You don't ever want to mix the two up. – C. K. Young Jun 10 '14 at 07:56
@ChrisJester-Young just for shorten way, if possible – Aldi Unanto Jun 11 '14 at 00:42
1

@AldiUnanto Maintainable coding is not [golfing](http://codegolf.stackexchange.com/). :-) You really should not mix the two up if you want your code to stay maintainable. But if you really insist, there are some monkey-patching tricks you can use. You didn't hear this from me. – C. K. Young Jun 11 '14 at 04:25

score 10 · Answer 2 · answered Sep 03 '10 at 05:40

10

$(this) - represent current DOM element on which event this function is called

The this keyword - In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.

answered Sep 03 '10 at 05:40

Pranay Rana

175,020
35
237
263

It helps to note that `$(this)` represents the DOM element wrapped as a jQuery object *because* and *when* `this` refers to the DOM element as a native DOM API object – sharat87 Sep 03 '10 at 05:46

score 3 · Answer 3 · edited Apr 11 '16 at 13:02

3

In jQuery, this refers to the DOM object, and $(this) refers to the same object but with jQuery methods added

you can't call this.each() because each is not a DOM method, its a jquery method

you can call $(this).each() because $(this) returns a jquery object

edited Apr 11 '16 at 13:02

Rino Raj

6,264
2
27
42

answered Sep 03 '10 at 05:59

each

31
1

score 2 · Answer 4 · answered Sep 03 '10 at 05:39

2

$(this) is the current object that was selected using a jQuery selector or event attached to the object.

so if you have $('#myelement').click(..... then $(this) referes to the element that was clicked on so that $(this).hide() hides that element.

answered Sep 03 '10 at 05:39

griegs

22,624
33
128
205

score 2 · Answer 5 · answered Sep 03 '10 at 05:46

2

Here are two articles that you may find helpful:

What is this? by Mike Alsup

jQuery's this: demystified by Remy Sharp

answered Sep 03 '10 at 05:46

Alek Davis

10,628
2
41
53

score 1 · Answer 6 · edited Sep 03 '20 at 13:07

1

in jQuery the $() notation is a shorthand for the jQuery selector, so if you say $(this) you are asking jQuery to re-select your object. Then you have the usual jQuery functions available.
Then, this is the object selected by the outer jQuery call (JavaScript).

edited Sep 03 '20 at 13:07

xKobalt

1,498
2
13
19

answered Sep 03 '10 at 05:42

Marco

1,346
8
9

score 0 · Answer 7 · answered Mar 30 '18 at 05:40

0

$(this) is a jQuery object and you can use the power and beauty of jQuery, but with 'this' keyword, one need to use native JavaScript.

answered Mar 30 '18 at 05:40

Jithi Vasudev

13
4

Difference between $(this) and this in jquery

7 Answers7

Linked