jq操作节点

最新推荐文章于 2022-07-12 19:28:52 发布

li3196672779

最新推荐文章于 2022-07-12 19:28:52 发布

阅读量461

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 300px;
			height: 100px;
			border: 1px solid red;
		}
	</style>
	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('ul li').click(function(){
				alert($(this).text());
			})
			
			$('#btn').click(function(){
				var $t = $('ul li:eq(0)').detach();
				$('ul').append($t);
			})
		})
	</script>
</head>
<body>
	 <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>canvas</li>
    </ul>
    <input id="btn" type="button" value="remove删除" />
    
</body>
</html>remove()，  被删除的节点可以用变量保存
在jQuery中，我们可以使用remove()方法将某个节点删除。会把这个节点的事件同时删除
deatch    被删除的节点可以用变量保存   会把这个节点 删除，但是这个节点的事件没有删除
详情：http://www.lvyestudy.com/jquery/jq_6.4.aspx

---------------------------------------------------------------------------------------------------
var $t = $('ul li:eq(0)').empty();
在jQuery中，我们可以使用empty()方法清空元素内部的所有节点。


复制节点   .clone()


	()默认是 false ， 代表复制节点但不复制节点的事件  true代表复制节点同时复制该节点的事件！


替换节点:	
	
<li><strong>HTML</strong></li>	
$('strong').replaceWith('<p class="aaa">ppppppppppppppppp</p>');
下面一句是颠倒过来，2句话 作用等价，  节点替换了就没有事件了，需要重新绑定，  替换节点时也可以同时添加上类
（1）replaceWith()；
（2）replaceAll()；