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 相关文章推荐
jQuery 事件的命名空间简单了解
Nov 22 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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生成UTF8文件的方法
2010/05/15 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php可变长参数处理函数详解
2017/02/22 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
对Python 语音识别框架详解
2018/12/24 Python
Python字节单位转换实例
2019/12/05 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
关于元旦的广播稿
2014/02/16 职场文书
产品设计开发计划书
2014/05/07 职场文书
志愿者活动总结报告
2014/06/27 职场文书
国庆节活动总结
2014/08/26 职场文书
2014年保洁工作总结
2014/11/24 职场文书
投标承诺函范文
2015/01/21 职场文书
亮剑观后感500字
2015/06/05 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers