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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
RequireJS使用注意细节
May 15 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 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 上传文件大小限制
2009/07/05 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python实现控制台打印的方法
2019/01/12 Python
pow在python中的含义及用法
2019/07/11 Python
详解Python3定时器任务代码
2019/09/23 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Python处理PDF与CDF实例
2020/02/26 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
个人找工作自荐信格式
2013/09/21 职场文书
《满井游记》教学反思
2014/02/26 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript