当前位置：首页 > jquery

jquery子节点

2026-03-17 10:12:15jquery

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(); // 清空所有子元素

示例代码

以下是一个完整的示例，展示如何操作子节点：

jquery子节点

// 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(); // 移除第一个子节点