第四章熟悉代码练习

小小萌新倪

于 2019-10-30 19:57:11 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/qq_43366068/article/details/102825987

版权

对文本内容操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
		<div>$("div").text();</div>  /*重复text一边*/
		<script type="text/javascript">
			$(document).ready(function(){
				$("div").text("我是通过text的方式去设置文本内容");
			});
		
		</script>
	</head>
	<body>
		<div> 
		
		</div>
		
	</body>
</html>

创建节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	var $p_1=$("<p></p>");
	var $p_2=$("<p></p>");
	$("div").append($p_1);
	$("div").append($p_2);
	var $p_1=$("<p>明日科技</p>");
	var $p_2=$("<p>明日图书</p>");
	$("div").append($p_1);
	$("div").append($p_2);
	$("<p>A</p>").appendTo("#B");
	$("#B").append("<p>A</p>");
	$("#B").appendTo("#A");</script>
	</head>
	<body>
	<div>
		
	</div>
	</body>
</html>

插入节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
	
	</head>
	<body>
		<div>
		
			$(document).ready(function(){
			var $p_1=$("<p>明日科技</p>");
			var $p_2=$("<p>明日图书</p>");
			$div=$("div");
			$div.append($p_1);
			$p_2.appendTo($div);
			
			var $p_2=$("div p:eq(1)").remove();
			$("div").append($p_2);
		</div>
	</body>
</html>

删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"src="jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<div>
		<p title="明日之后">明日科技</p>
		<p title="明日图书">明日图书</p>
		</div>
		<script>
			(document).ready(function(){
			$("div p").remove("p[title !=明日科技]");
		});</script>
	</body>
</html>

小小萌新倪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章熟悉代码练习

对文本内容操作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"src="jquery-1.11.1.min.js"></script> ...
复制链接

扫一扫