jQuery之html(),text()和val()的区别

Posted 汤米先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery之html(),text()和val()的区别相关的知识，希望对你有一定的参考价值。

文章目录

三者的区别

html():可以设置获取起始标签和结束标签的内容 ，跟dom属性innerHTML一样。

text():可也设置和获取起始标签和结束标签的文本，跟dom属性innerText一样。

val():可以设置和获取表单项的value属性值，跟dom属性value一样。val方法也可以同时设置多个表单项的选中状态（单选，多选，下拉都可以）。

下面用代码来详细解释一下

一. html用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
		
			$(function(){
				alert($("div").html()) //获取内容
				
				$("div").html('<div>我是小军</div>')//设置内容
				
			})
		</script>
	</head>
	<body>
		<div id='btn'>大家好<span>我是小明</span></div>
	</body>
</html>

运行结果

二. text()用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
		
			$(function(){
				alert($("div").text()) //获取内容
				
				$("div").text('<div>我是小军</div>')//设置内容
				
			})
		</script>
	</head>
	<body>
		<div id='btn'>大家好<span>我是小明</span></div>
	</body>
</html>

运行结果


三. val用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
		
			$(function(){
				alert($("#textid").val()) //获取内容
				
				$("#textid").val('我是小军')//设置内容
				
			})
		</script>
	</head>
	<body>
		<input type="text" id="textid" value="我是小明" />
	</body>
</html>

运行结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
		
			$(function(){
				
				$(":checkbox").val(["checkbox1","checkbox2"])  //选中两个
				
			})
		</script>
	</head>
	<body>
		<input type="checkbox" />checkbox1
		<input type="checkbox" />checkbox2
		<input type="checkbox" />checkbox3
	</body>
</html>

运行结果

以上是关于jQuery之html(),text()和val()的区别的主要内容，如果未能解决你的问题，请参考以下文章

jquery属性操作之html，text，val方法

jQuery获取文本节点之 text()/val()/html() 方法区别

216 jQuery 文本属性值：html() text() val()

jQuery源码html,text,val

jQuery的html()text()和val()的使用和区别

JQuery中的html(),text(),val()区别