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()所有后代必须中搜索表单控件、深层嵌套元素示例对比dividparentdivclasschilddivclassgrandchild孙元素/div/div/divscript$(#parent).children(.child);// 返回.child (1个)$(#parent).find(.child);// 返回.child (1个)$(#parent).children(.grandchild);// 返回空 (0个)$(#parent).find(.grandchild);// 返回.grandchild (1个)/script三、代码示例场景 1获取列表项并处理ulidmenuli首页ulli新闻/lili体育/li/ul/lili关于/li/ulscript// 只获取一级菜单项 (直接子 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 对象不会报错。性能对于深层嵌套的 DOMfind()可能会遍历大量节点注意选择器的精确度。六、与其他遍历方法的关系向下children()(一级),find()(所有)向上parent()(一级),parents()(所有),parentsUntil()横向siblings(),next(),prev()混合contents()(包含文本/注释),closest()(向上查找匹配)掌握children()和find()的区别是高效进行 jQuery DOM 操作的关键。