Open In App

Difference between $(this) and ‘this’ in jQuery

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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=
    </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=
    </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=
    </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.


Last Updated : 15 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads