Explication détaillée des méthodes replaceAll(),replaceWith() de jquery

La fonction

replaceAll() est utilisée pour remplacer tous les éléments cibles par l'élément correspondant actuel.

Cette fonction appartient à l'objet jQuery (instance).

Syntaxe

jQuery 1.2 Ajout de cette fonction.

jQueryObject.replaceAll( target )

Paramètres

Paramètre

Description

cible

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

Élément cible de type String/Element/jQuery/Array à remplacer, ces éléments seront remplacés par l'élément correspondant actuel.

targetSi le paramètre est une chaîne, il est traité comme un sélecteur jQuery.

Valeur de retour

replaceAll()La valeur de retour de la fonction est de type jQuery, et renvoie un objet jQuery représentant le contenu de remplacement.

Toutes les données et gestionnaires d'événements

associés au nœud remplacé seront également supprimés.

Remarque : Si un élément correspondant à l'objet jQuery actuel est un élément sur la page, l'élément disparaîtra de sa position d'origine, ce qui équivaut à une opération de déplacement, pas à une copie fonctionner.

Exemple et description

replaceAll()

La fonction est utilisée pour remplacer tous les éléments cibles par l'élément correspondant actuel :

<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="http://www.php.cn/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()Veuillez noter et la fonction 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>

Veuillez vous référer au code HTML suivant (code HTML d'origine) :

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

L'exemple de code jQuery suivant est utilisé Démontrer l'utilisation spécifique de la fonction 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>

Exécuter le code

Ce qui suit est le contenu html après l'exécution du code jQuery (le format n'a été ajusté dans aucun manière) :

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

est utilisée pour replaceWith()remplacer chaque élément correspondant par l'élément spécifié.

<br/>

Cette fonction appartient à l'objet

(instance). jQuery

<br/>

Syntaxe

<br/>

jQuery

1.2 Ajout de cette fonction.

<br/>

jQueryObject.replaceWith( replacement )

<br/>

Paramètres

Paramètre

Description

remplacement

<br/>

Le type String/Element/jQuery/Function est utilisé pour les éléments de remplacement.

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

<br/>

Si le paramètre replacement est une chaîne, il sera traité comme une chaîne html.

<br/>

jQuery 1.4 Nouveau support : le paramètre replacement peut être une fonction . replaceWith() parcourra et exécutera cette fonction en fonction de tous les éléments correspondants, et le this dans la fonction pointera vers l'élément DOM correspondant.

<br/>

replaceWith() passera également en deux paramètres à la fonction : le premier paramètre est l' index de l'élément courant dans le matching element , le deuxième paramètre est le contenu HTML interne actuel (innerHTML) de l'élément. La valeur de retour de la fonction est le contenu utilisé pour le remplacement (peut être une chaîne HTML, un élément DOM ou un objet jQuery).

<br/>

Valeur de retour

<br/>

replaceWith()La valeur de retour de la fonction est le type jQuery, renvoie l'objet jQuery actuel lui-même ( bien qu'il corresponde à l'élément qui a été supprimé du document).

<br/>

Tous les gestionnaires de données et d'événements associés au nœud remplacé seront également supprimés.

<br/>

Remarque : Si l'élément replacement est un élément de la page actuelle, l'élément disparaîtra de sa position d'origine. Cela équivaut à une opération de déplacement , pas à une opération de copie.

<br/>

Exemple et description

<br/>

replaceWith()La fonction est utilisée pour envelopper un élément spécifié en dehors de tout le contenu de chaque élément correspondant :

<br/>

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

<br/>

Veuillez noter la différence entre les fonctions replaceWith() et 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/>

Veuillez vous référer au code HTML suivant ( Code HTML original) :

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

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction replaceWith() :

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

Exécuter le code

<br/>

Ce qui suit est le contenu html après l'exécution du code jQuery (le format n'a en aucun cas été ajusté) :

<br/>

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

<br/><br/>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!