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>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</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>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</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>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</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>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</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>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</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. |
Similar Reads
Difference Between css(‘width’) and width() methods In jQuery In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example. jQuery CSS('width') Method: It is a method present in jQuery which is used to get or set the property on the matched elemen
3 min read
Difference between text() and html() method in jQuery Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selec
2 min read
Difference between prop() and attr() Methods in jQuery In this article, we will learn about the differences between the prop() and the attr() in JQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery
2 min read
Difference Between this and address(this) in Solidity Solidity is a high-level programming language that is designed for the implementation of a smart contract. Solidity is the language that is in its initial stages and is constantly evolving. There are many breaking changes that have been brought into solidity since its implementation. The current ver
3 min read
What is the difference between self and $this ? The keyword self is used to refer to the current class itself within the scope of that class only whereas, $this is used to refer to the member variables and function for a particular instance of a class. PHP self operator: The self operator represents the current class and thus is used to access cl
2 min read
Difference between html() text() and val() methods in jQuery In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage. 1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content
4 min read
Difference between jQuery and Dojo jQuery is a Javascript library. jQuery is also known as the "write less, do more" library, because of writing fewer lines of code. It consists of multiple events such as jQuery click(), jQuery dbclick(), jQuery mouseenter(), etc. It makes things like HTML document traversal and manipulation, etc. DO
3 min read
Difference between on() and live() or bind() in jQuery jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector
3 min read
Difference between jquery.size() and jquery.length JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for "p" tag, then it will return the number of "p" tags present on our page. Syntax: $(selector).size() Return value: It returns the number of “selector†present. Example: HTML <!DOCTYPE
2 min read
Difference between hover() and mouseover() methods in jQuery Before learning the difference between the hover() and mouseover() method of jQuery, let's briefly see both methods. hover() Method: When we hover our mouse cursor to any element, two events happen i.e. mouseenter and mouseleave. mouseenter: When we bring the cursor over the element.mouseleave: When
3 min read