jQuery中detach()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中detach()方法用法。分享给大家供大家参考。具体分析如下:

此方法从DOM中删除所有匹配的元素。

说明:detach()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

语法结构:

$(selector).detach(expr)

参数列表:

参数 描述
expr 可选。用于筛选被删除元素的jQuery表达式。
实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript">  

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").detach("#first"); 

  }); 

}) 

</script>  

</head> 

<body> 

  <div id="first">欢迎来到三水点靠木</div> 

  <div>三水点靠木欢迎您</div> 

  <button>点击查看效果</button> 

</body> 

</html>

以上代码能够删除div集合中id值为first的div。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">  

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").detach(); 

  }); 

}) 

</script>

</head>

<body>

<div id="first">欢迎来到三水点靠木</div>

<div>三水点靠木欢迎您</div>

<button>点击查看效果</button>

</body>

</html>

如果方法没有参数,那么将会删除所有匹配元素。

实例三:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript">  

$(document).ready(function(){ 

  $("#btd").click(function(){ 

    var a=$("div"); 

    a.detach("#first"); 

    $("#btn").click(function(){ 

      alert(a.length); 

    }); 

  }); 

}) 

</script>  

</head> 

<body> 

  <div id="first">欢迎来到三水点靠木</div> 

  <div id="second">三水点靠木欢迎您</div> 

  <button id="btd">删除div效果</button>

  <button id="btn">查看删除操作后div的数量</button> 

</body> 

</html>

以上代码的运行结果可以看出,此方法并没有将div从jquery对象中删除。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
BootStrap selectpicker
Jun 20 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
jQuery中remove()方法用法实例
Dec 25 #Javascript
jQuery中replaceWith()方法用法实例
Dec 25 #Javascript
jQuery中before()方法用法实例
Dec 25 #Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 #Javascript
jQuery中after()方法用法实例
Dec 25 #Javascript
jQuery中prepend()方法用法实例
Dec 25 #Javascript
jQuery中append()方法用法实例
Dec 25 #Javascript
You might like
php获取twitter最新消息的方法
2015/04/14 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python 文件操作实现代码
2009/10/07 Python
python分割文件的常用方法
2014/11/01 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
django 环境变量配置过程详解
2019/08/06 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python自动化操作实现图例绘制
2020/07/09 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
中科软笔试题和面试题
2014/10/07 面试题
仓库组长岗位职责
2014/01/29 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
小学教师年度个人总结
2015/02/05 职场文书
毕业论文致谢范文
2015/05/14 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书