JQuery操作html(一)

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

区别：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

<html>
	<head>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			$(document).ready(function() {
				// text() - 设置或返回所选元素的文本内容
				$("#text").click(function() {
					alert("我的text:" + $("#test").text());
				});
				// html() - 设置或返回所选元素的内容（包括 HTML 标记）
				$("#html").click(function() {
					alert("我的html:" + $("#test").html());
				});
				// val() - 设置或返回表单字段的值
				$("#val").click(function() {
					alert("我的val:" + $("#test1").val());
				});				
				// append() - 在被选元素的结尾插入内容
				$("#append").click(function() {
					$("h5").append("学习！！！");
					$("h5").append("<b>Study</b>");
				});
				// prepend() - 在被选元素的开头插入内容
				$("#prepend").click(function() {
					$("h5").prepend("一起试一试啊,");
				});
				// after() - 在被选元素之后插入内容
				$("#after").click(function() {
					$("h5").after("后面-我爱学习");
				});
				// before() - 在被选元素之前插入内容
				$("#before").click(function() {
					$("h5").before("前面-我爱学习");
				});
				
				// remove() - 删除被选元素（及其子元素）				
				$("#remove").click(function() {
					$("h1").remove();
				});
				// empty() - 从被选元素中删除子元素
				$("#empty").click(function() {
					$("div").empty();
				});				
			});
		</script>
		<script type="text/css">

		</script>
	</head>
	<body>
		<button id="text">我是text</button>
		<button id="html">我是html</button>
		<button id="val">我是val</button>
		<button id="append">添加文本</button>
		<button id="prepend">开头插入</button>
		<button id="after">元素之后插入</button>
		<button id="before">元素之前插入</button>
		<button id="remove">移除h1</button>
		<button id="empty">清空div</button>
		<p id="test">一起讨论、<b>交流</b>、学习前端技术。</p>
		<br />
		<input id="test1" value="你猜我几岁">
		<br />
		<h5>快来和我一起学习吧</h5>
		<br />
		<h1>今天有太阳</h1>
		<div>
			<p>
				<b>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声，有一分热,发一分光，就令萤火一般，也可以在黑暗里发一点光,不必等候炬火。
				
				此后如竟没有炬火：我便是唯一的光.倘若有了炬火，出了太阳,我们自然心悦诚服的消失，不但毫无不平,而且还要随喜赞美这炬火或太阳；因为他照了人类，连我都在内。
				
				我又愿中国青年都只是向上走，不必理会这冷笑和暗箭。</b>
				
				<p>文字摘自鲁迅《热风·随感录四十一》<p/>
			</p>
		</div>
	</body>
</html>
posted @ 2020-12-10 11:01  小安不菜  阅读(218)  评论(0)    收藏  举报