jquery子元素

jQuery 子元素选择方法

使用 jQuery 选择子元素可以通过多种方式实现，以下是几种常见的方法：

children() 方法
该方法直接获取匹配元素的直接子元素（仅一层深度）。语法示例：

$('#parent').children(); // 选择所有直接子元素
$('#parent').children('.child-class'); // 筛选特定类名的子元素

find() 方法
该方法查找匹配元素的所有后代元素（包括多级嵌套）。语法示例：

$('#parent').find('div'); // 选择所有嵌套的 div 元素
$('#parent').find('.target'); // 选择所有类名为 target 的后代

子选择器 (>) 语法
通过 CSS 选择器语法直接定位直接子元素：

$('#parent > .child'); // 仅选择父元素下类名为 child 的直接子元素

过滤子元素的常用操作

eq() 方法
根据索引选择特定位置的子元素（从 0 开始计数）：

$('#parent').children().eq(2); // 选择第三个子元素

filter() 方法
基于条件筛选子元素：

$('#parent').children().filter(':visible'); // 仅选择可见的子元素

not() 方法
排除符合条件的子元素：

$('#parent').children().not('.exclude'); // 排除类名为 exclude 的子元素

动态操作子元素

添加子元素
使用 append() 或 prepend() 动态插入内容：

$('#parent').append('<div class="new-child">New</div>'); // 在末尾添加
$('#parent').prepend('<div class="new-child">New</div>'); // 在开头添加

删除子元素
使用 remove() 或 empty() 清除内容：

$('#parent .child').remove(); // 删除匹配的子元素
$('#parent').empty(); // 清空所有子元素

事件委托处理子元素

通过 on() 方法实现事件委托，适用于动态添加的子元素：

$('#parent').on('click', '.child', function() {
  console.log('子元素被点击');
});

性能优化建议

• 对于固定结构的子元素，优先使用 children() 而非 find()，因为后者会遍历整个 DOM 子树。
• 缓存重复使用的选择器结果，避免重复查询：

  const $children = $('#parent').children();
  $children.addClass('highlight');