jQuery中.text() 和 .val()辨析

在jQuery中，.text() 和 .val() 是两个用于操作DOM元素内容的常用方法，但它们有不同的用途和适用的元素类型。

.text()

.text() 方法用于获取或设置匹配元素的文本内容。适用于以下元素：

• 普通HTML元素（如<div>，<span>，<p>等）

使用.text()时，它会获取或设置匹配元素的所有子节点的文本内容，包括后代元素的文本。

示例：

// 获取元素的文本内容
var text = $('#elementId').text();

// 设置元素的文本内容
$('#elementId').text('新的文本内容');

.val()

.val() 方法用于获取或设置表单元素的值。适用于以下表单元素：

• 输入框（如<input>，<textarea>，<select>等）

使用.val()时，它会获取或设置表单元素的当前值。

示例：

// 获取输入框的值
var value = $('input[name="inputName"]').val();

// 设置输入框的值
$('input[name="inputName"]').val('新的输入值');

区别和适用场景

• text()：适用于普通的HTML元素，用于操作其文本内容。
• val()：专门用于表单元素（如输入框、下拉菜单等），用于操作其值。

错误用法

$('input[name="authorName"]').text(author_name); 是错误用法，因为<input>元素是一个表单元素，它的内容应该使用.val()来设置，而不是.text()。使用.text()对<input>元素没有效果，因为.text()不会对表单元素的值进行操作。

正确用法：

// 设置输入框的值
$('input[name="authorName"]').val(author_name);

错误用法：

// 尝试设置输入框的文本内容（无效）
$('input[name="authorName"]').text(author_name);

结论

• 如果你操作的是表单元素的值（如<input>），请使用.val()。
• 如果你操作的是普通HTML元素的文本内容，请使用.text()。

确保根据元素类型选择合适的方法，以避免代码无效或出现错误。