jQuery “$(this)”和”this”的区别

在本文中，我们将介绍jQuery中”$(this)”和”this”之间的区别。

阅读更多：jQuery 教程

介绍

在jQuery中，”$(this)”和”this”都是指向当前元素的指针。然而，它们之间有一些细微的差别。

“$(this)”

“$(this)”是将DOM元素包装成jQuery对象的一种方式。它允许我们使用jQuery提供的各种方法和属性来操作和访问该元素。通过使用”$(this)”，我们可以轻松地在事件处理程序中获取当前触发事件的元素，从而更方便地操纵 DOM。

示例：

$("#myButton").click(function() {
  $(this).addClass("active");
});

在上面的示例中，当我们点击按钮时，事件处理程序会将”active”类添加到点击的按钮上。通过使用”$(this)”，我们可以方便地将样式更改应用于当前的按钮。

“this”

“this”是一个通用的JavaScript关键字，它代表当前函数的上下文。在jQuery事件处理程序中，”this”指向当前触发事件的DOM元素。

示例：

$("#myButton").click(function() {
  this.classList.add("active");
});

在上面的示例中，我们使用”this”来获取当前点击的按钮，然后通过JavaScript的classList属性将”active”类添加到该按钮上。这样做的效果与使用”$(this)”一样，只是我们直接使用纯JavaScript来操作。

区别

尽管”$(this)”和”this”都指向当前元素，但它们之间有几个重要的区别。

类型

“$(this)”返回的是一个jQuery对象，而”this”返回的是一个DOM元素。

示例：

$("#myButton").click(function() {
  console.log($(this)); // 输出一个jQuery对象
  console.log(this); // 输出一个DOM元素
});

在上面的示例中，我们在按钮的点击事件处理程序中分别输出了”$(this)”和”this”的结果。可以看到，”$(this)”返回的是一个包装好的jQuery对象，而”this”返回的是一个DOM元素。

使用方法和属性

由于”$(this)”返回的是一个jQuery对象，它可以直接使用jQuery提供的各种方法和属性。而”this”返回的是一个DOM元素，只能使用原生的JavaScript方法和属性。

示例：

$("#myButton").click(function() {
  $(this).addClass("active"); // 使用$(this)来添加一个类

  this.setAttribute("disabled", true); // 使用this来设置属性
});

在上面的示例中，我们使用”$(this)”来添加一个类，这是由于”$(this)”返回的是一个jQuery对象，它可以直接调用jQuery提供的”addClass”方法。而我们使用”this”来设置”disabled”属性，这是由于”this”返回的是一个DOM元素，只能使用原生的JavaScript方法和属性来操作。

总结

在jQuery中，”$(this)”和”this”都可以用于指向当前元素。”$(this)”是将DOM元素包装成jQuery对象的一种方式，使我们能够方便地使用jQuery提供的方法和属性操作元素。”this”是一个通用的JavaScript关键字，可以在事件处理程序中使用。尽管它们指向相同的元素，但它们的类型和使用方法有所不同。因此，在编写jQuery代码时要明确选择使用哪种方式，以便达到更好的效果。