jquery子选择器

jQuery子选择器用法

jQuery子选择器（>）用于选择指定元素的直接子元素，而非所有后代元素。以下是常见的使用方法和示例：

基本语法

$("parent > child")

选择直接子元素

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

$("#parent > span")  // 仅选择第一个<span>

多层级子选择

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

$(".menu > li")  // 仅选择一级菜单项

结合其他选择器

$("div.content > p.highlight")  // 选择.content div下直接子元素中的.highlight段落

与find()的区别

• children()或>只查找直接子元素
• find()会查找所有层级后代元素

性能提示 子选择器比后代选择器性能更高，因为搜索范围更小。对于大型DOM结构，建议优先使用子选择器。

实际应用示例

导航菜单高亮

$("#main-nav > li").hover(
  function() { $(this).addClass("active"); },
  function() { $(this).removeClass("active"); }
);

表单元素选择

<form id="signup">
  <input type="text">
  <div class="row">
    <input type="email">
  </div>
</form>

$("#signup > input")  // 仅选择第一个text输入框

动态添加子元素

$("#container").append("<div class='new-child'>New Content</div>");
$("#container > .new-child").css("color", "red");

注意事项

• 子选择器不会匹配文本节点
• 在动态添加元素后，需要重新绑定选择器或使用事件委托
• 对于复杂的DOM操作，建议结合filter()等方法进行精确选择