jQuery中detach()方法用法實例

更新時間：2014年12月25日 16:07:51 投稿：shichen2014

這篇文章主要介紹了jQuery中detach()方法用法,以不同實例形式分析了detach()方法刪除匹配元素的技巧,具有一定的參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery中detach()方法用法。分享給大家供大家參考。具體分析如下：

此方法從DOM中刪除所有匹配的元素。

說明:detach()方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素，與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。

語法結(jié)構(gòu):

復(fù)制代碼代碼如下:

$(selector).detach(expr)

參數(shù)列表:

參數(shù)	描述
expr	可選。用于篩選被刪除元素的jQuery表達式。

實例代碼:

實例一：

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<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。

實例二:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<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>

如果方法沒有參數(shù)，那么將會刪除所有匹配元素。

實例三:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<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的數(shù)量</button> 

</body> 

</html>