jQuery笔记-jQuery筛选器children()详解

jQuery的筛选器（selector）功能是它的核心特点之一，它可以让开发者通过选择器语法直接选择HTML元素。其中之一的筛选器就是`children()`。

## `children()`概述

`children()`用于选择指定元素的所有子元素，在jQuery选择器中使用`parent>child`的形式，其中`parent`表示父元素，`child`表示子元素。

下面的例子将选择id为`parent`元素下面所有的`div`元素：

```javascript

$("#parent > div")

```

这里`parent`是父元素，`div`是子元素，`>`符号表示只选择直接子元素。

## `children()`语法

`children()`的语法如下：

```javascript

$(selector).children(filter)

```

其中`selector`是待选元素，`filter`为可选项，表示筛选条件。

## `children()`实例

下面我们通过实例来更详细的了解`children()`。

### 实例1：选择所有直接子元素

下面的代码将选择所有id为`parent`的元素下的直接子元素：

```javascript

$("#parent").children()

```

当我们需要仅仅选择父元素的直接子元素，可以使用`>`符号：

```javascript

$("#parent > div")

```

这里将只选择直接子元素为`div`的元素。

### 实例2：选择指定过滤条件的子元素

下面的例子将选择所有id为`parent`元素下的类名为`child`的直接子元素：

```javascript

$("#parent").children(".child")

```

这里使用了类名为`child`的CSS选择器。

### 实例3：选择指定索引的子元素

下面例子将选择id为`parent`的元素下的第二个直接子元素。

```javascript

$("#parent").children("div:nth-child(2)")

```

这里使用了`nth-child`伪类选择器，表示选择第二个子元素。

## `children()`与`find()`的区别

`children()`和`find()`都可以选择子元素，但是它们有一些区别。`children()`只选择直接的子元素，而`find()`则选择所有的后代元素。

例如，有如下HTML结构：

```html

```

```javascript

$(".parent").children(".child")

```

将返回一个空集，因为`.child`并不是`.parent`的直接子元素，它只是后代元素。

```javascript

$(".parent").find(".child")

```

将返回`.parent`元素下的`.child`元素。

## `children()`的性能

在性能方面，`children()`相对于其它选择器来说的确比较高效。因为它只查找直接子元素，过滤掉不必要的元素，尤其是在处理大量的后代元素时，尤为突出。

## 总结

`children()`是一个十分有用的选择器，它可以用来筛选直接子元素，同时也能通过指定过滤条件或索引来获取对应的子元素。此外，`children()`相对性能也比较高效，对于大量的后代元素处理能力尤为突出。