JavaEE中级.20190530.JavaScript/jQuery.何为表单元素和非表单元素.html()与text()的区别.

最新推荐文章于 2023-12-09 16:28:45 发布

原创最新推荐文章于 2023-12-09 16:28:45 发布 · 486 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaEE阶段同时被 2 个专栏收录

18 篇文章

订阅专栏

Java 知识个点汇总

9 篇文章

订阅专栏

本文介绍了JavaScript和jQuery中表单元素（如文本框、复选框等）与非表单元素（如div、span等）的取值方法。在jQuery中，表单元素用val()处理，而非表单元素则用html()和text()。html()会识别并显示HTML标签，而text()仅显示纯文本内容。

一.何为表单元素和非表单元素（Javascript和jQuery中）

1.表单元素：jQuery中取值赋值使用 val()
               文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
         非表单元素：jQuery中取值赋值使用 html()和text()
               div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

<注：jQuery中 val() 和 html() 分别对应 Javascript 中的 value 和 innerHTML >

dom： innerHTML="...."， innerText="....."
jquery： .html("...")， .text("......")

二. html() 和 text() 区别

html()可以识别数据中的html标签并显示出来；
text()不识别html标签，会当做纯文本显示；
取值时，html()能够获取到元素中的html代码，text()只会获取纯文本；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作元素的内容</title>
	</head>
	<body>
	
		<h3><span>html()和 text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="text"></div>
		<input type="text" name="uname" id="uname" value="oop" />
		
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 获取表单元素的值
		var uname = $("#uname").val();
		console.log(uname);
		// 设置表单元素的值
		$("#uname").val("今天天气不错");
		var uname2 = $("#uname").val();
		console.log(uname2);
		
		// html()  和  text()
		// 设置非表单元素的值
		$("#html").html("你好");
		$("#text").text("你好");
		
		$("#html").html("<h2>你好</h2>");
		$("#text").text("<h2>你好</h2>");
		
		// 获取元素的值
		var html = $("#html").html();
		var txt = $("#html").text();
		console.log(html);
		console.log(txt);
	
	</script>
</html>