JQuery获取元素内容操作元素

最新推荐文章于 2023-04-14 11:28:57 发布

好吃的都给你呀

最新推荐文章于 2023-04-14 11:28:57 发布

阅读量508

点赞数

分类专栏： #前端思维框架文章标签： Jquery 获取元素

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/103395336

版权

#前端思维框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JQuery获取元素内容操作元素

获取/设置元素内容体

获取/设置元素内容体HTML代码

语法

属性名

属性说明

jQuery对象.html()

获得内容体html代码，如果有标签代码，一并获得。

jQuery对象.html("HTML代码")

设置html代码，如果有标签，将进行解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function run1(){
				var str = $("#d1").html();
				alert(str);
			}
			function run2(){
				$("#d1").html("<font color='blue'>你好</font>");
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<font color="red">你好</font>
		</div>
		<hr />
		<input type="button" value="点我获取内容体代码" onclick="run1()"/>
		<input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/>
	</body>
</html>

获取/设置元素内容体纯文本

语法

属性名

属性说明

JQ对象.text()

获得文本，如果有标签，忽略。

JQ对象.text("纯文本")

设置文本，如果含有HTML标签，不进行解析。原样输出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function run1(){
				var str = $("#d1").text();
				alert(str);
			}
			function run2(){
				$("#d1").text("hello");
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<font color="red">你好</font>
		</div>
		<hr />
		<input type="button" value="点我获取内容" onclick="run1()"/>
		<input type="button" value="点我更改内容" onclick="run2()"/>
	</body>
</html>

追加元素内容体

作为子标签追加到末尾

属性名	属性说明
$('jQuery对象').append('HTML代码')	先获取jQuery对象，把html作为子标签追加到jQuery对象的末尾
$('html代码').appendTo('jQuery对象');	Html代码要放在$()中，作为子标签追加到jQuery对象的末尾

作为子标签添加到开头

属性名	属性说明
$('jQuery对象').prepend('HTML代码')	获取jQuery对象，把html作为子标签添加到jQuery对象的开始
$('html代码').prependTo('jQuery对象');	html代码要放在$()中，作为子标签追加到jQuery对象的开始

作为兄弟标签添加到前面

属性名	属性说明
$('jQuery对象').before('HTML代码')	获取jQuery对象，把html作为兄弟标签添加到jQuery对象的前面
$('html代码').insertBefore('jQuery对象');	html代码要放在$()中，作为兄弟标签添加到jQuery对象的前面

作为兄弟标签添加到后面

属性名	属性说明
$('jQuery对象').after('HTML代码')	获取jQuery对象，把html作为兄弟标签添加到jQuery对象的后面
$('html代码').insertAfter('jQuery对象');	html代码要放在$()中，作为兄弟标签添加到jQuery对象的后面

添加父标签

属性名	属性说明
$('jQuery对象').wrap('HTML代码')	获取jQuery对象，把html作为父标签添加

删除标签

属性名	属性说明
$('jQuery对象').empty()	清除选择的标签中的所有子标签
$('jQuery对象').remove()	删除标签自身，包括子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function run1(){
				//格式1
				//$("#rank").append("<li>乌索普</li>");
				//格式2
				$("<li>乌索普</li>").appendTo("#rank");
			}
			function run2(){
				//格式1
				//$("#rank").prepend("<li>娜美</li>");
				//格式2
				$("<li>娜美</li>").prependTo("#rank");
			}
			function run3(){
				//格式1
				//$("#rank").before("<ul><li>路飞</li></ul>");
				//格式2
				$("<ul><li>路飞</li></ul>").insertBefore("#rank");
			}
			function run4(){
				//格式1
				//$("#rank").after("<ul><li>艾斯</li></ul>");
				//格式2
				$("<ul><li>艾斯</li></ul>").insertAfter("#rank");
			}
			function run5(){
				$('#rank').wrap("<ul id='father' style='background-color: lightpink; width: 200px;'>草帽海贼团</ul>");
			}
			function run6(){
				$("#rank").empty();
			}
			function run7(){
				$("#father").remove();
			}
		</script>
	</head>
	<body>
		
		<ul id="rank">
			<li>索隆</li>
			<li>山治</li>
			<li>乔巴</li>
		</ul>

		<input type="button" value="列表尾部追加" onclick="run1()" />
		<input type="button" value="列表头部追加" onclick="run2()" />
		<input type="button" value="前面添加兄弟标签" onclick="run3()" />
		<input type="button" value="后面添加兄弟标签" onclick="run4()" />
		<input type="button" value="添加父标签" onclick="run5()" />
		<input type="button" value="删除标签" onclick="run6()" ondblclick="run7()"/>
	</body>
</html>

好吃的都给你呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JQuery获取元素内容操作元素

JQuery获取元素内容操作元素获取/设置元素内容体获取/设置元素内容体HTML代码语法属性名属性说明 jQuery对象.html() 获得内容体html代码，如果有标签代码，一并获得。 ...
复制链接

扫一扫