jQuery / Reference / .wrapAll()
개요
- .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다.
문법
.wrapAll( wrappingElement )
- 예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다.
$( 'p' ).wrap( '<div></div>' );
예제 1
- .wrap()은 선택한 요소에 각각 적용됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready( function() {
$( 'p' ).wrap( '<div></div>' );
} );
</script>
</head>
<body>
<p>Lorem ipsum dolor.</p>
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor.</p>
</body>
</html>
- 즉, 다음처럼 만듭니다.
<div> <p>Lorem ipsum dolor.</p> </div> <h3>Lorem ipsum dolor.</h3> <div> <p>Lorem ipsum dolor.</p> </div>
- .wrapAll()은 선택한 요소를 모아서 하나의 태그로 둘러쌉니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready( function() {
$( 'p' ).wrapAll( '<div></div>' );
} );
</script>
</head>
<body>
<p>Lorem ipsum dolor.</p>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor.</p>
</body>
</html>
- 즉, 다음처럼 만듭니다.
<div> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum dolor.</p> </div> <h3>Lorem ipsum dolor.</h3>
예제 2
- .wrapAll()은 하위 요소 모두를 새로운 태그로 감쌀 때 유용하게 사용할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.red {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready( function() {
$( '.wa' ).contents().wrapAll( '<div class="red"></div>' );
} );
</script>
</head>
<body>
<div class="wa">
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
</div>
</body>
</html>
- 즉, 다음처럼 만듭니다.
<div class="wa">
<div class="red">
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
</div>
</div>
참고
- 선택한 요소의 상위 태그를 제거할 때는 .unwrap()을 사용합니다.
개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .after( content ) 예제 1 h1 요소 뒤에 Hello World!를 내용으로 갖는 p 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...
jQuery / Reference / :contains()
:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.
개요 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 - 속성의 값 가져오기 .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져옵니다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. $( 'h1' ).attr( 'title', 'Hello' ); 예제 1 ...
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...