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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
原生JS实现天气预报
Jun 16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php把数组值转换成键的方法
2015/07/13 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python更改已存在excel文件的方法
2018/05/03 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python django生成迁移文件的实例
2019/08/31 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
基于python实现地址和经纬度转换
2020/05/19 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
消防器材管理制度
2014/01/28 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
JS setTimeout与setInterval的区别
2022/04/20 Javascript