jquery后代选择器

jQuery 后代选择器用法

后代选择器用于选取指定元素内部的所有匹配后代元素，无论嵌套层级多深。语法为ancestor descendant，中间用空格分隔。

选取所有后代元素

$("parentSelector childSelector")

例如选取<div>内所有<p>元素：

$("div p").css("color", "red");

特定层级嵌套选择 后代选择器不限制层级深度，以下代码会同时选中两层嵌套的<span>：

<div class="container">
  <span>Level 1</span>
  <div>
    <span>Level 2</span>
  </div>
</div>

$(".container span").addClass("highlight");

与其他选择器结合使用

混合类选择器

$("ul.menu li").hide(); // 隐藏ul.menu下的所有li

属性选择器组合

$("form input[type='text']").val(""); // 清空form下所有文本框

注意事项

• 后代选择器性能低于直接子选择器（parent > child），在DOM结构复杂时应谨慎使用
• 过度使用可能意外选中非目标元素，建议通过添加类名缩小范围
• 现代浏览器支持querySelectorAll()，但jQuery提供跨浏览器兼容性

与直接子选择器对比示例

$("ul > li")   // 仅选择直系子li
$("ul li")     // 选择所有层级的li