javascript - `this` 是 DOM 对象还是 jQuery 对象？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 6 年前。

Improve this question

我在理解这个 jquery 片段时遇到了一些困难。特别是如果使用 DOM 对象或 jquery 对象。这是代码

$(".foo").click(function() {  
  var displayTool = $(this).find(".tool-name").text() //is this a jquery object or DOM object ?
});

我的第一个问题是如果 this是 DOM 对象还是 jQuery 对象？我假设它是一个 DOM 对象，因为我们在下一个语句中通过 jQuery 修饰符传递它，即 $(this).find(".tool-name")进一步从中提取数据。那是对的吗？

如果是这样，那么我的下一个问题是为什么是 this一个 DOM 对象？我的印象是 jQuery 函数总是返回 jQuery 对象，例如 $(this).find(".tool-name")应该返回一个 jQuery 对象而不是 DOM 对象。我知道我们可以从 jQuery 对象中提取 DOM 对象，但我对此不感兴趣。我想知道为什么this是一个 DOM 对象。如有错误请指正。

Answer 1

是的，this 始终是 jQuery 单击处理程序中的 DOM 对象。

至于为什么这是......

您是否总是想要一个在单击处理程序中包含被单击元素的 jQuery 对象？不，有时您不这样做。例如，假设您想在单击某个元素时从页面中删除另一个元素:

$('.delete').click(function() {
    $('.spinner').remove();
});

你永远不会使用这个。

或者您可能只想对元素的 id 执行某些操作:

$('.delete').click(function() {
    console.log(this.id);
});

在这两种情况下，您都不想进行 jQuery 选择。由于构建 jQuery 选择是一项相对昂贵的操作，因此最好不要创建它，除非您通过执行 $(this) 明确表示想要它。

您可能会想“啊，但我们已经在原始代码行中构建了选择”:

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

.foo 意味着不同的东西。它的意思是“所有具有 foo 类的元素”，而不是“刚刚被单击的元素”。