jquery子节点
jQuery 子节点操作
在 jQuery 中，可以通过多种方式选择和操作子节点。以下是常见的子节点操作方法：
查找直接子元素
使用 children() 方法可以获取匹配元素的所有直接子元素：
$('#parent').children(); // 获取所有直接子元素
$('#parent').children('.child-class'); // 获取特定类名的直接子元素查找所有后代元素
使用 find() 方法可以获取匹配元素的所有后代元素（包括子节点、孙节点等）：
$('#parent').find('div'); // 获取所有后代 div 元素筛选子元素
通过选择器直接筛选子元素：
$('#parent > .child'); // 使用子选择器 (>)，仅匹配直接子元素添加子元素
使用 append() 或 prepend() 方法添加子元素：
$('#parent').append('<div class="new-child"></div>'); // 在末尾添加子元素
$('#parent').prepend('<div class="new-child"></div>'); // 在开头添加子元素移除子元素
使用 remove() 或 empty() 方法移除子元素：
$('.child').remove(); // 移除匹配的子元素
$('#parent').empty(); // 清空所有子元素示例代码
以下是一个完整的示例，展示如何操作子节点：
// HTML 结构
// <div id="parent">
// <div class="child">Child 1</div>
// <div class="child">Child 2</div>
// </div>
// 获取子节点
const children = $('#parent').children();
console.log(children.length); // 输出 2
// 添加子节点
$('#parent').append('<div class="child">Child 3</div>');
// 移除子节点
$('#parent .child:first').remove(); // 移除第一个子节点注意事项
children()仅返回直接子节点，而find()返回所有后代节点。- 子选择器 (
>) 在性能上通常优于find()，但仅适用于直接子节点。 - 操作 DOM 时，尽量避免频繁的添加/移除操作，以提高性能。
