“this”是DOM对象还是jQuery对象

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();
});

你从不使用this.

或者您可能只想对元素的id做一些事情：

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

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

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

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

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