# jQuery 遍历 - children() 方法
## 实例
找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:
```
$("div").children(".selected").css("color", "blue");
```
## 定义和用法
add() 方法返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤。
### 语法
```
.children(_selector_)
```
| 参数 | 描述 |
| --- | --- |
| _selector_ | 字符串值,包含匹配元素的选择器表达式。 |
### 详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.children() 方法允许我们检索 DOM 树中的这些元素,并用匹配元素构造新的 jQuery 对象。[.find()](/jquery/traversing_find.asp) 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
请注意,与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
该方法接受一个选择器表达式作为可选参数,与我们传递到 $() 的参数的类型是相同的。如果应用该选择器,将测试元素是否匹配该表达式,以此筛选这些元素。
请思考这个带有基础的嵌套列表的页面:
```
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
```
如果我们从 level-2 列表开始,我们可以找到它的子元素:
```
$('ul.level-2').children().css('background-color', 'red');
```
这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。
- jQuery 参考手册 - 选择器
- jQuery 参考手册 - 事件
- jQuery 事件 - bind() 方法
- jQuery 事件 - blur() 方法
- jQuery 事件 - change() 方法
- jQuery 事件 - click() 方法
- jQuery 事件 - dblclick() 方法
- jQuery 事件 - delegate() 方法
- jQuery 事件 - die() 方法
- jQuery 事件 - error() 方法
- jQuery 事件 - isDefaultPrevented() 方法
- jQuery 事件 - pageX 属性
- jQuery 事件 - pageY 属性
- jQuery 事件 - preventDefault() 方法
- jQuery 事件 - result 属性
- jQuery 事件 - target 属性
- jQuery 事件 - timeStamp 属性
- jQuery 事件 - type 属性
- jQuery 事件 - which 属性
- jQuery 事件 - focus() 方法
- jQuery 事件 - keydown() 方法
- jQuery 事件 - keypress() 方法
- jQuery 事件 - keyup() 方法
- jQuery 事件 - live() 方法
- jQuery 事件 - load() 方法
- jQuery 事件 - mousedown() 方法
- jQuery 事件 - mouseenter() 方法
- jQuery 事件 - mouseleave() 方法
- jQuery 事件 - mousemove() 方法
- jQuery 事件 - mouseout() 方法
- jQuery 事件 - mouseover() 方法
- jQuery 事件 - mouseup() 方法
- jQuery 事件 - one() 方法
- jQuery 事件 - ready() 方法
- jQuery 事件 - resize() 方法
- jQuery 事件 - scroll() 方法
- jQuery 事件 - select() 方法
- jQuery 事件 - submit() 方法
- jQuery 事件 - toggle() 方法
- jQuery 事件 - trigger() 方法
- jQuery 事件 - triggerHandler() 方法
- jQuery 事件 - unbind() 方法
- jQuery 事件 - undelegate() 方法
- jQuery 事件 - unload 属性
- jQuery 参考手册 - 效果
- jQuery 效果 - animate() 方法
- jQuery 效果 - clearQueue() 方法
- jQuery 效果 - fadeIn() 方法
- jQuery 效果 - fadeOut() 方法
- jQuery 效果 - fadeTo() 方法
- jQuery 效果 - hide() 方法
- jQuery 效果 - show() 方法
- jQuery 效果 - slideDown() 方法
- jQuery 效果 - slideToggle() 方法
- jQuery 效果 - slideUp() 方法
- jQuery 效果 - stop() 方法
- jQuery 效果 - toggle() 方法
- jQuery 参考手册 - 文档操作
- jQuery 属性操作 - addClass() 方法
- jQuery 文档操作 - after() 方法
- jQuery 文档操作 - append() 方法
- jQuery 文档操作 - appendTo() 方法
- jQuery 属性操作 - attr() 方法
- jQuery 文档操作 - before() 方法
- jQuery 文档操作 - clone() 方法
- jQuery 文档操作 - detach() 方法
- jQuery 文档操作 - empty() 方法
- jQuery 属性操作 - hasClass() 方法
- jQuery 文档操作 - html() 方法
- jQuery 文档操作 - insertAfter() 方法
- jQuery 文档操作 - insertBefore() 方法
- jQuery 文档操作 - prepend() 方法
- jQuery 文档操作 - prependTo() 方法
- jQuery 文档操作 - remove() 方法
- jQuery 属性操作 - removeAttr() 方法
- jQuery 属性操作 - removeClass() 方法
- jQuery 文档操作 - replaceAll() 方法
- jQuery 文档操作 - replaceWith() 方法
- jQuery 文档操作 - text() 方法
- jQuery 属性操作 - toggleClass() 方法
- jQuery 文档操作 - unwrap() 方法
- jQuery 属性操作 - val() 方法
- jQuery 文档操作 - wrap() 方法
- jQuery 文档操作 - wrapAll() 方法
- jQuery 文档操作 - wrapInner() 方法
- jQuery 参考手册 - 属性操作
- jQuery 参考手册 - CSS 操作
- jQuery CSS 操作 - css() 方法
- jQuery CSS 操作 - height() 方法
- jQuery CSS 操作 - offset() 方法
- jQuery CSS 操作 - offsetParent() 方法
- jQuery CSS 操作 - position() 方法
- jQuery CSS 操作 - scrollLeft() 方法
- jQuery CSS 操作 - scrollTop() 方法
- jQuery CSS 操作 - width() 方法
- jQuery 参考手册 - Ajax
- jQuery ajax - ajax() 方法
- jQuery ajax - ajaxComplete() 方法
- jQuery ajax - ajaxError() 方法
- jQuery ajax - ajaxSend() 方法
- jQuery ajax - ajaxSetup() 方法
- jQuery ajax - ajaxStart() 方法
- jQuery ajax - ajaxStop() 方法
- jQuery ajax - ajaxSuccess() 方法
- jQuery ajax - get() 方法
- jQuery ajax - getJSON() 方法
- jQuery ajax - getScript() 方法
- jQuery ajax - load() 方法
- jQuery ajax - param() 方法
- jQuery ajax - post() 方法
- jQuery ajax - serialize() 方法
- jQuery ajax - serializeArray() 方法
- jQuery 参考手册 - 遍历
- jQuery 遍历 - add() 方法
- jQuery 遍历 - andSelf() 方法
- jQuery 遍历 - children() 方法
- jQuery 遍历 - closest() 方法
- jQuery 遍历 - contents() 方法
- jQuery 遍历 - each() 方法
- jQuery 遍历 - end() 方法
- jQuery 遍历 - eq() 方法
- jQuery 遍历 - filter() 方法
- jQuery 遍历 - find() 方法
- jQuery 遍历 - first() 方法
- jQuery 遍历 - has() 方法
- jQuery 遍历 - is() 方法
- jQuery 遍历 - last() 方法
- jQuery 遍历 - map() 方法
- jQuery 遍历 - next() 方法
- jQuery 遍历 - nextAll() 方法
- jQuery 遍历 - nextUntil() 方法
- jQuery 遍历 - not() 方法
- jQuery 遍历 - offsetParent() 方法
- jQuery 遍历 - parent() 方法
- jQuery 遍历 - parents() 方法
- jQuery 遍历 - parentsUntil() 方法
- jQuery 遍历 - prev() 方法
- jQuery 遍历 - prevAll() 方法
- jQuery 遍历 - prevUntil() 方法
- jQuery 遍历 - siblings() 方法
- jQuery 遍历 - slice() 方法
- jQuery 参考手册 - 数据
- jQuery 遍历 - clearQueue() 方法
- jQuery 数据 - data() 方法
- jQuery 数据 - jQuery.data() 方法
- jQuery 遍历 - dequeue() 方法
- jQuery 遍历 - jQuery.dequeue() 方法
- jQuery 遍历 - hasData() 方法
- jQuery 遍历 - queue() 方法
- jQuery 遍历 - jQuery.queue() 方法
- jQuery 数据 - removeData() 方法
- jQuery 数据 - jQuery.removeData() 方法
- jQuery 参考手册 - DOM 元素方法
- jQuery DOM 元素方法 - get() 方法
- jQuery DOM 元素方法 - index() 方法
- jQuery DOM 元素方法 - size() 方法
- jQuery DOM 元素方法 - toArray() 方法
- jQuery 参考手册 - 核心
- jQuery 核心 - jQuery() 方法
- jQuery 核心 - noConflict() 方法
- jQuery 参考手册 - 属性
- jQuery context 属性
- jQuery jquery 属性
- jQuery jQuery.fx.interval 属性
- jQuery jQuery.fx.off 属性
- jQuery jQuery.support 属性
- jQuery length 属性
- 免责声明