jQuery this 和 Selector $(this:first-child).css 介绍

封面图 • 2025-10-21 • jQuery

在 jQuery 中，`this` 和 `$(this)` 是非常常见的用法，尤其是在事件处理函数中。下面我们来详细介绍一下 `this` 和 `$(this:first-child).css(...)` 的含义和用法。

---

## 一、`this` 在 jQuery 中是什么？

在 jQuery 的事件处理函数中（如 `.click()`、`.hover()` 等），`this` 指的是当前触发事件的 DOM 元素本身，而不是 jQuery 对象。

### 示例：

```javascript
$("button").click(function() {
    console.log(this); // 这是原生的 DOM 元素（比如 <button>）
});
```

这时 `this` 是一个 DOM 节点，不是 jQuery 对象，不能直接使用 jQuery 方法（如 `.css()`）。

---

## 二、`$(this)` 是什么？

`$(this)` 是将 `this` 包装成一个 jQuery 对象，这样就可以使用 jQuery 提供的方法了。

### 示例：

```javascript
$("button").click(function() {
    $(this).css("color", "red"); // 正确！可以调用 .css()
});
```

---

## 三、`$(this:first-child)` 是什么意思？

`$(this:first-child)` 是一个 jQuery 选择器，它表示：**在 `this` 所代表的元素中查找第一个子元素**。

注意：这里的 `:first-child` 是 CSS 选择器，不是 jQuery 特有的方法。

### 示例：

```html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```

```javascript
$("ul").click(function() {
    $(this + ":first-child").css("color", "blue");
});
```

上面的写法有问题，因为 `this` 是 DOM 元素，不能直接拼接字符串。正确的写法应该是：

```javascript
$("ul").click(function() {
    $(this).find(":first-child").css("color", "blue");
});
```

或者更简洁地：

```javascript
$("ul").click(function() {
    $(this).children(":first-child").css("color", "blue");
});
```

---

## 四、`$(this:first-child).css(...)` 的完整理解

假设你有如下 HTML 结构：

```html
<div class="container">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
```

如果你在 `.container` 的点击事件中使用：

```javascript
$(".container").click(function() {
    $(this + ":first-child").css("color", "red");
});
```

这实际上是错误的，因为 `this` 是 DOM 元素，不能直接与字符串拼接。

正确写法应为：

```javascript
$(".container").click(function() {
    $(this).find(":first-child").css("color", "red");
});
```

或者：

```javascript
$(".container").click(function() {
    $(this).children(":first-child").css("color", "red");
});
```

---

## 五、总结

| 表达式 | 含义 |
|--------|------|
| `this` | 当前 DOM 元素（原生对象） |
| `$(this)` | 将 `this` 转换为 jQuery 对象 |
| `$(this:first-child)` | 错误写法（不能直接拼接） |
| `$(this).find(":first-child")` | 正确写法：在 `this` 内部查找第一个子元素 |
| `$(this).children(":first-child")` | 更精确地查找直接子元素中的第一个 |

---

## 六、推荐写法示例

```javascript
$("ul").click(function() {
    $(this).find(":first-child").css("color", "green");
});
```

这个写法清晰、准确，是 jQuery 中常用的写法。

---

如果你有具体的代码或场景，我可以帮你进一步分析和优化。欢迎继续提问！