JQuery选择器中的子元素选择器

封面图 • 2025-09-19 • jQuery

在 jQuery 中，**子元素选择器**（也称为 **直接子元素选择器**）用于选取某个元素的**直接子元素**，而不是所有后代元素。它使用 `>` 符号。

---

### ✅ 语法：

```javascript
$('父元素 > 子元素')
```

- `父元素`：表示要查找的父元素。
- `子元素`：表示要匹配的子元素类型或类等。

---

### 🔍 示例说明

假设有如下 HTML 结构：

```html
<ul class="list">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Sub Item 1</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
```

#### ❌ 使用 `$('ul li')`（后代选择器）

```javascript
$('ul li').css('color', 'red');
```

这会选中 **所有 `<li>` 元素**，包括嵌套在 `<ul>` 中的 `<li>`（如 `Sub Item 1`）。

#### ✅ 使用 `$('ul > li')`（子元素选择器）

```javascript
$('ul > li').css('color', 'blue');
```

这只会选中 `<ul>` 的**直接子元素** `<li>`，即：
- `Item 1`
- `Item 2`
- `Item 3`

但不会选中 `Sub Item 1`，因为它不是 `<ul>` 的直接子元素。

---

### 📌 常见用法

| 选择器 | 含义 |
|--------|------|
| `$('div > p')` | 所有 `<div>` 的直接子元素 `<p>` |
| `$('ul > .item')` | 所有 `<ul>` 的直接子元素中类为 `.item` 的元素 |
| `$('body > *')` | 所有 `<body>` 的直接子元素（不管是什么标签） |

---

### 💡 小贴士

- 子元素选择器只匹配**直接子元素**，不包括更深层的后代。
- 如果你想要所有后代元素，使用空格（` `）代替 `>`，例如 `$('ul li')`。

---

如果你有具体的 HTML 结构或需求，我可以帮你写出对应的 jQuery 选择器！