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 变红
实际应用场景
-
表单控件选择
针对表单中直接嵌套的 input 元素进行操作：<form id="myForm"> <input type="text" name="username"> <div> <input type="password" name="pwd"> <!-- 不会被选中 --> </div> </form>$("#myForm > input").val("默认值"); // 仅设置 username -
导航菜单高亮
仅选中一级菜单项：<ul class="menu"> <li>一级菜单 <ul> <li>二级菜单</li> </ul> </li> </ul>$(".menu > li").addClass("active"); // 仅一级菜单项高亮
性能优化建议
- 子选择器比后代选择器性能更高，因为范围更明确。
- 避免过度嵌套，如
div > ul > li > a，可简化为div > li a。
注意事项
- 子选择器是严格层级匹配，不支持跨级或模糊匹配。
- 在动态生成的 DOM 中，确保父元素已存在后再调用子选择器。
如果需要更复杂的选择逻辑，可以结合 find()、children() 等方法实现。
