jquery의 replacementAll(),replaceWith() 메소드에 대한 자세한 설명

replaceAll() 함수는 모든 대상 요소를 현재 일치하는 요소로 바꾸는 데 사용됩니다.
replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素。

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

jQueryObject.replaceAll( target )

参数

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

如果参数target为字符串，则将其视作jQuery选择器。

返回值

replaceAll()函数的返回值为jQuery类型，返回表示替换内容的jQuery对象。

与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。

注意：如果当前jQuery对象匹配的某个元素是页面上的元素，则该元素将从原来位置上消失，这相当于一个移动操作，而不是一个复制操作。

示例&说明

replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素：

<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()和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>

请参考下面这段HTML代码(原HTML代码)：

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

以下jQuery示例代码，用于演示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>

运行代码

以下是jQuery代码执行后的html内容(格式未作任何调整)：

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

replaceWith()函数用于使用指定的元素替换每个匹配的元素。

<br/>

该函数属于jQuery对象(实例)。

<br/>

语法

<br/>

jQuery 1.2 新增该函数。

<br/>

jQueryObject.replaceWith( replacement )

<br/>

参数

<br/>

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

<br/>

如果参数replacement为字符串，则将其视作html字符串。

<br/>

jQuery 1.4 新增支持：参数replacement可以为函数。replaceWith()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。

<br/>

replaceWith()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是用于替换的内容(可以是html字符串、DOM元素、jQuery对象)。

<br/>

返回值

<br/>

replaceWith()函数的返回值为jQuery类型，返回当前jQuery对象本身(虽然其匹配的元素已从文档中被移除)。

<br/>

与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。

<br/>

注意：如果replacement元素是当前页面中的元素，则该元素将从原位置上消失。这相当于一个移动操作，而不是一个复制操作。

<br/>

示例&说明

<br/>

replaceWith()函数用于在每个匹配元素的所有内容外部包裹指定的元素：

<br/>

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

<br/>

请注意replaceWith()和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/>

请参考下面这段HTML代码(原HTML代码)：

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

以下jQuery示例代码，用于演示replaceWith()

이 함수는 jQuery 개체(인스턴스)에 속합니다.

구문

jQuery 1.2 이 기능을 추가했습니다.

<br/>

매개변수

매개변수	설명
target	String/Element/jQuery/Array 유형이 대상 요소로 대체되면 이러한 요소는 현재 일치하는 요소로 대체됩니다.

target 매개변수가 문자열인 경우 jQuery 선택기로 처리됩니다. 🎜

반환 값

🎜replaceAll()함수의 반환 값은 jQuery 유형이며, 는 대체 콘텐츠를 나타내는 jQuery 개체를 반환합니다. 🎜🎜교체된 노드 및 이벤트 처리와 관련된 모든 데이터 >장치도 동시에 제거됩니다. 🎜

참고: 현재 jQuery 개체와 일치하는 요소가 페이지의 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 이는 복사 작업이 아닌 이동 작업입니다. 🎜

예 및 설명

🎜replaceAll() 함수는 모든 대상 요소를 현재 일치하는 요소로 바꾸는 데 사용됩니다. 🎜

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

🎜참고replaceAll()과 replacementWith() 함수의 차이점: 🎜

<br/>

🎜다음 HTML 코드(원본 HTML 코드)를 참조하세요. 🎜

<br/>

🎜다음 jQuery 샘플 코드는 replaceAll을 설명하는 데 사용됩니다. () 함수의 구체적인 사용법: 🎜

<br/>

🎜코드 실행🎜🎜다음은 jQuery 코드 실행 후의 html 내용입니다(형식은 조정되지 않았습니다): 🎜

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

🎜replaceWith( ) 함수 일치하는 각 요소를 지정된 요소로 바꿉니다. 🎜

<br/><br/>

🎜이 함수는 jQuery 개체(인스턴스)에 속합니다. 🎜rrreee

구문

rrreee🎜jQuery 1.2 이 기능을 추가했습니다. 🎜rrreeerrreeerrreee

매개변수

rrreee

매개변수	설명
교체	교체된 요소에는 String/Element/jQuery/Function 유형이 사용됩니다.

rrreee🎜replacement 매개변수가 문자열인 경우 로 처리됩니다. HTML 문자열. 🎜rrreee🎜jQuery 1.4 새로운 지원: replacement 매개변수는 함수일 수 있습니다. replaceWith()는 일치하는 모든 요소를 ​​기반으로 이 함수를 순회하고 실행하며, 함수의 this는 해당 DOM 요소를 가리킵니다. 🎜rrreee🎜replaceWith()는 함수에 대한 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소의 현재 요소입니다. index, 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠(innerHTML)입니다. 함수의 반환 값은 교체에 사용되는 콘텐츠입니다(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음). 🎜rrreee

반환 값

rrreee🎜replaceWith()함수의 반환 값은 jQuery 유형, 현재 jQuery 개체 자체를 반환합니다(일치하는 요소가 문서에서 제거되었지만). 🎜rrreee🎜교체된 노드와 관련된 모든 데이터 및 이벤트 핸들러도 동시에 제거됩니다. 🎜rrreee

참고: 교체 요소가 현재 페이지의 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 이는 복사 작업이 아닌 이동 작업과 동일합니다. 🎜rrreee

예 및 설명

rrreee🎜replaceWith() 이 함수는 일치하는 각 요소의 모든 콘텐츠 외부에서 지정된 요소를 래핑하는 데 사용됩니다. 🎜 rrreeerrreeerrreee🎜replaceWith()와 replacementAll() 함수의 차이점에 유의하세요. 🎜rrreeerrreeerrreee🎜다음 HTML 코드(원본 HTML 코드)를 참조하세요. 🎜rrreeerrreeerrreee🎜다음 jQuery 샘플 코드는 replaceWith() 함수의 구체적인 사용법을 보여줍니다. 🎜rrreeerrreeerrreee🎜코드 실행🎜rrreee🎜다음은 jQuery 코드가 실행된 후의 html 콘텐츠입니다(형식은 조정되지 않았습니다):🎜rrreeerrreeerrreee

위 내용은 jquery의 replacementAll(),replaceWith() 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!