Jquery - 何时使用"this"，何时使用"$(this)"？

Question

可能重复：
jQuery $(this) vs this

"this" 和 "$(this)" 有什么区别？

我如何知道使用哪一个？

相关的，我认为：

对于每个，您都有可选参数。 "i" 和 "this"（或"$(this)"）有什么不同？

$('img').each(function(i) { ....code }

对比。

$('img').each(function() { ....code }

- Buttle Butkus

---

这个问题有些相似但又有所不同，通常很难找到关于“这个”的信息，因为搜索引擎通常会忽略它。 - Buttle Butkus

这个问题可能是一个重复的问题，但是Joseph的答案比其他问题上选择的那个更好。我只能在阅读了这里的答案后解决了我的问题，所以我希望它们能够为未来的搜索者保留下来。 - Buttle Butkus

此外，这可能是一个重复的原因是因为在谷歌上搜索“this”非常困难。事实上，当我第一次接触面向对象编程时，花了很长时间才找到关于“this”和“::”（双冒号）的信息。 - Buttle Butkus

这个问题类似于什么？链接？ - Yan King Yin

Answer 1

this对象不会改变。它是函数的所有者。在大多数情况下，像这样简单地作为一个节点，并且您可以引用其所有属性，如this.className（把它想象成使用document.getElementById获取的节点或其他内容）。 它只是函数的“所有者”。

因此，您只需将this对象传递给jQuery的$()。

结论：如果要为当前节点使用jQuery函数，请使用$(this)。但如果要访问对象自己的属性（例如.name、className、.id），则只需使用this。

- Joseph Marikle

---

我认为关于 this 的那句话有点误导。 - alex

我会直接删掉引号，你的回答很好。 - alex

@ButtleButkus 如果你在节点列表上使用.each()（例如$(".thing").each(...)），那么最可能的是$(this).width()，因为.width()是jQuery方法。 - Joseph Marikle

这是正确的，但 this 总是相同的 this。如果你把它放在 $() 中，你只是把它传递给 jQuery。 - Joseph Marikle

@ButtleButkus 谢谢 :) 很高兴能帮到你。 - Joseph Marikle

Answer 2

这是关于JavaScript的，$(this)用于jQuery。您可以在jQuery的所有函数中使用$(this)，但对于this不是这种情况。

编辑： 对于您的示例，i只是增加的数（第一个是0，第二个是1，第十一个是10），$(this)是img元素。您可以执行以下操作：

$(this).on('click', function() { console.log(123); });
or
$('img').eq(i).on('click', function() { console.log(123); });

编辑2：以下是使用方法：

var sorter = {
    sort: function() {
        console.log('sorting');
    },
    requestSorting: function() {
        this.sort();
    }
}
sorter.requestSorting.bind(sorter);

在这个例子中，它的使用方式与PHP类中的$this完全相同。这就是为什么我说它更适用于纯JavaScript函数的原因。

- user1040899

---

这是针对JavaScript的，它确切地意味着什么？ - alex

他的意思是关键字“this”是基本的JavaScript功能，而“$(this)”是jQuery特定的，不是基本的JavaScript。 - Buttle Butkus

user1040899，感谢您的编辑。它有助于澄清 "i" 将会做什么，但没有解释为什么/何时优先使用它而不是使用 "$(this)"，后者似乎更简单易用。+1 - Buttle Butkus

我第二次编辑了。如果你认为我说错了什么，请纠正我，Alex。 - user1040899

我认为Joseph的答案比我的更好！ - user1040899

是的，没错。这个回答更加专注和措辞得当。它真的是一个好答案。它用几句话澄清了其他人绕弯子说了几十句的问题。但你对“i”的解释也很好。谢谢。 - Buttle Butkus

Answer 3

this在jQuery中一般指代DOM元素，例如HTMLSelectElement。

使用jQuery函数重新包装它可以使您对其调用jQuery方法。

- alex

---

你认为用户1040899所说的“this”是JavaScript，而$(this)是jQuery，你怎么看？据我所知，“$”实际上是整个jQuery对象的速记。 - Buttle Butkus

@ButtleButkus，请查看我的答案以获取相关信息。 - Joseph Marikle

Answer 4

将其放入$()中，将其转换为jQuery对象，并能够调用所有典型的jQuery方法。这本身只是对给定对象/元素的普通JavaScript引用。

- thescientist

---

那么我总是可以在“this”周围放置$()来使用jquery方法并访问jquery属性吗？ - Buttle Butkus

是的，这是创建 jQuery 对象的标准约定。 - thescientist

Answer 5

是否需要 $(this) 取决于您所处的上下文环境。

需要它的情况：

• 处理 jQuery 事件时 $(this) 作为触发事件的 DOM 元素传递，将 DOM 元素转换为 jQuery 对象

• 任何时候获取 DOM 元素 其他情况下，您拥有 DOM 元素（或对象）并希望将其转换为 jQuery 对象

不需要它的情况：

• 在 jQuery 插件内部 jQuery 插件（jquery.fn）函数中，this 已经是一个 jQuery 对象，因此不需要在此应用 $(this)。

即使 this 是一个 jQuery 对象，使用 $(this) 也不会造成任何损害，因为 jQuery 只会返回相同的对象。

- Rick Strahl

---

好的，但是在“.each”循环内部呢？在另一个问题中，我使用了“this”而不是“$(this)”的代码，回答者说这是错误的。在“.each”循环内部，我没有访问jquery对象，还是DOM元素？（这是我所提到的另一个问题：http://stackoverflow.com/questions/8463878/trying-to-set-css-property-left-to-using-jquery-centering-image-inside-div/8463929#8463929） - Buttle Butkus

Answer 6

$( ".class" ).click( function () {

  $( this ).load( "/path/to/file.html" );

} );

在这个例子中，this 指的是 .class div，当你点击它时，会将 file.html 的内容加载到该 div 中。

因此，点击 .class，就会将 file.html 加载到其中。

- Willem Ellis

---

非常有趣的技巧。+1。但并没有真正澄清$(this)和this之间的区别，也没有解释何时使用哪一个。 - Buttle Butkus