<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding: 0;}
.box{
width: 800px;
height: 600px;
border:1px solid red;
}
.item{
width: 150px;
height: 150px;
background: pink;
border-radius: 50%;
float:left;
}
</style>
</head>
<body>
<button>在元素内部的尾部插入元素(append)</button>
<button>在元素内部的头部插入元素(prepend)</button>
<button>在元素外部的后面插入元素(after)</button>
<button>在元素外部的前面插入元素(before)</button>
<button>删除节点(remove)</button>
<button>清空(empty)</button>
<button>克隆元素(clone)</button>
<div class="box"></div>
<script>
// 绑定单击事件 在元素内部的尾部插入元素
$('button').eq(0).click(function(){
// 调用创建元素的函数
var oDiv=createDiv();
// 插入新的元素 append() appendTo()
// $('box').append(oDiv);
// 在指定元素里面的尾部插入新元素
// oDiv.appendTo($('.box')); // 将新的元素插入到指定元素内部的尾部
// 直接添加会把原来元素拿走
// $('button').eq(6).appendTo($('.box'));
// 先克隆
var Ne=$('button').eq(6).clone(true);
$('.box').append(Ne);
})
// 在元素内部的头部插入新的元素
$('button').eq(1).click(function(){
// 调用创建新元素的函数
var oDiv=createDiv();
// 插入元素 prepend() prependTo()
//$('.box').prepend(oDiv);// 在指定元素内部的前面插入
oDiv.prependTo($('.box'));// 将新元素插入到指定元素内部的前面
})
// 在元素外面的后面插入节点(元素)
$('button').eq(2).click(function(){
// 调用创建元素的函数
var oDiv=createDiv();
// 开始插入 after() insertAfter()
// $('.box').after(oDiv); //在元素外面的后面插入新元素
oDiv.insertAfter($('.box')); // 将新元素插入到指定元素外面的后面
})
// 在元素外面的前面出入节点(元素)
$('button').eq(3).click(function(){
// 先调用创建元素的函数
var oDiv=createDiv();
// 开插入 before() insertBefore
// $('.box').before(oDiv); // 在指定元素外面的前面插入新的元素
oDiv.insertBefore($('.box')); // 将新元素插入到指定元素外面的前面
})
// 删除节点
$('button').eq(4).click(function(){
// 删除元素
$('body').remove(); //. 会删除自己
})
// 清空元素
$('button').eq(5).click(function(){
// 清空
$('.box').empty();// 只删除指定元素内部的元素
})
// 克隆元素
// 不加参数 只是单纯的克隆元素 如果添加true参数,会把元素的事件一起克隆
$('button').eq(6).click(function(){
var Ne=$(this).clone(true);
console.log(Ne);
// 将克隆的额元素添加到box
$('.box').append(Ne);
})
// 封装创建新元素的函数
function createDiv(){
// 创建元素
var Ndiv=$('<div class="item"></div>');
Ndiv.css('background','rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')');
return Ndiv;
}
// 封装随机函数
function rund(m,n){
return Math.floor(Math.random()*(n-m+1))+m;
}
</script>
</body>
</html>
浙公网安备 33010602011771号