jquery中val()、text()、html()和js中value、innerText、innerHTML的区别

本文链接：https://blog.csdn.net/qq_45746493/article/details/111300487

1、val()与value的区别
val()：带参数为赋值给输入框(input)，不带参数为获取输入框(input)的值
value：获取输入框(input)的值，属于原生js

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(":text").val("hhh");//将hhh赋值给输入框
				var $val = $(":text").val();//获取到输入框的值
				console.info($val);
				console.info(document.getElementById("inp").value);//通过获取id使用原生js获取value的值
			})
		</script>
	</head>
	<body>
		<input type="text" id="inp" />
	</body>
</html>

2、text()和innerText与html()和innerHTML的区别
text()：获取文本的内容，或把文本赋值给html标签
innerText：获取html标签的内容，与文本内容一致
html()：获取标签内部子元素的所有内容，包含标签
innerHTML：获取标签内部子元素的所有内容，包含标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				console.info($("#id").text());//获取div的文本内容
				console.info($("#id")[0].innerText);//获取div的文本内容
				console.info($("#id").html());//获取div里面的所有内容，包含标签
				console.info($("#id")[0].innerHTML);//获取div里面的所有内容，包含标签
			})
		</script>
	</head>
	<body>
		<div id="id">
			123
			456
			<b>12356</b>
		</div>
	</body>
</html>