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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
js document.write()使用介绍
Feb 21 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
iView框架问题整理小结
Oct 16 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
PHP实现的json类实例
2015/07/28 PHP
php生成二维码
2015/08/10 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP加密技术的简单实现
2016/09/04 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python tornado修改log输出方式
2019/11/18 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
采购员岗位职责
2013/11/15 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
违反学校规定检讨书
2014/01/18 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
大专生求职信
2014/06/29 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014企业年终工作总结
2014/12/23 职场文书
置业顾问岗位职责
2015/02/09 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书