jQuery3.5--节点增删改和复制

最新推荐文章于 2023-06-27 11:13:49 发布

jiaody111

最新推荐文章于 2023-06-27 11:13:49 发布

阅读量214

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/98369546

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

创建和插入节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				/*
				内部插入
				append(content|fn)
				appendTo(content)
				会将元素添加到指定元素内部的最后
				
				prepend(content|fn)
				prependTo(content)
				会将元素添加到指定元素内部的最前面
				
				
				外部插入
				after(content|fn)
				会将元素添加到指定元素外部的后面
				
				before(content|fn)
				会将元素添加到指定元素外部的前面
				
				insertAfter(content)
				insertBefore(content)
				*/
			   $('button').click(function(){
				    var $li = $('<li>我是一个新的节点</li>')
					 // $li.appendTo("ul");
					 // $('ul').append($li)
					 // $('ul').prepend($li)
					 // $('ul').after($li)
					 $('ul').before($li)
			   })
			   
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第一个节点</li>
			<li>我是第二个节点</li>
			<li>我是第三个节点</li>
		</ul>
		<button>添加节点</button>
	</body>
</html>

删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				/*
				删除 remove() detach()
			    利用remove删除之后再重新添加,原有的事件无法响应
				利用detach删除之后再重新添加,原有事件可以响应
				empty() 清空指定元素的内容和子元素, 指定元素自身不会被删除
				
				*/
			    $('div').click(function(){
			   					   alert('divv')
			   })
			   $('button').click(function(){
				   var $div = $('div')
				   $('div').empty()
				   // $('div').remove()
				   // $('body').append($div)
			   })
			   
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一个ppppppppp</p>
		</div>
		<button>删除节点</button>
	</body>
</html>

替换节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				/*
				替换后原先绑定的事件将会随着被替换的事件一起消失，需要在新元素上重新绑定事件
				replaceWith(content|fn)
				replaceAll(selector)
				替换所有匹配的元素为指定的元素
				*/
			   $('button').click(function(){
				   var $h6 = $('<h6>我是小标题</h6>')
				  // $('h1').replaceWith($h6)
				   $h6.replaceAll('h1')
			   })
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<h1>我是大标题</h1>
		<h1>我是大标题</h1>
		<h1>我是大标题</h1>
		<button>替换节点</button>
	</body>
</html>

复制节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				/*
				clone() 复制
				如果传入false就是浅复制, 如果传入true就是深复制
				浅复制只会复制元素, 不会复制元素的事件
				深复制会复制元素, 而且还会复制元素的事件
				*/
			   $('li').click(function(){
				   alert($(this).html())
			   })
			   $('button').eq(0).click(function(){
				var $li = $('li:first').clone(false)
				$('ul').append($li)
			   })
			   $('button').eq(1).click(function(){
			   	var $li = $('li:first').clone(true)
			   	$('ul').append($li)
			   })
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<button>浅复制节点</button>
		<button>深复制节点</button>
		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
			<li>我是第4个li</li>
			<li>我是第5个li</li>
		</ul>
	</body>
</html>

jiaody111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery3.5--节点增删改和复制

创建和插入节点<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src='../jQuery/jquery-1.12.4.js'></script> <script>...
复制链接

扫一扫