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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
JavaScript获取URL参数的方法分享
Apr 07 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript基本类型详解
2014/11/28 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
Vue渲染函数详解
2017/09/15 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
电子商务专业求职信
2014/03/08 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
表扬稿范文
2015/01/17 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
党纪处分决定书
2015/06/24 职场文书
小学教师教学随笔
2015/08/14 职场文书
新课程改革心得体会
2016/01/22 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang