Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse der Methode replaceAll() in jQuery

黄舟
Freigeben: 2017-12-05 09:36:25
Original
1501 Leute haben es durchsucht

Viele Freunde verstehen möglicherweise nicht, was „replaceAll“ bedeutet, wenn sie den Titel sehen. Die Funktion „replaceAll()“ wird verwendet, um alle Zielelemente durch das aktuell passende Element zu ersetzen. Heute stellen wir Ihnen jQuery „replaceAll(“ ausführlich vor. )-Methode in !

Die Funktion „replaceAll()“ wird verwendet, um alle Zielelemente durch das aktuell passende Element zu ersetzen.

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

Syntax

jQuery 1.2 hat diese Funktion hinzugefügt.

jQueryObject.replaceAll( target )

parameter

参数 描述
target String/Element/jQuery/Array类型被替换的目标元素,这些元素将被当前匹配元素替换掉。

Wenn das Parameterziel string ist, wird es als jQuery behandelt Wähler.

Rückgabewert

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

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. Dies entspricht einem Verschiebungsvorgang, nicht einem Kopiervorgang.

Beispiel und Beschreibung

Die Funktion „replaceAll()“ wird verwendet, um alle Zielelemente durch das aktuell passende Element zu ersetzen:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$(&#39;<em></em>&#39;).replaceAll( "p" );
// 其返回值就是匹配替换内容(两个&#39;<em></em>&#39;)的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->
<em></em>
<em></em>
Nach dem Login kopieren

Bitte beachten Sie „replaceAll()“ und „replaceWith(“ ) Der Unterschied zwischen Funktionen:

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

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

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
<div id="n6"></div>
Nach dem Login kopieren

Der folgende jQuery-Beispielcode wird verwendet, um replaceAll() zu demonstrieren Funktion Spezifische Verwendung:

// 用em元素替换掉所有的span元素
$(&#39;<em class="new">替代元素</em>&#39;).replaceAll( "span" );
// 用n4替换掉n6
// n4将从原位置上消失(替换到n6的位置)
$("#n4").replaceAll( $("#n6") );
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 nicht angepasst):

<p id="n1">    
<em class="new">替代元素</em>    
</p><p id="n3">        
<em class="new">替代元素</em>
</p>
<label id="n4">[label#n4]</label>
Nach dem Login kopieren

Zusammenfassung:

Durch das detaillierte Studium dieses Artikels glaube ich, dass viele Freunde ein gewisses Verständnis und Verständnis für die Methode replaceAll () in jQuery haben. Ich hoffe, es wird für Ihre Arbeit hilfreich sein!

Verwandte Empfehlungen:

Detaillierte Erläuterung der jQuery.replaceAll()-Funktionsbeispiele

Verwenden Sie „replace“ in Kombination mit regulären Ausdrücken in JavaScript, um den Effekt von „replaceAll“ zu erzielen

Detaillierte Erklärung von js replace und replacementall Instanzverwendung

JS verwendet reguläre Ausdrücke, um die Ersetzungsmethode „ReplaceAll“ zu implementieren

Das obige ist der detaillierte Inhalt vonBeispielanalyse der Methode replaceAll() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage