JQuery -- this 和 $(this) 的区别

封面图 • 2025-11-15 • jQuery

在 jQuery 中，`this` 和 `$(this)` 是两个不同的概念，它们的使用场景和含义也不同。下面是它们的区别和用法说明：

---

## 一、`this`

### 含义：
- `this` 是 JavaScript 原生的关键字。
- 它指的是当前执行上下文中的对象（通常是 DOM 元素）。

### 示例：
```javascript
$('button').click(function() {
    console.log(this); // 这里是原生的 DOM 元素，不是 jQuery 对象
});
```

### 特点：
- `this` 是一个 **原生的 DOM 元素**（如 `<button>`、`<div>` 等）。
- 不能直接使用 jQuery 的方法（比如 `.hide()`、`.addClass()`），除非你把它包装成 jQuery 对象。

---

## 二、`$(this)`

### 含义：
- `$(this)` 是将 `this` 包装成一个 **jQuery 对象**。
- 你可以调用 jQuery 提供的各种方法。

### 示例：
```javascript
$('button').click(function() {
    $(this).hide(); // 正确：将 this 转换为 jQuery 对象
});
```

### 特点：
- `$(this)` 是一个 jQuery 对象。
- 可以调用 jQuery 方法（如 `.hide()`、`.css()`、`.addClass()` 等）。

---

## 三、对比总结

| 特性 | `this` | `$(this)` |
|------|--------|-----------|
| 类型 | 原生 DOM 元素 | jQuery 对象 |
| 是否可以直接调用 jQuery 方法？ | ❌ 否 | ✅ 是 |
| 获取元素属性 | `this.id` | `$(this).attr('id')` 或 `$(this).prop('id')` |
| 修改样式或行为 | 需要通过 `this.style` | 直接调用 `.css()`、`.addClass()` 等 |

---

## 四、常见错误示例

```javascript
$('button').click(function() {
    this.hide(); // 错误！this 是原生 DOM 元素，没有 hide 方法
});
```

正确写法：
```javascript
$('button').click(function() {
    $(this).hide(); // 正确！
});
```

---

## 五、什么时候用 `this`？

有时候你会看到这样的写法：

```javascript
var $this = $(this);
$this.addClass('active');
```

这样做的目的是为了避免多次调用 `$(this)`，提高性能（虽然现代浏览器优化得很好，但这种写法仍然常见）。

---

## 六、总结

| 用法 | 说明 |
|------|------|
| `this` | 指向当前的 DOM 元素，不是 jQuery 对象 |
| `$(this)` | 将 DOM 元素包装成 jQuery 对象，可以调用 jQuery 方法 |

---

如果你有具体代码片段，我可以帮你分析 `this` 和 `$(this)` 在其中的作用。