jQuery 的 $(this) 与 this：一文读懂 DOM 元素引用

javascript

2024-03-05 15:10:19

jQuery 中的 $(this) 与 this：知其异同，掌握 DOM 控制

引子

在 jQuery 的世界里，$(this) 和 this 就像一对形影不离的伙伴，它们都指向 DOM 元素，却有着微妙的差异。理解和运用这两个引用对于编写有效、可维护的 jQuery 代码至关重要。

认识 $(this)

$(this) 将一个 DOM 元素转换为 jQuery 对象。jQuery 对象是 DOM 元素的封装，它提供了丰富的函数和方法，赋予我们操作 DOM 元素的强大能力。

认识 this

this 是一个，它指向当前正在执行代码的 DOM 元素。它总是指向调用它的元素的上下文中。

何时使用 $(this)

使用 $(this) 的时机主要有两个：

使用 jQuery 函数和方法时： jQuery 提供了许多函数和方法，如 addClass()、removeClass() 等，它们只能应用于 jQuery 对象上。因此，需要将 DOM 元素转换为 jQuery 对象才能使用这些方法。
需要 jQuery 对象时： 有些情况下，我们需要直接访问 jQuery 对象，例如在使用事件处理程序或遍历 DOM 时。$(this) 可以方便地获取当前正在处理的元素的 jQuery 对象。

何时使用 this

使用 this 的时机包括：

无需使用 jQuery 函数或方法时： 如果代码不需要使用 jQuery 函数或方法，直接使用 this 可以更轻量、更直接地操作 DOM 元素。
需要 DOM 元素的原始 DOM 引用时： 有时，需要直接访问 DOM 元素的原始 DOM 引用，而不仅仅是 jQuery 对象。此时，this 可以提供原始的 DOM 节点。

例子对比

以下示例演示了 $(this) 和 this 的使用差异：

$("li").each(function () {
  // 使用 $(this) 获取 jQuery 对象并添加类
  $(this).addClass("active");
});

$("form").click(function () {
  // 直接使用 this 提交表单
  this.submit();
});