使用jQuery获取div第一个子元素的值，可通过选择器与方法结合实现，常用两种方式：一是使用:first-child选择器直接定位，如$('div > :first-child').text()获取文本内容或.html()获取HTML结构；二是先选中父div再调用.children().first()，如$('div').children().first().text()，前者适用于明确父级下的首个子元素，后者更灵活，尤其在动态处理多个div时，注意若子元素为表单控件（如input），需用.val()获取值，此方法能高效提取目标内容，适用于页面数据动态提取与操作场景。
jQuery获取div第一个子元素的值：方法与实例详解
在jQuery开发中，操作DOM元素的子元素是非常常见的场景，尤其是获取特定位置子元素的值（如文本内容、表单值等），本文将详细介绍如何使用jQuery获取div元素的第一个子元素的值，包括不同场景下的方法选择、代码示例及注意事项,帮助开发者掌握这一实用技巧。
要获取div的第一个子元素的值,主要涉及两个核心步骤：
- 定位div元素：通过jQuery选择器选中目标div；
- 获取第一个子元素并提取值：使用jQuery的子元素筛选方法（如
children()、first-child选择器等）定位第一个子元素，再根据子元素类型（文本节点、普通元素、表单元素等）选择对应的值获取方法（如text()、html()、val()等）。
具体实现方法及示例
场景1：获取div第一个子元素（文本节点）的文本内容
如果div的第一个子元素是文本节点（如直接在div内写文本，或通过document.createTextNode()创建），需使用contents()方法（包含文本节点、注释节点等）或children()结合filter()筛选。
示例HTML结构：
<div id="parentDiv"> 这是第一个子元素（文本节点） <p>这是第二个子元素（p标签）</p> </div>
jQuery代码：
// 方法1：使用contents() + filter()筛选文本节点
var firstText = $("#parentDiv").contents().filter(function() {
return this.nodeType === 3; // 3表示文本节点
}).text();
console.log(firstText); // 输出："这是第一个子元素（文本节点）"
// 方法2：使用children() + first()（仅获取子元素，忽略文本节点）
var firstElement = $("#parentDiv").children().first();
// 注意：如果第一个子元素是文本节点，children()会忽略，此时需用contents()
说明：
contents()：获取所有子节点（包括文本节点、注释节点等），nodeType为3表示文本节点；children()：仅获取子元素（标签节点）,忽略文本节点和注释节点。
场景2：获取div第一个子元素（普通元素，如p、span等）的文本内容
如果div的第一个子元素是HTML标签（如<p>、<span>、<div>等），推荐使用children()或first-child选择器，再通过text()或html()。
示例HTML结构：
<div id="parentDiv"> <p class="first-child">这是第一个p标签</p> <span>这是第二个子元素（span）</span> <div>这是第三个子元素（div）</div> </div>
jQuery代码：
// 方法1：children() + first() + text()
var firstElementText = $("#parentDiv").children().first().text();
console.log(firstElementText); // 输出："这是第一个p标签"
// 方法2：:first-child选择器 + text()
var firstChildText = $("#parentDiv :first-child").text();
console.log(firstChildText); // 同上
// 方法3：children() + eq(0) + html()（获取HTML内容）
var firstElementHtml = $("#parentDiv").children().eq(0).html();
console.log(firstElementHtml); // 输出："这是第一个p标签"（包含标签内的文本内容）
说明：
children().first()：获取所有子元素中的第一个，等同于children(":first-child")；first-child：选择器，直接匹配父元素的第一个子元素（包括文本节点，但结合text()时文本节点会被提取）；text()：获取元素的纯文本内容（不包含HTML标签）；html()：获取元素的HTML内容（包含标签内的所有HTML结构）。
场景3：获取div第一个子元素（表单元素，如input、select等）的值
如果div的第一个子元素是表单元素（如<input>、<select>、<textarea>等），需使用val()方法获取其值。
示例HTML结构：
<div id="formDiv">
<input type="text" value="输入框的值" class="first-input">
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
</div>
jQuery代码：
// 获取第一个子元素（input）的值
var firstInputValue = $("#formDiv").children().first().val();
console.log(firstInputValue); // 输出："输入框的值"
// 获取第一个子元素（select）的选中值
// 假设第一个子元素是select：
// var selectValue = $("#formDiv").children().first().val();
// console.log(selectValue); // 输出当前选中option的value
说明：
val()：专门用于表单元素的值获取（如input、select、textarea等），非表单元素使用val()会返回undefined。
场景4：获取复杂结构下的第一个子元素值
在实际开发中，div内部可能包含更复杂的结构，如嵌套元素或混合内容,以下是处理这种情况的方法。
示例HTML结构：
<div id="complexDiv">
<!-- 注释节点 -->
<div class="wrapper">
<span>嵌套元素</span>
</div> <img src="example.jpg" alt="图片">
</div>
jQuery代码：
// 获取第一个非注释节点的文本内容
var firstRealContent = $("#complexDiv").contents().filter(function() {
return this.nodeType === 3 || (this.nodeType === 1 && this.nodeName !== '!' && !$(this).is('script'));
}).first().text();
// 或者获取第一个元素节点
var firstElement = $("#complexDiv").children().first();
var firstElementText = firstElement.text();
注意事项
区分children()与contents()
children()：仅获取子元素（标签节点），忽略文本节点、注释节点,适合操作HTML标签；contents()：获取所有子节点（包括文本、注释、标签节点）,适合处理文本节点或混合内容。
示例：
<div id="test"> 文本节点 <!-- 注释节点 --> <p>标签节点</p> </div>
$("#test").children().length; // 返回1（只有<p>）
$("#test").contents().length; // 返回3（文本节点、注释节点、
