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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
详解 微信小程序开发框架(MINA)
May 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python实现带百分比的进度条
2016/06/28 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
工程概预算专业毕业生求职信
2013/10/04 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
日语系毕业求职信
2014/07/27 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
人民检察院起诉书
2015/05/20 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang