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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
个人找工作的自我评价
2013/10/17 职场文书
护士在校生自荐信
2014/02/01 职场文书
2014年团队工作总结
2014/11/24 职场文书
银行服务理念口号
2015/12/25 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript