07-JQuery学习之操作元素的内容 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08-操作元素的内容</title>
	</head>
	<body>
		<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="op" value="oop">
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//html()用法
		console.log($('h3').html());
		$('#html').html('<h2>上海</h2>');
		$('#html2').html('上海');
		
		var html = $('#html').html();
		var html2 = $('#html2').html();
		console.log(html);
		console.log(html2);
		
		// text()用法
		$('#text').text('北京');
		$('#text2').text('<h2>北京</h2>');
		var text = $('#text').text();
		var text2 = $('#text2').text();
		console.log(text);
		console.log(text2);
		
		
		// val()
		var val = $('#op').val();
		console.log(val);
		$('#op').val('今天天气不错');
	</script>
	<!-- 
		操作元素的内容
			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>
posted @ 2021-03-29 21:52  雪漠阳光  阅读(42)  评论(0)  编辑  收藏  举报