jquery 래핑 노드 방법-프런트엔드 Q&A-php.cn

1.wrapAll 메소드

2.wrapInner 메서드

3. unwrap 방법

집

웹 프론트엔드

프런트엔드 Q&A

jquery 래핑 노드 방법

王林

May 23, 2023 pm 08:45 PM

jQuery는 DOM을 조작하는 간단하고 강력한 방법을 제공하는 인기 있는 JavaScript 라이브러리입니다. jQuery에는 대상 요소를 새 상위 요소로 래핑하는 랩 노드 메소드라는 함수가 있습니다.

래핑 노드 메서드의 구문은 다음과 같습니다.

$(selector).wrap(wrappingElement);

로그인 후 복사

매개변수 선택기는 래핑할 대상 요소를 나타내는 표준 CSS 선택기입니다. 매개변수 WrappingElement는 문자열, 함수 또는 jQuery 개체를 나타냅니다. 대상 요소를 래핑하는 데 사용할 새 부모 요소입니다.

이 메소드를 실행하면 대상 요소가 새 상위 요소로 래핑됩니다. WrappingElement 매개변수가 함수인 경우 래핑할 새 상위 요소를 반환해야 합니다.

다음은 p 요소를 div 요소 안에 래핑하는 실제 예입니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery包裹节点方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>这是一个段落</p>
    <script>
    $( "p" ).wrap( "<div></div>" );
    </script>
</body>
</html>

로그인 후 복사

이 예에서는 p 요소를 선택하고 새 div 요소에 래핑합니다. 위의 코드를 실행하고 브라우저에서 HTML 코드를 보면 p 요소가 div 요소로 래핑된 것을 볼 수 있습니다.

wrap 메소드 외에도 jQuery는 여러 가지 관련 메소드도 제공합니다:

1.wrapAll 메소드

이 메소드는 단일 상위 요소에 요소를 래핑합니다.

구문은 다음과 같습니다.

$(selector).wrapAll(wrappingElement);

로그인 후 복사

파라미터는 Wrap 메소드와 동일하며, WrappingElement는 래핑할 상위 요소를 나타냅니다.

2.wrapInner 메서드

이 메서드는 선택한 요소의 내용을 새 요소로 래핑합니다.

구문은 다음과 같습니다.

$(selector).wrapInner(wrappingElement);

로그인 후 복사

WrappingElement 매개변수는 생성할 래핑 요소를 나타냅니다.

3. unwrap 방법

이 방법은 선택한 요소의 상위 요소를 제거하여 문서에서 선택한 요소의 실제 위치를 표시하는 데 사용됩니다.

구문은 다음과 같습니다.

$(selector).unwrap();

로그인 후 복사

예:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery包裹节点方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <p>这是一个段落</p>
    </div>
    <script>
    $( "p" ).unwrap();
    </script>
</body>
</html>

로그인 후 복사

이 예에서는 p 요소가 포함된 div 요소를 선택하고 p 요소에 대해 unwrap 메서드를 실행합니다. 코드를 실행하면 원래 p 요소가 포함된 div 요소만 HTML 문서에 남습니다.

래핑된 노드 메서드는 jQuery에서 매우 유용한 메서드로, 이를 통해 요소를 새 상위 요소에 쉽게 넣어 재사용 가능한 HTML 모듈을 만들 수 있습니다. Wrap 메서드를 사용하면 코드의 가독성과 유지 관리성이 크게 향상되고 HTML 문서를 더 깔끔하고 이해하기 쉽게 만들 수 있습니다.

위 내용은 jquery 래핑 노드 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.