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 onmouseout 解决办法
Jul 17 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
loading动画特效小结
Jan 22 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
微信小程序实用代码段(收藏版)
Dec 17 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学习之变量的使用
2011/05/29 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
微信小程序实现购物页面左右联动
2019/02/15 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
pandas实现选取特定索引的行
2018/04/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
SQL面试题
2013/12/09 面试题
社会学专业求职信
2014/02/24 职场文书
干部下基层实施方案
2014/03/14 职场文书
股权收购意向书
2014/04/01 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL