在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()。
确保根据元素类型选择合适的方法,以避免代码无效或出现错误。