jquery获取当前元素的第一个子元素的值

admin 2026年02月06日 01:09 102 0

在jQuery中，获取当前元素的第一个子元素的值，需先选中目标元素，再通过子元素选择器定位首个子节点，最后根据元素类型调用相应方法获取值，具体步骤：使用$(this)或指定选择器选中当前元素，通过.children(':first')或.first()获取第一个子元素，若子元素为文本节点或普通元素，用.text()获取文本内容；若为表单元素（如input、select），则用.val()获取其值，$(this).children(':first').text()可获取首个子元素的文本，$(this).children(':first').val()则获取表单子元素的值，注意需确保子元素存在，避免报错。

jQuery获取当前元素第一个子元素的值：方法与实例详解

在jQuery开发中，操作DOM元素是常见需求，而获取特定子元素的值更是高频操作，本文将详细介绍如何使用jQuery获取当前元素的第一个子元素的值，包括核心方法、适用场景及实例演示,帮助开发者快速掌握这一实用技巧。

基础概念：当前元素与第一个子元素

在深入探讨之前,我们需要明确两个核心概念：

当前元素：通过jQuery选择器选中的目标元素，如$('#parent')、$('.container')等。
第一个子元素：当前元素的直接子元素中按DOM顺序排列的第一个元素（非后代元素），例如在以下结构中：
```
<div>
  <p>子元素1</p>
  <span>子元素2</span>
</div>
```
<p>是<div>的第一个子元素。

核心方法：获取第一个子元素的值

jQuery提供了多种方式获取第一个子元素的值，常用方法包括children().first()、first-child选择器，以及结合text()/html()/val()等获取值的函数。

`children().first()` + 值获取函数

children()方法用于获取当前元素的所有直接子元素，返回一个jQuery对象；通过.first()可筛选出第一个子元素，再结合text()（获取文本内容）、html()（获取HTML内容）或val()（获取表单元素值）获取其值。

语法：

$(当前元素).children().first().值获取函数();

示例：

假设HTML结构如下：

<div id="parent">
  <p>第一个子元素（文本内容）</p>
  <span>第二个子元素</span>
  <input type="text" value="表单输入值">
</div>

jQuery代码：

// 获取第一个子元素的文本内容
var firstChildText = $('#parent').children().first().text();
console.log(firstChildText); // 输出："第一个子元素（文本内容）"
// 获取第一个子元素的HTML内容
var firstChildHtml = $('#parent').children().first().html();
console.log(firstChildHtml); // 输出："第一个子元素（文本内容）"
// 若第一个子元素是表单元素，用val()获取值
var inputChild = $('#parent').children('input').first(); // 先筛选input子元素
console.log(inputChild.val()); // 输出："表单输入值"

`first-child`选择器直接匹配

first-child选择器可直接匹配当前元素的第一个子元素，无需先调用children()，语法更简洁，但需注意其匹配规则（必须是父元素的第一个子元素）。

语法：

$(当前元素).children(':first-child').值获取函数();

示例：

沿用上述HTML结构,jQuery代码：

// 使用:first-child选择器获取第一个子元素
var firstChild = $('#parent').children(':first-child');
console.log(firstChild.text()); // 输出："第一个子元素（文本内容）"
// 若第一个子元素是特定标签，可以这样选择
var firstParagraph = $('#parent').children('p:first-child');
console.log(firstParagraph.text()); // 输出："第一个子元素（文本内容）"

`first()`方法结合上下文

若已通过其他方式（如find()、filter()）获取子元素集合，可通过.first()筛选第一个元素，再获取值，需注意first()与children().first()的区别：first()作用于jQuery对象，而children().first()明确筛选直接子元素。

示例：

// 先获取所有子元素，再筛选第一个
var allChildren = $('#parent').children();
var firstChild = allChildren.first();
console.log(firstChild.text()); // 输出："第一个子元素（文本内容）"

关键细节：值获取函数的选择

获取"值"时,需根据子元素类型选择合适的函数：

text()：获取元素的文本内容（会忽略HTML标签，如<b>加粗</b>会返回"加粗"）。
html()：获取元素的HTML内容（包含标签，如<b>加粗</b>会返回<b>加粗</b>）。
val()：仅适用于表单元素（如<input>、<select>、<textarea>），获取其value属性值。

示例对比：

<div id="test">
  <strong>加粗文本</strong>
  <input type="text" value="输入框的值">
</div>

// 获取第一个子元素（<strong>）的文本和HTML
console.log($('#test').children().first().text()); // 输出："加粗文本"
console.log($('#test').children().first().html()); // 输出："加粗文本"
// 获取第二个子元素（<input>）的值
console.log($('#test').children().eq(1).val()); // 输出："输入框的值"

实际应用场景

动态列表操作

假设有一个动态生成的列表,我们需要获取每个列表项的第一个子元素内容：

<ul class="item-list">
  <li><span class="title">项目1</span><span class="date">2023-01-01</span></li>
  <li><span class="title">项目2</span><span class="date">2023-01-02</span></li>
</ul>

// 获取所有列表项的第一个子元素（title）
$('.item-list li').each(function() {
  var title = $(this).children().first().text();
  console.log('标题：' + title);
});

表单验证

在表单验证中,获取第一个错误提示信息：

<form id="myForm">
  <div class="error-message">用户名不能为空</div>
  <div class="error-message">密码长度至少6位</div>
  <input type="submit" value="提交">
</form>

// 显示第一个错误信息
var firstError = $('#myForm').children('.error-message').first().text();
if(firstError) {
  alert('错误：' + firstError);
}

性能优化建议

选择器优化：优先使用ID选择器或类选择器,避免过度嵌套的选择器。
链式调用：尽量使用链式调用减少DOM查询次数。
缓存结果：如果多次使用同一个元素,建议缓存jQuery对象。

// 不推荐：重复查询DOM
var text = $('#parent').children().first().text();
var html = $('#parent').children().first().html();
// 推荐：缓存jQuery对象
var $firstChild = $('#parent').children().first();
var text = $firstChild.text();
var html = $firstChild.html();

常见错误与解决方案

错误1：混淆子元素与后代元素

// 错误：获取所有后代元素中的第一个
var wrong = $('#parent').find().first(); // find()需要参数
// 正确：获取直接子元素
var correct = $('#parent').children().first();

错误2：错误使用值获取函数

// 错误：对非表单元素使用val()
var wrong = $('#parent').children().first().val(); // 可能返回undefined
// 正确：根据元素类型选择合适的函数
var correct = $('#parent').children().first().text();

获取jQuery当前元素的第一个子元素的值是前端开发中的基础操作，通过掌握children().first()、first-child选择器等核心方法，并结合text()、html()、val()等值获取函数，可以灵活应对各种DOM操作场景，在实际应用中，还需注意性能优化和常见错误的避免，以编写出更高效、更健壮的代码。

标签： #jquery #子元素值