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中对于DOM的加强
Apr 11 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue内置指令详解
Apr 03 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
JS window对象简单操作完整示例
Jan 14 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)
2013/06/21 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
js常用函数 不错
2006/09/08 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python装饰器用法实例总结
2018/05/26 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python如何输出百分比
2020/07/31 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
银行领导证婚词
2014/01/11 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
亲子活动总结
2014/04/26 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
Docker安装MySql8并远程访问的实现
2022/07/07 Servers