Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Methoden replaceAll(),replaceWith() von jquery
Mit der Funktion
replaceAll()
werden alle Zielelemente durch das aktuell passende Element ersetzt.
Diese Funktion gehört zum jQuery
-Objekt (Instanz).
jQuery 1.2 Diese Funktion wurde hinzugefügt.
jQueryObject.replaceAll( target )
Parameter | Beschreibung | ||||
---|---|---|---|---|---|
target |
|
target
Wenn der Parameter ein String ist, wird er als jQuery-Selektor behandelt. RückgabewertreplaceAll()
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 & BeschreibungreplaceAll()
<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">'<em></em>'<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">// 其返回值就是匹配替换内容(两个'<em></em>')的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">'<em class="new">替代元素</em>'<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.
|
<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/>
<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/>
<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/><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/>
<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!