this Object on jQuery Event
FREE
Overview
In my early experiments with jQuery and more advanced JavaScript, I frequently found myself puzzled by the meaning of this object in jQuery and my own new libraries. Hopefully, this fast guide will help clear any confusion because once you've got it, it's as easy as pie.
Introduction to this in JavaScript
This keyword is used in JavaScript to refer to the object to which it belongs. The value stored here is the JavaScript program's current execution context. As a result, the value of the this variable changes depending on how the function is defined and invoked and the default execution context.
Variables in JavaScript have a scope, and objects have context. A local variable called this exists in a function. It is scoped to the function, but if none is specified in the context of the owner object, that object is a window.
Let’s try something to see what happens:
Note that even within the method, the local variable this is window because the function is running in the context of the Window object. Even though the anonymous function is defined in the function scope, it is scoped to the Window because the variable is declared there first.
Let’s create an object and understand this a little further:
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
About $(this) in jQuery
In jQuery, we write this as a jQuery object, $(this). Note that there are no quotes since this is a variable.
jQuery this - .click() Example:
Consider some li tags on a web page. If someone clicks any li tags, we want to alter the colors of the clicked li tags. To access the clicked li tags, we can utilize the jQuery this selector.
Have a look at the following jQuery code for doing this task:
jQuery this - .each() Example
Now let's use the jQuery this selector with the .each() method. We will utilize the class myclass to modify the color of elements.
Code
Here is the jQuery code:
Turn Learning into Career Growth
jQuery this - .append() Example
Now let's see the use of the .append() method in jQuery. Suppose we have a button, and when it is clicked, we need to append some text to it. We can attach the text with $(this) in jQuery.
Example:
jQuery this - .focus() Example
Now let's see what the .focus() method is. Suppose we have a text box and on its focus event we will change its border using jQuery this selector.
Let's look at the code:
jQuery this - .hover() example
Now let's see how to use $(this) in jQuery cursor events.
Suppose we have a span element. When the mouse is over it, the text-decoration is underlined, and when the mouse is removed, the text-decoration is gone.
Example:
Usage of this Keyword in jQuery Event Handler
In an event handler, the keyword this denotes a DOM element that triggered an event.
Example:
Conclusion
- In this article, we have gone through the basics of this object in jQuery.
- You'll be fine as long as you remember that the context of this changes when moving in and out of object methods.
- Now you can implement this in your jQuery code and practice writing code to get familiar with it.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more