快捷導(dǎo)航

jQuery中detach()方法用法實(shí)例

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

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

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

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

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

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

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

$(selector).detach(expr)

參數(shù)列表:

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

實(shí)例代碼:

實(shí)例一：

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.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">歡迎來(lái)到腳本之家</div> 

  <div>腳本之家歡迎您</div> 

  <button>點(diǎn)擊查看效果</button> 

</body> 

</html>

以上代碼能夠刪除div集合中id值為first的div。

實(shí)例二:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.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">歡迎來(lái)到腳本之家</div>

<div>腳本之家歡迎您</div>

<button>點(diǎn)擊查看效果</button>

</body>

</html>

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

實(shí)例三:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.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">歡迎來(lái)到腳本之家</div> 

  <div id="second">腳本之家歡迎您</div> 

  <button id="btd">刪除div效果</button>

  <button id="btn">查看刪除操作后div的數(shù)量</button> 

</body> 

</html>