jQuery中$this和$(this)的区别介绍（一看就懂）

当我们使用jQuery进行DOM操作时，经常会看到使用$this或$(this)的情况。这两者的区别很容易混淆，下面将详细介绍它们的区别。

$this

首先，让我们来看一下$this。$this是一个变量名，它表示当前jQuery对象，通常用在事件处理函数中。例如，当用户单击页面上的某个元素时，我们可以使用下面的代码来获取当前元素的ID：

$('button').click(function() {
  var id = $this.attr('id');
  console.log(id);
});

在这个例子中，我们将一个click事件句柄传递给button元素。当用户单击按钮时，该句柄将被触发。在句柄函数内部，我们使用$this来引用当前按钮，然后使用.attr()方法获取其ID。

$(this)

现在让我们来看看$(this)。$(this)是一个jQuery方法，它是指当前DOM元素的jQuery包装器对象。在事件处理函数中，我们可以使用$(this)来引用当前元素的jQuery包装器对象。例如，以下代码将为所有的a元素添加一个单击事件，每次单击时都会隐藏该元素：

$('a').click(function() {
  $(this).hide();
});

在这个例子中，我们使用$('a')来选择所有的链接。当用户单击任何链接时，该句柄将被触发。在句柄函数内部，我们使用$(this)来引用当前链接，然后使用.hide()方法将其隐藏起来。

区别总结

区别在于，$this是一个变量名，它表示当前jQuery对象。而$(this)是jQuery库中的一个函数，它返回一个包含当前元素的jQuery包装器对象。

在事件处理函数中，使用$this和$(this)都可以引用当前元素。但是，使用$this只能访问当前元素的原生DOM对象，而$(this)返回的是当前元素的jQuery对象，你可以使用jQuery提供的许多方法和属性来操作它。

另外值得一提的是，$this只能在事件处理函数中使用，因为只有在事件触发的时候，jQuery对象才会被创建。在其他上下文中，$this是未定义的。

示例

下面我们来举两个具体的例子：

1.使用"this"获取指定元素的属性值

$('.box').each(function() {
  var title = $(this).attr('title');
  console.log(title);
});

在这个例子中，我们使用了.each()方法选择所有的带有class名为"box"的元素，并且为它们添加一个函数。在函数内部，我们使用$(this)指向当前的.box元素，并使用.attr()方法获取它的title属性。

2.给指定的按钮添加背景色

$('button').click(function() {
  $this = $(this);
  $this.css('background-color', 'red');
});

在这个例子中，我们为所有的button元素添加了一个单击事件。当单击按钮时，句柄函数将被触发。在句柄函数内部，我们将$(this)的值存储在变量$this中。然后使用$this来引用当前按钮，并使用.css()方法改变它的背景颜色。