jquery子选择器

jQuery 子选择器

jQuery 的子选择器用于选择某个元素的直接子元素，语法为 parent > child。这种选择器只匹配直接嵌套在父元素内的子元素，而不会匹配更深层次的后代元素。

语法示例

$("parent > child")

示例代码

<div id="parent">
    <span>直接子元素</span>
    <div>
        <span>非直接子元素（孙子元素）</span>
    </div>
</div>

// 选择 #parent 的直接子元素 span
$("#parent > span").css("color", "red");
// 只有第一个 span 会变红，第二个 span 不会被选中

与其他选择器的区别

• 后代选择器（空格）：匹配所有后代元素，无论嵌套层级。

  $("#parent span").css("color", "blue"); // 所有 span 都会变蓝

• 子选择器（>）：仅匹配直接子元素。

  $("#parent > span").css("color", "red"); // 仅直接子 span 变红

实际应用场景

1. 表单控件选择
   针对表单中直接嵌套的 input 元素进行操作：

   <form id="myForm">
       <input type="text" name="username">
       <div>
           <input type="password" name="pwd"> <!-- 不会被选中 -->
       </div>
   </form>

   $("#myForm > input").val("默认值"); // 仅设置 username

2. 导航菜单高亮
   仅选中一级菜单项：

   <ul class="menu">
       <li>一级菜单
           <ul>
               <li>二级菜单</li>
           </ul>
       </li>
   </ul>

   $(".menu > li").addClass("active"); // 仅一级菜单项高亮

性能优化建议

• 子选择器比后代选择器性能更高，因为范围更明确。
• 避免过度嵌套，如 div > ul > li > a，可简化为 div > li a。

注意事项

• 子选择器是严格层级匹配，不支持跨级或模糊匹配。
• 在动态生成的 DOM 中，确保父元素已存在后再调用子选择器。

如果需要更复杂的选择逻辑，可以结合 find()、children() 等方法实现。