为什么在jQuery插件中使用它而不是$（this）？

Question

我正在阅读教程here

它创建的基本插件是这样的：

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify();

我的问题是，如果我使用的话会有什么区别：

$(this).css();

而不是使用

this.css();

Answer 1

在jQuery插件方法中，this已经是主机jQuery对象。因此，执行$(this)会有效，但它是多余的（创建一个新的jQuery对象，其中包含相同的DOM元素），因此是浪费的代码。所以，这很好用：

$.fn.greenify = function() {
    this.css( "color", "green" );
};

所有jQuery插件方法都适用。

---

但是，在其他上下文中，例如在事件处理程序中，例如：

$("myButton").click(function(e) {
   // this is the DOM element
   $(this).css("color", "red");
});

this只是DOM元素，因此如果您想要使用jQuery对象，则需要执行$(this)。

Answer 2

如果您在对象上进行呼叫，就像在此处一样

$( "a" ).greenify();

然后在函数this内将指向该对象。

这不是jQuery特有的，这就是Javascript对象的工作原理。

所以在这种情况下，this将是$("a")，即已经是jQuery对象（你可以再次将它包装在$()中，这不会有害，但它是多余的）

在其他情况下（例如直接与DOM交互时），this可能是其他内容。如果它是一个DOM节点并且您想将它与jQuery一起使用，则必须将其“升级”，方法是将其包装在$()中。

Answer 3

在这种特定情况下，this已经是一个JQuery对象，如下所示：

$.fn.greenify = function() {
    this.css( "color", "green" );
};

请注意，greenify被定义为JQuery中的一个函数。

在其他情况下，可能需要使用$(this)，因为this可能引用HTML DOM对象，而不是JQuery对象。

Answer 4

this已经是一个jQuery对象，所以没有必要调用$()。如果给$()一个jQuery对象作为参数，它会创建一个包含相同元素的新jQuery对象。因此，this和$(this)将是等效的，但制作副本时会产生不必要的开销。

当$(this)是DOM元素而不是jQuery对象时，您需要使用this。例如，在事件处理程序中，this是触发事件的DOM元素，而不是元素的jQuery包装器。