Difference between $(this) and ‘this’ in jQuery
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 >GeekForBeginner</ 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. |
Contact Us