首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
JQuery中的Dom操作-复制节点/替换节点/包裹节点
作者：小萝卜 2023-03-24 【 jquery 】 浏览 318
简介JQuery中的Dom操作-复制节点/替换节点/包裹节点
复制节点
.clone():复制当前的节点。
替换节点
.replace With();
.replace All()。
包裹节点
.wrap();
.wrap All()。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#all{width:800px;height:400px;margin:0 auto;border:dashed 2px orange;}
.item{width:100px;height:100px;background:black;border-radius:50%;float:left;}
.b{border:solid 1px #333;padding:5px;}
</style>
</head>
<body>
<button>在div内部的尾部添加</button>
<button>在div内部的头部添加</button>
<button>在div外部的尾部添加</button>
<button>在div外部的头部添加</button>
<button>清空元素</button>
<button>删除最后一个元素</button>
<button>替换第一个元素</button>
<button>克隆</button>
<button>包裹</button>
<button>解包</button>
<div id="all"></div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//绑定第七个
$('button:eq(6)').click(function(){
//创建一个新元素
var d = createDiv();
//获取第一个元素
var f = $('.item:first').replaceWith(d);//replace替换 with用....
})
////绑定第八个
$('button:eq(7)').click(function(){
//获取第一个元素
var f = $('.item:first').clone(true);//完成对元素的复制
//执行插入
$('#all').append(f);
})
////绑定第九个
$('button:eq(8)').click(function(){
$('#all').wrap("<div class='b'></div>");
})
////绑定第十个
$('button:eq(9)').click(function(){
$('#all').unwrap();
})
//封装函数实现div创建
function createDiv(){
var d = $('<div class="item">iloveyou</div>');//创建一个空的div元素
//样式操作
// d.addClass('item');
var r = rand(0,255);
var g = rand(0,255);
var b = rand(0,255);
d.css('background','rgb('+r+','+g+','+b+')');
//返回对象
return d;
}
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+m-1;
}
// setInterval(function(){
// var d = createDiv();
// $('#all').append(d);
// },50);
</script>
</body>
</html>
很赞哦！ (0)
