jQuery中操作页面的文本和值

最新推荐文章于 2022-11-14 23:31:23 发布

有园人

最新推荐文章于 2022-11-14 23:31:23 发布

阅读量229

点赞数

分类专栏：网页编程和设计文章标签： jQuery中操作页面的文本和值

本文链接：https://blog.csdn.net/qq_42031653/article/details/99697088

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

主要是区分俩种方法：

1.html():可以识别HTML文件，将里面内容全部打印(操作双标签)

2.text():只是将里面的内容打印出来，不能识别HTML格式(操作双标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>12jQuery中操作页面的文本和值1</title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<style>
			#div1{
				width: 300px;
				height: 200px;
				border: 2px solid red;
			}
		</style>
		<script>
			$(function(){
				$("#but").click(function(){
					var div=$("#div1")
					//可以识别HTML文件，将里面内容全部打印(操作双标签)
					var ht=div.html();
					
					//只是将里面的内容打印出来，不能识别HTML格式(操作双标签)
					var te=div.text();
					//console.log(ht+"<****>"+te);
					
					//操作单标签还是需要用.val()
					var inp=$("#inp");
					var val=inp.val();
					//console.log(val);
					
				/*操作元素的对象和值*/
				
				div.html("<h4>我们不一样！！</h4>");//更改原来的内容(可以识别HTML文件)
				div.html(ht+"<h4>我们不一样！！</h4>");//在原来的内容的基础上添加新的内容
				
				div.text("<h4>我们不一样！！</h4>");//更改原来的内容(不可以识别HTML文件)
				div.text(te+"<h4>我们不一样！！</h4>");//在原来的内容的基础上添加新的内容
				
				inp.val("爱的华尔街");//直接更改表单内容。
				
				
				})
			})
		</script>
	</head>
	<body>
		<div id="div1">
			<span>富强民主，文明和谐</span>
		</div>
		<p>
			<input type="text" name="inp" id="inp" value="张三" />
		</p>
		<hr />
		<p>
			<input type="button" name="but" id="but" value="操作文本" />
		</p>
		
	</body>
</html>

有园人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中操作页面的文本和值

主要是区分俩种方法：1.html():可以识别HTML文件，将里面内容全部打印(操作双标签)2.text():只是将里面的内容打印出来，不能识别HTML格式(操作双标签)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>12jQuery中操作页面...
复制链接

扫一扫