jQuery操作元素的内容

最新推荐文章于 2023-08-25 13:53:37 发布

aqzengkuasheng

最新推荐文章于 2023-08-25 13:53:37 发布

阅读量193

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122991429

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了jQuery中用于操作元素内容的html()、text()和val()方法。html()用于设置或获取非表单元素的HTML内容，text()用于获取或设置纯文本内容，而val()则专门用于表单元素的值操作。通过示例代码展示了如何使用这些方法进行内容的读取和设置，并强调了它们在实际开发中的常见应用。

摘要由CSDN通过智能技术生成

在这里插入图片描述
html()和text()是针对非表单元素来用的，val是针对表单元素来用的。以后常用的是html()和val()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<!-- 
				操作元素的内容
					html()			获取元素的内容，包含html标签（非表单元素）
					html("内容")		设置元素的内容，包含html标签（非表单元素）
					text()			获取元素的纯文本内容，不识别HTML标签（非表单元素）
					text("内容")		设置元素的纯文本内容，不识别HTML标签（非表单元素）
					val()			获取元素的值（表单元素）
					val("值")		设置元素的值（表单元素）
					
				表单元素：
					文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
				非表单元素：
					div、span、h1~h6、table、tr、td、li、p等
					
					以后常用到的就是html()和val()
				
			 -->
			 <h3><span>html()和text()方法设置元素内容</span></h3>
			<div id="html"></div>
			 <div id="html2">
			 </div>
			 
			 <div id="text"></div>
			 
			<div id="text2">
			 </div>
			 

			 <input type="text" name="uname" id="bbb" value="oop" />
			
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//html("内容") 设置元素的内容
		$("#html").html(" <h1>上海</h1>");
		//html获取元素内容
		var ht=$("#html").html();
		$("#html2").html("上海");
		console.log(ht);
		//text("内容");设置元素的内容
		$("#text").text("北京");
		// $("#text2").text("<h1>北京</h1>");
		$("#text2").text("<h1>北京</h1>");
		
		//获取元素的值：val() 表单元素
		var bbb= $("#bbb").val();
		console.log(bbb);
		//设置表单元素的值
		$("#bbb").val("春天来了");
		var bbb= $("#bbb").val();
		console.log(bbb);
	</script>
</html>