从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系（代码教程）
程序员文章站
2022-07-09 15:56:52
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是...
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是：
1. remove()方法：返回一个指向已被删除的节点的引用，这个节点元素还可以使用；
2.removeChild()方法：删除的节点仍然存在于内存，只是没有添加到当前文档的DOM树中。
可以总结为：remove()方法移除的是jQuery对象，这个对象又指向DOM节点；removeChild()方法则是直观得移除DOM节点。
两种方法都是把节点从DOM中临时删除，去往待定区！
jQuery对象和DOM对象是紧密相连，共生共存。
为验证这个结论，编制以下验证代码：
<!DOCTYPE html>
<html>
<head>
<meta chardelete=utf-8 />
<title>从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系</title>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<style>
</style>
<p id='block1'>
<p id='test1'>jQuery对象设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档</p>
<input type="button" id='delete1' value='delete1'>
<input type="button" id='back1' value='back1'>
</p>
<p id="block2">
<p id='test2'>jQuery对象设置CSS样式，移除jQuery对象，最后再把jQuery对象加入文档</p>
<input type="button" id='delete2' value='delete2'>
<input type="button" id='back2' value='back2'>
</p>
<p id="block3">
<p id='test3'>用原生JS设置CSS样式，再获取jQuery对象，把节点从DOM移除，最后再把jQuery对象加入文档</p>
<input type="button" id='delete3' value='delete3'>
<input type="button" id='back3' value='back3'>
</p>
<p id="block4">
<p id='test4'>用原生JS设置CSS样式，再获取jQuery对象，移除jQuery对象,最后再把jQuery对象加入文档</p>
<input type="button" id='delete4' value='delete4'>
<input type="button" id='back4' value='back4'>
</p>
<p id="block5">
<p id='test5'>先获取jQuery对象，再用原生JS设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档</p>
<input type="button" id='delete5' value='delete5'>
<input type="button" id='back5' value='back5'>
</p>
<p id="block6">
<p id='test6'>先获取jQuery对象，再用原生JS设置CSS样式，移除jQuery对象,最后再把jQuery对象加入文档</p>
<input type="button" id='delete6' value='delete6'>
<input type="button" id='back6' value='back6'>
</p>
<script>
$ (function () {
var g = function (id) {
return document.getElementById(id);
};
// jQuery对象设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档
var $test1 = $('#test1');
$test1.css({'height':'100px','border':'1px solid red'});
$('#delete1').click(function () {
g('block1').removeChild(g('test1'));
});
$('#back1').click(function () {
$test1.prependTo('#block1');
})
// jQuery对象设置CSS样式，移除jQuery对象，最后再把jQuery对象加入文档
var $test2 = $('#test2');
$test2.css({'height':'100px','border':'1px solid red'});
$('#delete2').click(function () {
$test2.remove();
});
$('#back2').click(function () {
$test2.prependTo('#block2');
});
// 用原生JS设置CSS样式，再获取jQuery对象，把节点从DOM移除，最后再把jQuery对象加入文档
g('test3').style.height = '100px';
g('test3').style.border = '1px solid red';
var $test3 = $('#test3');
$('#delete3').click(function () {
g('block3').removeChild(g('test3'));
});
$('#back3').click(function () {
$test3.prependTo('#block3');
})
// 用原生JS设置CSS样式，再获取jQuery对象，移除jQuery对象,最后再把jQuery对象加入文档
g('test4').style.height = '100px';
g('test4').style.border = '1px solid red';
var $test4 = $('#test4');
$('#delete4').click(function () {
$test4.remove();
});
$('#back4').click(function () {
$test4.prependTo('#block4');
})
// 先获取jQuery对象，再用原生JS设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档
var $test5 = $('#test5');
g('test5').style.height = '100px';
g('test5').style.border = '1px solid red';
$('#delete5').click(function () {
g('block5').removeChild(g('test5'));
});
$('#back5').click(function () {
$test5.prependTo('#block5');
})
// 先获取jQuery对象，再用原生JS设置CSS样式，移除jQuery对象,最后再把jQuery对象加入文档
var $test6 = $('#test6');
g('test6').style.height = '100px';
g('test6').style.border = '1px solid red';
$('#delete6').click(function () {
$test6.remove();
});
$('#back6').click(function () {
$test6.prependTo('#block6');
})
})
</script>
</html> 下一篇： CSS自适应布局等分比例实践分析