Detaillierte Erläuterung der Methoden replaceAll(),replaceWith() von jquery-js-Tutorial-php.cn

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 )

Nach dem Login kopieren

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>

Nach dem Login kopieren

replaceAll()Bitte beachten < Der Unterschied zwischen 🎜> 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

< Die Funktion 🎜>

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

<br/>

Nach dem Login kopieren

Diese Funktion gehört zum

-Objekt (Instanz). jQuery

<br/>

Nach dem Login kopieren

Syntax

<br/>

Nach dem Login kopieren

jQuery

1.2 Diese Funktion wurde hinzugefügt.

<br/>

Nach dem Login kopieren

jQueryObject.replaceWith( replacement )

Nach dem Login kopieren

<br/>

Nach dem Login kopieren

Parameter

Beschreibung

replacement

<br/>

Nach dem Login kopieren

Der Typ „String/Element/jQuery/Function“ wird für Ersatzelemente verwendet.

参数	描述
replacement	String/Element/jQuery/Function类型用于替代的元素。

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Rückgabewert

<br/>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

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

Nach dem Login kopieren

Beispiel und Beschreibung

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

段落文本1
<br/>段落文本2
<br/><br/> type="text/javascript"><br/>$("p").replaceWith( '' ); <br/><br/><br/><br/><br/>

Nach dem Login kopieren

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

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元素 )

Nach dem Login kopieren

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

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

Nach dem Login kopieren

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

// 将所有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/>} );

Nach dem Login kopieren

<br/>

Nach dem Login kopieren

Führen Sie den Code aus

<br/>

Nach dem Login kopieren

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

<br/>

Nach dem Login kopieren

 class="thread-1"><br/>     class="new">替代元素    <br/>
<br/> class="thread-2"><br/>    <br/>     class="new">替代元素<br/>
<br/> id="n4">[label#n4]

Nach dem Login kopieren

<br/><br/>

Nach dem Login kopieren

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!