jquery中val()、text()、html()和js中value、innerText、innerHTML的区别_js innertext可以用jquery里的val()

作者：知新_RL | 2024-02-18 21:36:34

踩

js innertext可以用jquery里的val()

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/110726