Home Web Front-end JS Tutorial Personal understanding of this and $(this)_jquery

Personal understanding of this and $(this)_jquery

May 16, 2016 pm 05:23 PM
this

Copy code The code is as follows:

jQuery.prototype.test=function(){
this. css("color","#99");//This here is a jquery object, not a dom object
alert(this[0]);//This[0] here refers to the dom node object
}

Copy code The code is as follows:

$( "body").click(function(){
$(this).test();
$(this).test().html(this.nodeName).hide(10000);
})

When using the click method on the page, it is equivalent to creating a new Jquery object and then calling its click method. The parameter in the method is a javascript function, and this inside refers to JavaScript object, this is the syntax keyword of JavaScript itself. It points to a JavaScript object, so you can use the method

owned by the pointed target JavaScript object. And jQuery.prototype.test is equivalent to the query object. Create a new test method, so the this inside should be the jquery object

. Through this[0], the jquery object can be converted into a dom node object
because this always points to the calling method (function ) of the object (except call and apply methods)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Let's talk about why Vue2 can access properties in various options through this Let's talk about why Vue2 can access properties in various options through this Dec 08, 2022 pm 08:22 PM

This article will help you interpret the vue source code and introduce why you can use this to access properties in various options in Vue2. I hope it will be helpful to everyone!

An article that understands this point and catches up with 70% of front-end people An article that understands this point and catches up with 70% of front-end people Sep 06, 2022 pm 05:03 PM

A colleague got stuck due to a bug pointed by this. Vue2’s this pointing problem caused an arrow function to be used, resulting in the inability to get the corresponding props. He didn't know it when I introduced it to him, and then I deliberately looked at the front-end communication group. So far, at least 70% of front-end programmers still don't understand it. Today I will share with you this link. If everything is wrong If you haven’t learned it yet, please give me a big mouth.

Clever way to use this keyword in jQuery Clever way to use this keyword in jQuery Feb 25, 2024 pm 04:09 PM

Flexible use of this keyword in jQuery In jQuery, the this keyword is a very important and flexible concept. It is used to refer to the DOM element currently being manipulated. By rationally using this keyword, we can easily operate elements on the page and achieve various interactive effects and functions. This article will combine specific code examples to introduce the flexible use of this keyword in jQuery. Simple this example First, let's look at a simple this example. Suppose we have a

What is this? An in-depth analysis of this in JavaScript What is this? An in-depth analysis of this in JavaScript Aug 04, 2022 pm 05:02 PM

What is this? The following article will introduce you to this in JavaScript, and talk about the differences between this in different calling methods of functions. I hope it will be helpful to you!

How does JavaScript change this pointer? Brief analysis of three methods How does JavaScript change this pointer? Brief analysis of three methods Sep 19, 2022 am 09:57 AM

How does JavaScript change this pointer? The following article will introduce to you three methods of changing this pointer in JS. I hope it will be helpful to you!

How to use this method in Java How to use this method in Java Apr 18, 2023 pm 01:58 PM

1. this keyword 1. Type of this: Which object is called is the reference type of that object 2. Usage summary 1. this.data;//Access attribute 2. this.func();//Access method 3.this( );//Call other constructors in this class 3. Explanation of usage 1.this.data is used in member methods. Let us see what will happen if this is not added classMyDate{publicintyear;publicintmonth;publicintday; publicvoidsetDate(intyear,intmonth,intday){ye

Detailed explanation of this in JavaScript arrow function Detailed explanation of this in JavaScript arrow function Jan 25, 2024 pm 01:41 PM

The arrow function in JavaScript is a relatively new syntax. It does not have its own this keyword. On the contrary, the this of the arrow function points to the scope object containing it. The impacts are: 1. This in the arrow function is static; 2. Arrow Functions cannot be used as constructors; 3. Arrow functions cannot be used as methods.

Let me explain in detail the four binding rules of this Let me explain in detail the four binding rules of this Nov 01, 2022 pm 05:49 PM

The this keyword is one of the most complex mechanisms in JavaScript. It is a very special keyword that is automatically defined in the scope of all functions. But even very experienced JavaScript developers have a hard time telling what exactly it points to.

See all articles