jQuery中的remove()、detach()和empty()的区别

jQuery提供三种删除节点的方法。

1. remove()方法

从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。

返回值是一个指向已被删除的节点的引用。

意思就是说,删除后还可以继续使用:

var $li  = $("ul li :eq(1)").remove();
$li.appendTo("ul");

可以使用appendTo()方法,省略remove();

$("ul li:eq(1)").appendTo("ul");

也可以传递参数来选择性地删除元素。

$("ul li").remove("li[]title!=菠萝");

2. datach()方法

也是从DOM中删除所有匹配元素,但不会把匹配的元素从jQuery对象中删除。

与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

$("ul li").click(function(){
    alert($(this).html());
}):

var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");//重新追加此元素,发现之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效。

3. empty()方法

严格来讲,empty方法并不是删除节点,而是清空节点。

$("ul li:eq(1)").empty();
时间: 2024-08-05 14:14:01

jQuery中的remove()、detach()和empty()的区别的相关文章

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

jQuery中关于height,innerWidth与outerWidth的区别

jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). jQuery innerWidth() 和 innerHeight() 方法 innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() 方法返回元素的高度(包括内边距). 公式为height()+padding*2 jQuery outerWidth() 和

jquery中map函数与each函数的区别

?jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ?其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ?例如: var items = [1,2,3,4]; ? $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un

JavaScript学习笔记——jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值.其中.和.text()方法不能使用在表单元素上,而.val()

jquery中attr方法和prop方法的区别

关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true"等属性设置,和它的状态值true/false是无关的.,而这里的属性值,事实上只是和defaultChecked的状态值有关,并且只能用来设置checkbox的初始的值.checked的属性值并不会随着checkbox的的状态变化而变化,可是checkbox的状态值却会.因此,为了能更好的跨浏览器的

jQuery中append(),prepend()与after(),before()的区别

在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素的作用,容易混淆. 要想搞清楚他们之间的区别. 首先我们要明白这几个函数各自的作用. 一.append()和prepend()的作用 append()用于在被选元素的结尾插入元素. prepend()用于在被选元素的开头插入元素. 重点在于黑体字--被选元素的, 也就是说这两个函数的添加都是添加到元

jQuery中$(document).ready()和window.onload的区别

 $(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onload还是有区别的. 最基本的区别 1.执行时间 window.onload必须等到页面内包括图片.flash等的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如<p>图片视频等</p>(假设页面只有这一个标签),wi

jQuery中width、innerWidth、outerWidth的区别

原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width其实就是content area,innerWidth = width + paddingouterWidth = innerWidth + border 不过,jQuery的outerWidth属性还可以传递一个参数,那么:outerWidth(true) = outerWidth + margi