Detaillierte Erläuterung der Verwendung der jQuery.detach()-Funktion

Die Funktion detach() wird verwendet, um übereinstimmende Elemente aus dem Dokument zu entfernen.

Sie können Selektoren auch verwenden, um den Umfang der Entfernung weiter einzuschränken und nur einige der aktuell übereinstimmenden Elemente zu entfernen, die mit dem angegebenen Selektor übereinstimmen.

Im Vergleich zu „remove()“ entfernt die Funktion „detach()“ keine zusätzlichen Daten (Funktion „data()“), die mit dem Element und dem Ereignishandler usw. verknüpft sind (remove() wird entfernt). ).

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

jQueryObject.detach( [ selector ] )

Parameter

Parameterbeschreibung

Selektor Selektor, angegeben durch optional/String-Typ String, wird zum Filtern verwendet Elemente, die diesem Selektor entsprechen.

Wenn der Selektorparameter nicht angegeben ist, werden alle Elemente im aktuell übereinstimmenden Element entfernt.

Rückgabewert

detach()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Die Funktion detach() wird verwendet, um passende Elemente aus dem Dokument zu entfernen:

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

Der folgende jQuery-Beispielcode wird verwendet, um das Trennen zu demonstrieren ()-Funktion Die spezifische Verwendung:

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" );

Der vollständige HTML-Code nach der Ausführung des obigen Codes lautet wie folgt (das Format wurde in keiner Weise angepasst):

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

Die Funktion detach() entfernt übereinstimmende Elemente aus dem Dokumentelement, entfernt jedoch nicht das übereinstimmende Element aus dem jQuery-Objekt, und detach() behält die zusätzlichen Daten und gebundenen Ereignisse bei, die mit dem Element verknüpft sind.

Bitte beachten Sie den folgenden HTML-Code:

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

Als nächstes registrieren wir Klickereignisse für alle Schaltflächen, entfernen dann Element n3 und hängen dann das entfernte n3 an n1 an. Interne Endposition:

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.detach()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!