jQuery detach()和empty()方法
2023-06-13 09:12:02 时间
jQuery 删除元素除了上节教程介绍的 remove() 方法外,还有 detach() 和 empty() 方法,本节教程就对这两个方法进行介绍。
jQuery detach()方法
remove() 方法用于 彻底 删除元素。所谓的 彻底 ,指的是不仅会删除元素,还会把元素绑定的事件删除; detach() 方法用于 半彻底 删除元素。所谓的 半彻底 ,指的是只会删除元素,不会把元素绑定的事件删除。
图 1:默认效果
图 2:点击按钮后的效果
图 3:默认效果
图 4:点击按钮后的效果 remove() 和 detach() 这两个方法在删除元素时,会将自身元素以及所有后代元素一并删除。empty() 方法仅仅是删除后代元素,并不会删除自身元素。
在 jQuery 中,detach() 和 remove() 的功能虽然相似,都是将某个元素及其内部所有内容删除,但是两者也有明显的区别。
remove() 方法用于 彻底 删除元素。所谓的 彻底 ,指的是不仅会删除元素,还会把元素绑定的事件删除; detach() 方法用于 半彻底 删除元素。所谓的 半彻底 ,指的是只会删除元素,不会把元素绑定的事件删除。
语法:
$().detach()
举例:
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function () { $( li ).click(function () { alert( 欢迎来到C语言中文网! ) $( #btn ).click(function () { var $li = $( li:nth-child(4) ).remove(); $($li).appendTo( ul /script /head body li HTML /li li CSS /li li JavaScript /li li jQuery /li li Vue.js /li /ul input id= btn type= button value= 删除 / /body /html
默认情况下,预览效果如图 1 所示。
图 1:默认效果
我们点击【删除】按钮后,此时浏览器预览效果如图 2 所示。
图 2:点击按钮后的效果
在这个例子中,我们为每一个 li 元素添加一个点击事件,点击任何一个 li 元素都会弹出一个对话框。在我们点击【删除】按钮后, li jQuery /li 这一项就会被添加到 ul 元素内部的末尾处。但是这个时候,如果再去点击 li jQuery /li 这一项,会发现之前绑定的点击事件被删除了,并不会弹出对话框。
当我们把 remove() 替换成 detach() 后,可以发现 li 元素被删除后又重新被添加使用时,该元素之前绑定的点击事件依然存在。对于 remove() 和 detach() 这两个方法,可以总结为这一点:元素被删除后又重新被添加,如果不希望该元素保留原来绑定的事件,应该用 remove() 方法;如果希望该元素保留原来绑定的事件,应该使用 detach() 方法。
jQuery empty()方法在 jQuery 中,我们可以使用 empty() 方法来 清空 某个后代元素。
语法:
$().empty()
举例:
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function () { $( #btn ).click(function () { $( ul li:nth-child(4) ).empty(); /script /head body li HTML /li li CSS /li li JavaScript /li li jQuery /li li Vue.js /li /ul input id= btn type= button value= 删除 / /body /html
默认情况下,预览效果如图 3 所示。
图 3:默认效果
我们点击【删除】按钮后,此时预览效果如图 4 所示。
图 4:点击按钮后的效果 remove() 和 detach() 这两个方法在删除元素时,会将自身元素以及所有后代元素一并删除。empty() 方法仅仅是删除后代元素,并不会删除自身元素。
23800.html
CSSC语言htmljavaJavaScript相关文章
- JavaScript进阶内容——jQuery
- jQuery自动触发事件与bootstrap/jQuery插件用法
- jQuery 获取DOM节点的两种方式详解编程语言
- js jquery 页面加载初始化方法详解编程语言
- jQuery跨域访问问题解决方法
- jQuery页面Mask实现代码
- Jquery与JS两种方法仿twitter/新浪微博高度自适应无缝滚动实现代码
- JQuery中html()方法使用不当带来的陷阱
- 推荐40个非常优秀的jQuery插件和教程【系列三】
- JQuery插件Style定制化方法的分析与比较
- IE中jquery.form中ajax提交没反应解决方法分享
- jquery异步跨域访问代码
- JQuery的自定义事件代码,触发,绑定简单实例
- js(jQuery)获取时间的方法及常用时间类搜集
- 写JQuery插件的基本知识
- JQuery结合CSS操作打印样式的方法
- jquery的trigger和triggerHandler的区别示例介绍
- 使用jQuery重置(reset)表单的方法
- Jquery跳到页面指定位置的方法
- jquery操作checked属性以及disabled属性的多种方法
- JQuery使用attr方法实现下拉列表选中
- jquery中append()与appendto()用法分析
- jquery的clone方法应用于textarea和select的bug修复
- jQuery获取选中内容及设置元素属性的方法
- jQuery中last()方法用法实例
- jquery中one()方法的用法实例
- JavaScript用JQuery呼叫Server端方法示例代码