当前位置：首页 > jquery

jquery 子节点

2026-04-08 02:47:11jquery

jQuery 获取子节点的方法

在 jQuery 中，获取子节点可以通过多种方式实现，以下是一些常用的方法：

children() 方法

children() 方法用于获取匹配元素的所有直接子元素（仅一级子节点）。可以通过传递选择器进一步过滤子元素。

// 获取所有直接子元素
$('#parent').children();

// 获取特定类名的直接子元素
$('#parent').children('.child-class');

find() 方法

find() 方法用于获取匹配元素的所有后代元素（包括多级子节点）。通常用于深层嵌套的子节点查找。

// 获取所有后代元素
$('#parent').find('*');

// 获取特定标签的后代元素
$('#parent').find('div');

使用 CSS 选择器

可以直接通过 jQuery 的 CSS 选择器语法获取子节点。

// 获取直接子元素
$('#parent > div');

// 获取所有后代元素
$('#parent div');

jQuery 操作子节点的方法

append() 和 prepend()

append() 方法在子节点列表末尾插入内容，prepend() 方法在子节点列表开头插入内容。

// 在子节点末尾添加元素
$('#parent').append('<div>New Child</div>');

// 在子节点开头添加元素
$('#parent').prepend('<div>First Child</div>');

remove() 和 empty()

remove() 方法删除匹配的元素及其子节点，empty() 方法仅删除子节点。

// 删除子节点
$('#parent .child').remove();

// 清空所有子节点
$('#parent').empty();

示例代码

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

jquery 子节点

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

<script>
  // 获取子节点
  var children = $('#parent').children();
  console.log(children.length); // 输出: 2

  // 添加子节点
  $('#parent').append('<div class="child">Child 3</div>');

  // 删除子节点
  $('#parent .child:first').remove();
</script>

通过以上方法，可以灵活地获取和操作 jQuery 中的子节点。