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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Exjs 入门篇
Apr 07 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
js有关元素内容操作小结
Dec 20 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
ES6之模版字符串的具体使用
May 17 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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/06/17 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python字符串中的单双引
2017/02/16 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python操作excel让工作自动化
2019/08/09 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
如何获得EntityManager
2014/02/09 面试题
幼儿园中班教学反思
2014/02/10 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
感恩父母主题班会
2015/08/12 职场文书
《秋思》教学反思
2016/02/23 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android