jQuery 遍历 - 后代元素 (Descendants)
在 jQuery 中，后代遍历用于从当前选中的元素向下查找其子元素、孙元素等所有后代节点。这是 DOM 操作中最常用的功能之一。
一、核心方法
1.children()- 获取直接子元素
只返回一级子元素（直接后代），不包含孙元素及更深层级的节点。
// 语法$(selector).children();$(selector).children("selector");// 可选：过滤特定子元素// 示例$("ul").children();// 返回 ul 下所有的直接子元素 (通常是 li)$("ul").children("li");// 返回 ul 下所有的直接 li 子元素$("div").children(".item");// 返回 div 下 class 为 item 的直接子元素特点：
- 只遍历一层深度。
- 忽略文本节点和注释节点，只返回元素节点。
- 如果子元素嵌套了其他标签，不会递归获取更深层级。
2.find()- 获取所有后代元素
返回选中元素下的所有后代元素（包括子、孙、曾孙等所有层级）。
// 语法$(selector).find("selector");// 示例$("ul").find("li");// 返回 ul 下所有的 li (包括嵌套在 li 里的 li)$("div").find(".active");// 返回 div 下所有 class 为 active 的后代$("form").find("input");// 返回 form 下所有的 input 标签特点：
- 递归遍历所有层级。
- 必须传入选择器（不能像
children()那样不带参数获取所有子元素，虽然带*选择器可以达到类似效果）。 - 性能通常比
children()稍慢，因为需要遍历更深的 DOM 树。
二、方法对比
| 方法 | 遍历深度 | 是否需选择器 | 性能 | 典型场景 |
|---|---|---|---|---|
children() | 仅直接子级 | 可选 | 快 | 获取列表项、直接容器 |
find() | 所有后代 | 必须 | 中 | 搜索表单控件、深层嵌套元素 |
示例对比：
<divid="parent"><divclass="child"><divclass="grandchild">孙元素</div></div></div><script>$("#parent").children(".child");// 返回：.child (1个)$("#parent").find(".child");// 返回：.child (1个)$("#parent").children(".grandchild");// 返回：空 (0个)$("#parent").find(".grandchild");// 返回：.grandchild (1个)</script>三、代码示例
场景 1：获取列表项并处理
<ulid="menu"><li>首页<ul><li>新闻</li><li>体育</li></ul></li><li>关于</li></ul><script>// 只获取一级菜单项 (直接子 li)$("#menu").children("li").css("font-weight","bold");// 获取所有菜单项 (包括嵌套的)$("#menu").find("li").css("color","blue");</script>场景 2：表单数据收集
// 获取表单内所有的输入控件 (无论嵌套多深)varinputs=$("#myForm").find("input, select, textarea");inputs.each(function(){console.log($(this).attr("name"));});场景 3：动态内容查找
// 在动态生成的内容块中查找特定元素$(".content-block").find(".error-message").show();四、常用技巧
1. 组合使用children和find
// 获取 ul 的直接子 li，然后在这些 li 内部查找所有的 span$("ul").children("li").find("span").addClass("highlight");2. 使用通配符选择器模拟“所有子元素”
// 获取 div 下所有直接子元素 (类似 children() 不带参数)$("div").children("*");3. 链式调用与end()
$("div").find("p")// 切换到所有 p 后代.css("color","red").end()// 回到原来的 div.children("h2")// 切换到 div 的直接 h2 子元素.css("color","blue");4. 性能优化
- 如果确定只需要直接子元素，优先使用
children()，性能更好。 - 如果选择器很复杂，尽量在
find()中直接写完整选择器，而不是链式调用多次。// 推荐 (一次查找)$("div").find("ul > li.active span");// 不推荐 (多次查找，性能较差)$("div").find("ul").children("li").filter(".active").find("span");
五、注意事项
- 文本节点：
children()和find()都只返回元素节点，不会返回文本节点或注释节点。如果需要处理文本，需使用.contents()。 - 选择器必须：
find()必须传入选择器字符串，不能像children()那样省略。 - 上下文：
find()是在当前选中元素的内部查找，不会跨越到其他分支。 - 空结果：如果找不到匹配的元素，返回空的 jQuery 对象，不会报错。
- 性能：对于深层嵌套的 DOM，
find()可能会遍历大量节点，注意选择器的精确度。
六、与其他遍历方法的关系
- 向下：
children()(一级),find()(所有) - 向上：
parent()(一级),parents()(所有),parentsUntil() - 横向：
siblings(),next(),prev() - 混合：
contents()(包含文本/注释),closest()(向上查找匹配)
掌握children()和find()的区别，是高效进行 jQuery DOM 操作的关键。
