在一开始用到这两个功能的时候,我认为两个方法的效果是相似的,用哪个都行,但是经过测试我发现,两者还是有较大不同的.废话不多,直接上代码~:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<div>div1</div>
<div class="current">div2</div>
<div>div3</div>
<div>div4</div>
</div>
<div class="box">哈哈哈</div>
<button>删除</button>
<button>清空</button>
<script>
$(function () {
//........
//删除和清空:remove() empty()
$("button").eq(0).click(function () {
$(".box").remove();
})
$("button").eq(1).click(function () {
$(".box").empty();
})
})
</script>
</body>
</html>光从代码无法观察出什么,各位想了解如何不同的,可以复制我的代码,然后在浏览器上进行预览一下,在开发者工具的Elements里观察两个div标签的状态.
在remove()中,它是直接删除了指定元素里的所有标签,不会在DOM中留下位置.
而在empty()方法中,仅仅是清空了指定元素里的各标签文本,保留了该标签在DOM中的占用位置.
虽然两个方法在页面上观察并无两样,但是,在我们敲代码时,造成的逻辑影响是相差千里的,希望各位在实现功能的时候能够想明白自己需要的到底是什么功能,再去选择方法.
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
