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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jquery图片切换实例分析
Apr 15 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue实现组件之间传值功能示例
Jul 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常用数学函数汇总
2014/11/21 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python获取邮件地址的方法
2015/07/10 Python
一张图带我们入门Python基础教程
2017/02/05 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python包的导入方式总结
2021/03/02 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
企业统计员岗位职责
2013/12/13 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
期末自我鉴定
2014/02/02 职场文书
高一数学教学反思
2014/02/07 职场文书
记帐员岗位责任制
2014/02/08 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
三年级学生评语
2014/04/23 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
银行给客户的感谢信
2015/01/23 职场文书
民主评议党员个人总结
2015/02/13 职场文书
辩护词格式
2015/05/22 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python