JQuery this 和 $(this) 的区别

"JQuery this 和 $(this) 的区别" 是让人容易混淆的概念，在开发过程中常会有人将两者混淆或者错误使用，因此本攻略将着重讲解两者的区别并提供示例。

1. JQuery this

JQuery this 是指当前被选中的 HTML 元素对象，它是原生 JavaScript 中的关键字 this 在 jQuery 中的封装。当在事件响应函数中需要对元素进行操作时，推荐使用 this 关键字。

示例：

假设我们有一个按钮元素，当点击这个按钮时，控制台需要输出该按钮的文本：

HTML 代码：

<button class="btn">Click me!</button>

JavaScript 代码：

$(document).ready(function () {
  $('.btn').click(function () {
    console.log(this.innerHTML);  //输出元素的文本
  });
});

在上面的代码中，this 关键字指向了被单击的按钮元素，this.innerHTML 表示获取按钮元素的文本。

2. $(this)

$(this) 是选择器中的一种写法，它指的是被选择的 jQuery 对象。当需要使用 jQuery 中的方法对元素进行操作时，我们推荐使用 $(this)。

示例：

我们需要在点击按钮的时候，改变按钮的背景色和文本颜色：

HTML 代码：

<button class="btn">Click me!</button>

JavaScript 代码：

$(document).ready(function () {
  $('.btn').click(function () {
    $(this).css({
      'background-color': '#f00',
      'color': '#fff'
    }).text('Clicked!');
  });
});

在上面的代码中，$(this) 指针指向了被单击的按钮元素，我们对该元素调用了 css() 和 text() 方法，以改变元素的样式和文本内容。

小结

总体来说，JQuery this 和 $(this) 的区别在于，前者指向原生的 JavaScript 元素对象，后者指向 jQuery 包装过后的对象，我们在使用时应该根据具体的场景选择正确的写法，以达到最佳效果。