jQuery 学习-样式篇（六）：jQuery 获取和设置表单元素的值

最新推荐文章于 2025-03-27 16:30:45 发布

店伙计

最新推荐文章于 2025-03-27 16:30:45 发布

阅读量6.2k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/111985447

版权

Web 前端开发笔记专栏收录该内容

16 篇文章

订阅专栏

该博文介绍了jQuery的val()方法如何用于获取和设置input、textarea以及select元素的值。强调了val()方法在处理select标签时的便捷性，并指出在存在多个相同元素时，val()只会返回第一个匹配元素的值。同时，文章对比了原生JavaScript获取select选中值的复杂性，突显了jQuery的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111985447，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

jQuery 中可以使用 val() 方法处理表单元素的值，例如 input、select 和 textarea：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			// 获取和设置 input 中的 value
			console.log($('#myinput').val());
			$('#myinput').val("input测试完成");

			// 获取和设置 textarea 中的 value
			console.log($('#mytextarea').val());
			$('#mytextarea').val("textarea 测试完成");

			// 只能用来获取 select 中的 value，不能修改。获取到的 value 是当前被选中的 option 对应的 value
			console.log($('#myselect').val());
		})
	</script>
</head>
<body>
	<input type="button" value="input测试" id="myinput">
	<textarea id="mytextarea">textarea 测试</textarea>
	<select id="myselect">
		<option>选择1</option>
		<option>选择2</option>
		<option selected="selected">选择3</option>
		<option>选择4</option>
	</select>
</body>
</html>

其实对于 input 和 textarea 来说，使用 jQuery 获取值和原生的方法相比没有特别大的优势。尤其是 textarea ，除了使用 val() 方法，还可以使用 html() 和 text() 方法获取和修改值。

优势最明显的是对于 select 标签的修改，例如上面的代码，如果使用原生的方式获取当前被选中的 option 值，需要使用如下方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		onload = function (){
			var index = myselect.selectedIndex;
			console.log(index);
			console.log(myselect.options[index].text)
		}
	</script>
</head>
<body>
	<select id="myselect">
		<option>选择1</option>
		<option>选择2</option>
		<option selected="selected">选择3</option>
		<option>选择4</option>
	</select>
</body>
</html>

而使用 jQuery 则可以减少很多代码。

另外还有一点需要注意的是，如果代码中有多个相同的元素，使用 val() 方法时，只会获取到第一个匹配到元素的值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('input').val())
		})
	</script>
</head>
<body>
	<input type="button" value="input测试1" id="myinput">
	<input type="button" value="input测试2" id="myinput">
	<input type="button" value="input测试3" id="myinput">
</body>
</html>