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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
javascript实现点击产生随机图形
Jan 25 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
关于python字符串方法分类详解
2019/08/20 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
2014年新生军训方案
2014/05/01 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
企业标语口号
2014/06/10 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
房地产端午节活动方案
2014/08/24 职场文书
纪检监察立案决定书
2015/06/24 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
导游词之桂林
2019/08/20 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android