jquery获取子节点
jQuery 获取子节点的方法
jQuery 提供了多种方法来获取元素的子节点。以下是几种常用的方式：
使用 children() 方法
children() 方法返回被选元素的所有直接子元素（不包括文本节点和注释节点）。可以通过传递选择器参数进一步筛选子元素。
// 获取所有直接子元素
$('#parent').children();
// 获取符合条件的子元素（如 class 为 'child' 的元素）
$('#parent').children('.child');使用 find() 方法
find() 方法返回被选元素的所有后代元素（包括子元素、孙元素等）。可以通过传递选择器参数筛选特定后代元素。
// 获取所有后代元素
$('#parent').find('*');
// 获取特定后代元素（如所有 div 元素）
$('#parent').find('div');使用 contents() 方法
contents() 方法返回被选元素的所有子节点，包括文本节点和注释节点。可以通过过滤进一步筛选特定类型的节点。
// 获取所有子节点（包括文本和注释节点）
$('#parent').contents();
// 筛选元素节点
$('#parent').contents().filter(function() {
return this.nodeType === Node.ELEMENT_NODE;
});使用 > 选择器
在 jQuery 选择器中，> 符号用于直接匹配子元素。
// 获取所有直接子元素
$('#parent > *');
// 获取特定直接子元素（如所有 div 子元素）
$('#parent > div');实际应用示例
遍历子元素并操作
$('#parent').children().each(function() {
console.log($(this).text()); // 输出每个子元素的文本内容
});筛选特定子元素
// 筛选 class 为 'active' 的子元素并隐藏
$('#parent').children('.active').hide();注意事项
children()仅返回直接子元素，而find()返回所有后代元素。contents()包含文本和注释节点，而其他方法仅返回元素节点。- 使用
>选择器时需注意选择器的性能，避免过度嵌套。
