> 웹 프론트엔드 > JS 튜토리얼 > jQuery.replaceAll() 함수 예제에 대한 자세한 설명

jQuery.replaceAll() 함수 예제에 대한 자세한 설명

巴扎黑
풀어 주다: 2017-06-24 14:35:06
원래의
1531명이 탐색했습니다.

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

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

Syntax

jQuery 1.2에 이 기능이 추가되었습니다.

jQueryObject.replaceAll( target )

Parameters

Parameters

Description

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

매개변수 대상이 string인 경우 jQuery 선택기로 처리됩니다.

반환 값

replaceAll()함수의 반환 값은 jQuery 유형이며 대체 내용을 나타내는 jQuery 객체를 반환합니다.

교체된 노드와 관련된 모든 데이터 및 이벤트 핸들러도 제거됩니다.

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

예제 및 설명

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

<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>
로그인 후 복사

replaceAll()과 replacementWith() 함수의 차이점에 유의하세요.

var $A = $("s1");
var $B = $("s2");
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )
// 将$A替换成$B
$A.replaceWith( $B ); // 返回$A
로그인 후 복사

다음 단락을 참조하세요. HTML 코드(원본 HTML 코드):

<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>
로그인 후 복사

다음 jQuery 샘플 코드는 replacementAll() 함수의 구체적인 사용법을 보여주기 위해 사용됩니다.

// 用em元素替换掉所有的span元素
$(&#39;<em class="new">替代元素</em>&#39;).replaceAll( "span" );
// 用n4替换掉n6
// n4将从原位置上消失(替换到n6的位置)
$("#n4").replaceAll( $("#n6") );
로그인 후 복사

다음은 jQuery 코드가 실행된 후의 html 콘텐츠입니다(형식은 변경되지 않았습니다). 조정됨):

<p id="n1">
    <em class="new">替代元素</em>    
</p>
<p id="n3">
    
    <em class="new">替代元素</em>
</p>
<label id="n4">[label#n4]</label>
로그인 후 복사

위 내용은 jQuery.replaceAll() 함수 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿