blocks|key|932673|text|$(this)用jQuery功能包装了this。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|932674|例如，以下代码将失败：|932675|$('.someDiv').onClick(function(){
++++//+this+refers+to+the+DOM+element+so+the+following+line+would+fail
++++this.fadeOut(100);
});|code-block|syntax|javascript|932676|所以我们将this包装在jQuery中：|932677|$('.someDiv').onClick(function(){
++++//+wrap+this+in+jQuery+so+we+can+use+jQuery+fadeOut
++++$(this).fadeOut(100);
});|932678|entityMap^0|0|7|J|4|0|0|0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<code>$(this)</code> wraps <code>this</code> with the jQuery functionality.

For example, this code would fail:

<pre><code>$('.someDiv').onClick(function(){
 // this refers to the DOM element so the following line would fail
 this.fadeOut(100);
});
</code></pre>

So we wrap <code>this</code> in jQuery:

<pre><code>$('.someDiv').onClick(function(){
 // wrap this in jQuery so we can use jQuery fadeOut
 $(this).fadeOut(100);
});
</code></pre>

blocks|key|1147160|text|如果在当前上下文中，如果this不是jQuery对象，则可以通过将其包装在jQuery中使其成为$()元素。当您的元素已经是jQuery表达式的结果时，这种情况下的this已经是一个jQuery对象。因此，在这种情况下，它们的工作方式类似|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1147161|entityMap^0|C|4|1C|3|2A|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If in your current context if the <code>this</code> is not a jQuery object, you can make it a jQuery element by wrapping it around <code>$()</code>. When your element already is a result of jQuery expression, the <code>this</code> in that case is already a jQuery object. So in that case they both work similarly

blocks|key|1147217|text|$(this)用jQuery函数装饰this指向的任何对象。典型的用例是让this引用一个DOM元素(比如<div>)。然后，通过编写$(this)，您可以使用该<div>上的所有jQuery应用编程接口函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1147218|如果this已经引用了一个jQuery对象--通常是一个经过jQuery修饰的DOM对象--那么调用$(this)将不会有任何效果，因为它已经被修饰过了。|1147219|entityMap^0|0|7|I|4|11|4|1H|5|1V|7|29|5|0|2|4|1E|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$]]

<code>$(this)</code> decorates whatever object <code>this</code> points to with the jQuery functions. The typical use case is for <code>this</code> to reference a DOM element (say, a <code>&lt;div&gt;</code>). Then, writing <code>$(this)</code> allows you to use all the jQuery API functions on that <code>&lt;div&gt;</code>.

If <code>this</code> already refers to a jQuery object - usually a jQuery-decorated DOM object - then calling <code>$(this)</code> will have no effect because it's already decorated.

blocks|key|932854|text|this是在附加到对象的函数中创建的javascript变量。在这些情况下，this引用该对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|932855|$(this)返回一个jQuery对象，您可以对其调用jQuery函数，但该对象仅适用于this。|932856|例如，如果您为所有锚点设置了一个单击处理程序：|932857|$('a').click(function()+{
++++console.log(this.href)+;
})+;|code-block|syntax|javascript|932858|然后，this引用点击事件(函数)所附加到的锚点。|932859|entityMap^0|0|4|12|4|0|0|7|18|4|0|0|0|3|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|R|$]]

<code>this</code> is a javascript variable created whenever you are inside a function which is attached to an object. In these cases, <code>this</code> refers to that object.

<code>$(this)</code> returns a jQuery object which you can call jQuery functions on, but will apply only to <code>this</code>.

For example, if you set a click handler for all anchors:

<pre><code>$('a').click(function() {
 console.log(this.href) ;
}) ;
</code></pre>

then the <code>this</code>, refers to the anchor, which the click event (function) is attached to.

blocks|key|1147360|text|为了让你更好地理解，可以给自己找一个像google+chrome这样的调试器，然后这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1147361|$('a').click(function(){
++++console.log(this);+//DO
++++console.log($(this));+//JO
});|code-block|syntax|javascript|1147362|这将向您展示其中的区别:)|1147363|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

for you to understand a little bit better, get yourself a debugger of somekind such as google chrome and do this..

<pre><code>$('a').click(function(){
 console.log(this); //DO
 console.log($(this)); //JO
});
</code></pre>

this will show you what the difference is :)

blocks|key|1147413|text|在JavaScript中，这总是指正在执行的函数的“所有者”。使用$(this)将只包装所有者，这样所有的jQuery操作都将被扩展并可供其使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1147414|考虑一下：|1147415|$links+=+$('#content+a');

$links.click(function()+{
++++link++=+this;
++++$link+=+$(this);+//jQuery+wrapped+object.

++++alert(link.getAttribute('href'));++++++++
++++alert($link.attr('href'));+//we+can+use+the+attr()+function+from+jQuery
});|code-block|syntax|javascript|1147416|它们通常给出相同的结果，因为所有者是相同的，只是当它被jQuery包装时，它可以与jQuery函数一起操作。|1147417|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In JavaScript this always refers to the “owner” of the function that is executing. Using $(this) will only wrap the owner so that all the jQuery operations will be extended and available to it.

Consider:

<pre><code>$links = $('#content a');

$links.click(function() {
 link = this;
 $link = $(this); //jQuery wrapped object.

 alert(link.getAttribute('href')); 
 alert($link.attr('href')); //we can use the attr() function from jQuery
});
</code></pre>

They usually give the same results since the owner is the same, only that when wrapped by jQuery it can operate with the jQuery functions.

blocks|key|933091|text|$(+this+)+==+this？有意思的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|933092|这不能通过DOM事件传递。|933093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

$(this) == this ? interesting. 

this must not pass by DOM event.

What's the difference between <code>$(this)</code> and <code>this</code> in jQuery, and why do they sometimes give the same result and other times behave differently?

What's the difference between $(this) and this in jQuery?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在jQuery中，$(this)和this有什么不同?为什么它们有时给出相同的结果，而有时表现不同？

问在jQuery中，$( this )和this有什么不同？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中，$( this )和this有什么不同？EN