jquery 래핑 노드 방법
- 王林원래의
- 2023-05-23 20:45:07700검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!