What is the difference between $(this) and this

Question

I have the following code

$('a').click(function() {
var url= this.href;
alert(url);
});

This works just fine and sure enough the returned result is the url of a tag.

However if I change the above code to

$('a').click(function() {
var url= $(this).href;
alert(url);
});

The result is undefined.

Anyone please help to clear this out for me? I am banging my head for this ....

Answer 1

$(this) creates a jQuery object which wraps this. The native DOM object has an href attribute, but jQuery does not.

$(this).attr("href") would work.

Answer 2

this in your case is the actual dom element, so the anchor tag

$(this) is a jquery object that wraps that dom element with all the jquery goodness.

so .href is not an attribute of that jquery object, but it is of the dom object.

you could use $(this).attr('href') to achieve the same thing using the jQuery object.

Answer 3

This is because you're using a javascript DOMElement in the first example and a jQuery Object in the second example. The jQuery Object wraps around the DOMElement and provides you a lot of features.

You can access the url as follow:

$('a').click(function() { var url= $(this).attr('href'); alert(url); });

Answer 4

The difference is between a DOM element and a jQuery selection.

"this" in the code you've given above is a reference to the link's DOM element. $(this) creates a jQuery selection based upon the DOM element that contains only that link.

The jQuery selection will give you different features at the cost of a little performance. Your link element has a href property (i.e. one you can access through this.href) whereas the jQuery selection has all the normal jQuery properties & methods.

For getting the link target, this.href is definitely the way to go. It is simpler, faster and less verbose.