收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 节点操作</title>
<style>
#all{
width: 600px;
height:400px;
border:solid 1px blue;
margin:30px auto;
}
.dvs{
width: 80px;
height: 80px;
/*background:green;*/
float:left;
margin:5px;
border-radius: 50%;
}
.ws{
width:100%;
height:100%;
border:solid 1px red;
padding:5px;
}
</style>
</head>
<body>
<button>内部尾部</button>
<button>内部头部</button>
<button>外部之前</button>
<button>外部之后</button>
<button>删除节点</button>
<button>清空节点</button>
<button>替换节点</button>
<button>克隆节点</button>
<button>包裹节点</button>
<button>解除包裹</button>
<div id='all'></div>
<!--远程连接jq-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//在元素的内部尾部插入元素
$('button').eq(0).click(function(){
var divs = createDiv();
divs.appendTo('#all');
})
//在元素的内部的头部插入元素
$('button').eq(1).click(function(){
var div = createDiv();
div.prependTo('#all');
})
//在元素外部的之前插入元素，再次直接插入到DIV之前
$('button').eq(2).click(function(){
var div = createDiv();
div.insertBefore('#all');
})
//在元素的外部之前插入元素，再次直接插入到DIV之后
$('button').eq(3).click(function(){
var div = createDiv();
div.insertAfter('#all');
})
//删除元素，整个删除掉
//remove()方法需要先找到需要删除的那个元素的具体位置
$('button').eq(4).click(function(){
var fir = $('#all div:first');
fir.remove();
})
//empty方法，将缘故的集合全删除清空
$('button').eq(5).click(function(){
$('#all').empty();
})
//替换节点，需要先获取两个节点
//节点.replaceWith(替换成什么节点);
$('button').eq(6).click(function(){
var div = createDiv();
var fir = $('#all div:first');
fir.replaceWith(div);
})
//克隆节点
//获取元素内节点
//获取到当前的div，克隆元素内被获取节点
$('button').eq(7).click(function(){
var fir = $('#all div:first');
var cl = fir.clone(true);
$('#all').append(cl);
})
//包裹节点
//包裹节点是将当前元素进行包裹，包裹后套上一层元素
$('button').eq(8).click(function(){
var div = $('<div class="ws"></div>');
$('#all').wrap(div);
})
//消除包裹，解除包裹
//将当前被包裹的元素进行解除
$('button').eq(9).click(function(){
$('#all').unwrap();
})
//此处调用creatDiv函数
function createDiv(){
var div = $('<div class="dvs"></div>');
//颜色是随机数,0~255
div.css('background',"rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")");
return div;
}
function rand(m,n){
//此处被createDiv函数调用
//Math.celi进一法取整
//Math.random()创建一个0~1之间的随机数
return Math.ceil(Math.random()*(n-m+1)+(m-1));
}
</script>
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
