收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 節(jié)點(diǎn)操作</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>內(nèi)部尾部</button>
<button>內(nèi)部頭部</button>
<button>外部之前</button>
<button>外部之后</button>
<button>刪除節(jié)點(diǎn)</button>
<button>清空節(jié)點(diǎn)</button>
<button>替換節(jié)點(diǎn)</button>
<button>克隆節(jié)點(diǎn)</button>
<button>包裹節(jié)點(diǎn)</button>
<button>解除包裹</button>
<div id='all'></div>
<!--遠(yuǎn)程連接jq-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//在元素的內(nèi)部尾部插入元素
$('button').eq(0).click(function(){
var divs = createDiv();
divs.appendTo('#all');
})
//在元素的內(nèi)部的頭部插入元素
$('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');
})
//刪除元素，整個(gè)刪除掉
//remove()方法需要先找到需要?jiǎng)h除的那個(gè)元素的具體位置
$('button').eq(4).click(function(){
var fir = $('#all div:first');
fir.remove();
})
//empty方法，將緣故的集合全刪除清空
$('button').eq(5).click(function(){
$('#all').empty();
})
//替換節(jié)點(diǎn)，需要先獲取兩個(gè)節(jié)點(diǎn)
//節(jié)點(diǎn).replaceWith(替換成什么節(jié)點(diǎn));
$('button').eq(6).click(function(){
var div = createDiv();
var fir = $('#all div:first');
fir.replaceWith(div);
})
//克隆節(jié)點(diǎn)
//獲取元素內(nèi)節(jié)點(diǎn)
//獲取到當(dāng)前的div，克隆元素內(nèi)被獲取節(jié)點(diǎn)
$('button').eq(7).click(function(){
var fir = $('#all div:first');
var cl = fir.clone(true);
$('#all').append(cl);
})
//包裹節(jié)點(diǎn)
//包裹節(jié)點(diǎn)是將當(dāng)前元素進(jìn)行包裹，包裹后套上一層元素
$('button').eq(8).click(function(){
var div = $('<div class="ws"></div>');
$('#all').wrap(div);
})
//消除包裹，解除包裹
//將當(dāng)前被包裹的元素進(jìn)行解除
$('button').eq(9).click(function(){
$('#all').unwrap();
})
//此處調(diào)用creatDiv函數(shù)
function createDiv(){
var div = $('<div class="dvs"></div>');
//顏色是隨機(jī)數(shù),0~255
div.css('background',"rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")");
return div;
}
function rand(m,n){
//此處被createDiv函數(shù)調(diào)用
//Math.celi進(jìn)一法取整
//Math.random()創(chuàng)建一個(gè)0~1之間的隨機(jī)數(shù)
return Math.ceil(Math.random()*(n-m+1)+(m-1));
}
</script>
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)