jquery选择器找子元素

jQuery 子元素选择器用法

使用 jQuery 选择子元素主要通过层级关系选择器实现，以下是几种常见场景的语法和示例：

基本子元素选择器（>）
选取直接子元素（仅下一层级）：

$("parent > child")

示例：选择 <ul> 下直接嵌套的 <li>

$("ul > li").css("color", "red");

后代选择器（空格）
选取所有嵌套层级的子元素：

$("parent child")

示例：选择 <div> 内所有层级的 <p>

$("div p").addClass("highlight");

特定条件下的子元素
结合属性或其他选择器筛选：

$("parent > child:first")  // 第一个子元素
$("parent > child:last")   // 最后一个子元素
$("parent > child[attr='value']")  // 带属性的子元素

示例：选择表格中第一个 <tr>

$("table > tbody > tr:first").hide();

动态生成的子元素处理

若子元素是动态加载的，需配合事件委托：

$(staticParent).on("event", "childSelector", function() {
  // 操作逻辑
});

示例：为动态添加的按钮绑定点击事件

$("#container").on("click", ".dynamic-btn", function() {
  alert("Button clicked!");
});

性能优化建议

• 尽量缩小父元素范围（如避免 $("body > div")）
• 优先使用 ID 或类选择器作为父元素（如 $("#parent > .child")）
• 缓存重复使用的父元素对象：

  const $parent = $("#parent");
  $parent.find("> .child").doSomething();