Rumah > hujung hadapan web > tutorial js > jQuery.detach() 函数用法详解

jQuery.detach() 函数用法详解

巴扎黑
Lepaskan: 2017-06-25 09:56:35
asal
2998 orang telah melayarinya

detach()函数用于从文档中移除匹配的元素。

你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素。

与remove()相比,detach()函数不会移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(remove()会移除)。

该函数属于jQuery对象(实例)。

语法

jQueryObject.detach( [ selector ] )
Salin selepas log masuk

参数

参数 描述

selector 可选/String类型指定的选择器字符串,用于筛选符合该选择器的元素。

如果没有指定selector参数,则移除当前匹配元素中的所有元素。

返回值

detach()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

detach()函数用于从文档中移除匹配的元素:

<p>段落文本1<span>item1<i>line2<i></span></p>
<p>段落文本2<span>item2<i>line2<i></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$("span").detach( );
</script>
<!--以下是jQuery代码执行后的html内容-->
<p>段落文本1</p>
<p>段落文本2</p>
以下面这段HTML代码为例:
<p id="n1" class="mark">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3" class="mark">
    <label id="n4" class="move">[label#n4]</label>
</p>
<p id="n5">
    段落内容
    <span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>    
</p>
Salin selepas log masuk

以下jQuery示例代码用于演示detach()函数的具体用法:

var $n6 = $("#n6");
// 移除n6元素
$n6.detach( );
var $p = $("p");
// 移除带有类名"mark"的p元素
var $detachedP = $p.detach( ".mark" ); // $detachedP === $
// 将移除了的n6追加到body元素内的起始位置
// 虽然在前面n6已经从文档中被移除
// 但不会将其从jQuery对象中移除,因此我们还可以使用该jQuery对象,将n6再次放入文档中
$n6.prependTo( "body" );
Salin selepas log masuk

上述代码执行后的完整html代码如下(格式未作任何调整):

<span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>
<p id="n5">
    段落内容        
</p>
Salin selepas log masuk

detach()函数会移除文档中匹配的元素,但不会将匹配元素从jQuery对象中移除,而且detach()会保留元素所关联的附加数据和绑定事件等。

请参考下面这段HTML代码:

<p id="n1">
    <input id="n2" type="button" value="按钮1" />
    <input id="n3" type="button" value="按钮2" /> 
</p>
Salin selepas log masuk

接着,我们为所有的按钮注册点击事件,然后移除元素n3,再将移除的n3重新追加到n1内部的末尾位置:

var $n3 = $("#n3");
$n3.data("myX", "附加数据");
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息:按钮2
// 移除元素n3
$n3.detach();
// 移除之后,仍然可以获取附加数据并触发点击事件
// document.writeln( $n3.data("myX") ); // 附加数据
// $n3.trigger("click"); // 弹出提示框信息:按钮2
// 将n3重新追加到n1内部的末尾
$n3.appendTo("#n1");
// 此时,n3的附加数据和绑定的点击事件仍然存在
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息:按钮2
Salin selepas log masuk

Atas ialah kandungan terperinci jQuery.detach() 函数用法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan