Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Methoden replaceAll(),replaceWith() von jquery

Detaillierte Erläuterung der Methoden replaceAll(),replaceWith() von jquery

巴扎黑
巴扎黑Original
2017-06-24 14:32:232006Durchsuche

Mit der Funktion

replaceAll() werden alle Zielelemente durch das aktuell passende Element ersetzt.

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

Syntax

jQuery 1.2 Diese Funktion wurde hinzugefügt.

jQueryObject.replaceAll( target )

Parameter

Parameter Beschreibung
target
参数 描述
target String/Element/jQuery/Array类型被替换的目标元素,这些元素将被当前匹配元素替换掉。
Zielelement vom Typ String/Element/jQuery/Array, das ersetzt werden soll. Diese Elemente werden durch das aktuell passende Element ersetzt.

targetWenn der Parameter ein String ist, wird er als jQuery-Selektor behandelt.

Rückgabewert

replaceAll()Der Rückgabewert der Funktion ist der jQuery-Typ und gibt ein jQuery-Objekt zurück, das das darstellt Ersatzinhalt.

Alle Daten und Ereignishandler

, die mit dem ersetzten Knoten verknüpft sind, werden ebenfalls entfernt.

Hinweis: Wenn ein Element, das mit dem aktuellen jQuery-Objekt übereinstimmt, ein Element auf der Seite ist, verschwindet das Element von seiner ursprünglichen Position, was einem -Verschiebevorgang und nicht einer Kopie entspricht arbeiten.

Beispiel & Beschreibung

replaceAll()

Die Funktion wird verwendet, um alle Zielelemente durch das aktuell passende Element zu ersetzen:
<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="//m.sbmmt.com/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<em></em>&#39;<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> <span class="str">"p"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="com">// 其返回值就是匹配替换内容(两个&#39;<em></em>&#39;)的jQuery对象<span class="pln"><br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><em></em><span class="pln"><br/><span class="tag"><em></em></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

replaceAll()Bitte beachten und der Funktion replaceWith():

<span class="kwd">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 将$B替换成$A<span class="pln"><br/>$A<span class="pun">.<span class="pln">replaceAll<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )<span class="pln"><br/><span class="com">// 将$A替换成$B<span class="pln"><br/>$A<span class="pun">.<span class="pln">replaceWith<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Bitte beachten Sie den folgenden HTML-Code (ursprünglicher HTML-Code):

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">foo<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">bar<span class="tag"></span><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Der folgende jQuery-Beispielcode wird verwendet Demonstrieren Sie die spezifische Verwendung der Funktion replaceAll():

<span class="com">// 用em元素替换掉所有的span元素<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<em class="new">替代元素</em>&#39;<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> <span class="str">"span"<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 用n4替换掉n6<span class="pln"><br/><span class="com">// n4将从原位置上消失(替换到n6的位置)<span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">replaceAll<span class="pun">(<span class="pln"> $<span class="pun">(<span class="str">"#n6"<span class="pun">)<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Führen Sie den Code aus

Das Folgende ist der HTML-Inhalt nach der Ausführung des jQuery-Codes (das Format wurde in keinem Fall angepasst). Methode):

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><em<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"new"<span class="tag">><span class="pln">替代元素<span class="tag"></em><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <br/>    <span class="tag"><em<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"new"<span class="tag">><span class="pln">替代元素<span class="tag"></em><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><br/><br/><strong><span style="font-size: 18pt;"><span style="color: #ff0000;">二:replaceWith()</span><br/></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

wird verwendet, um replaceWith()jedes passende Element durch das angegebene Element zu ersetzen.

<br/>
Diese Funktion gehört zum

-Objekt (Instanz). jQuery

<br/>
Syntax

<br/>
jQuery

1.2 Diese Funktion wurde hinzugefügt.

<br/>
jQueryObject.replaceWith( replacement )
<br/>
Parameter

Parameter Beschreibung
replacement
<br/>
Der Typ „String/Element/jQuery/Function“ wird für Ersatzelemente verwendet.
参数 描述
replacement String/Element/jQuery/Function类型用于替代的元素。
<br/>

Wenn der Parameter replacement eine Zeichenfolge ist, wird er als HTML-Zeichenfolge behandelt.

<br/>

jQuery 1.4 Neue Unterstützung: Parameter replacement kann eine -Funktion sein. replaceWith() durchläuft diese Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und this in der Funktion zeigt auf das entsprechende DOM-Element.

<br/>

replaceWith() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des aktuellen Elements im Matching element, der zweite Parameter ist der aktuelle interne HTML-Inhalt (innerHTML) des Elements. Der Rückgabewert der Funktion ist der zum Ersetzen verwendete Inhalt (kann ein HTML-String, ein DOM-Element oder ein jQuery-Objekt sein).

<br/>

Rückgabewert

<br/>

replaceWith()Der Rückgabewert der Funktion ist der jQuery-Typ, gibt das aktuelle jQuery-Objekt selbst zurück ( obwohl es mit dem Element übereinstimmt, wurde es aus dem Dokument entfernt).

<br/>

Alle mit dem ersetzten Knoten verknüpften Daten und Ereignishandler werden ebenfalls entfernt.

<br/>

Hinweis: Wenn das replacement-Element ein Element auf der aktuellen Seite ist, verschwindet das Element von seiner ursprünglichen Position. Dies entspricht einem -Verschiebevorgang, nicht einem Kopiervorgang.

<br/>

Beispiel und Beschreibung

<br/>

replaceWith()Die Funktion wird verwendet, um ein angegebenes Element außerhalb des gesamten Inhalts jedes übereinstimmenden Elements einzuschließen:

<br/>

段落文本1

<br/>

段落文本2

<br/><br/> type="text/javascript"><br/>$("p").replaceWith( '' ); <br/><br/><br/><br/><br/>
<br/>

Bitte beachten Sie den Unterschied zwischen den Funktionen replaceWith() und replaceAll():

<br/>
var $A = $("s1");<br/>var $B = $("s2");<br/><br/><br/>// 将$A替换成$B<br/>$A.replaceWith( $B ); // 返回$A<br/>// 将$B替换成$A<br/>$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )
<br/>

Bitte beachten Sie den folgenden HTML-Code ( Ursprünglicher HTML-Code):

<br/>
<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">foo<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">[label#n4]<span class="tag"></label><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">bar<span class="tag"></span><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<br/>

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung der replaceWith()-Funktion zu demonstrieren:

<br/>
// 将所有span元素替换为指定的em元素<br/>$("span").replaceWith( '替代元素' );<br/><br/>// 将n6替换为n4<br/>// n4将从原位置上消失<br/>$("#n6").replaceWith( $("#n4") );<br/><br/>// 将所有p元素替换为p元素<br/>$("p").replaceWith( function(i, innerHTML){<br/>    return '

+ (i + 1) + '">' + innerHTML + '

'; <br/>} );
<br/>

Führen Sie den Code aus

<br/>

Das Folgende ist der HTML-Inhalt nach der Ausführung des jQuery-Codes (das Format wurde in keiner Weise angepasst):

<br/>
 class="thread-1"><br/>     class="new">替代元素    <br/>

<br/> class="thread-2"><br/> <br/> class="new">替代元素<br/>

<br/> id="n4">[label#n4]
<br/><br/>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden replaceAll(),replaceWith() von jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn