Difference between $(this) and ‘this’ in jQuery
Last Updated :
15 Dec, 2022
In this article, we will learn the difference between this and $(this) in jQuery.
this keyword: In JavaScript, this keyword is used to refer to the object it belongs to. The value that this stores is the current execution context of the JavaScript program.Thus, when used inside a function this value will change depending on how that function is defined, how it is invoked and the default execution context.
Example 1: We will use this in an object method which refers to the owner of the object.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< p >The object's value for name: </ p >
< p id = "paraID" ></ p >
< script >
const obj = {
name: "hrithik",
roll: 36,
mydata: function () {
return this.name;
}
}
document.getElementById("paraID")
.innerHTML = obj.mydata();
</ script >
</ body >
</ html >
|
Output:
The object's value for name:
hrithik
Example 2: We will use this keyword on event handlers which refers to the element on which the event is called.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< p id = "clickme" >
< b > Click this to change color.</ b > < br >
</ p >
< script >
$("#clickme").click(function () {
this.style.color = "green"
})
</ script >
</ body >
</ html >
|
Output:
$(this): It also refers to the object it belongs to. Basically, both are the same. But when this keyword is used inside $(), then it becomes a jQuery object, and now we can use all properties of jQuery on this method.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< b >
< p >Click to change color</ p >
</ b >
< p >GeekForGeeks</ p >
< script >
$("p").click(function () {
$(this).css("color", "red");
});
</ script >
</ body >
</ html >
|
Output:
Difference between this and $(this)
The this Keyword is a reference to DOM elements of invocation. We can call all DOM methods on it. $() is a jQuery constructor and in $(this), we are just passing this as a parameter so that we can use the jQuery function and methods.
Example 1: The below code will not work because we are calling a jQuery method on a DOM element. Refer to the output for better understanding. The hiding does not happen.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< p class = "div1" >
Hello
</ p >
< script >
$(".div1").click(function ()
{
// this refers to the DOM element
// so the following line would fail
this.hide();
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This code works fine because we have implemented this into $() and now it becomes a jQuery object.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< p class = "div1" >
Hello
</ p >
< script >
$(".div1").click(function () {
// this refers to the DOM element
//so the following line would fail
$(this).hide();
});
</ script >
</ body >
</ html >
|
Output:
Difference between this and $(this)
this
|
$(this) |
It refers to DOM elements |
It also refers to DOM elements. |
this is used in a native way. |
this is put in $(), it becomes a jQuery object. |
We can call all DOM methods on it but not jQuery methods. |
We can call all jQuery methods and functions on it but not DOM methods. |
this has only generic JavaScript functionality. |
By using $(this), you enabled jQuery functionality for the object. |
Share your thoughts in the comments
Please Login to comment...