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()을 사용합니다.
jQuery / Reference / .remove()
개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...
개요 .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 / .toggleClass()
개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .removeAttr()
개요 .removeAttr()은 선택한 요소의 특정 속성을 제거합니다. 문법 .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거합니다. $( 'h1' ).removeAttr( 'title' ); 예제 버튼을 클릭하면 input 요소의 placeholder 속성을 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
개요 .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> ...
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
개요 .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 다음은 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. $( 'ul' ).add( 'p' ) 예제 1 li 요소를 선택하고, 추가로 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> ...
개요 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 - 속성의 값 가져오기 .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져옵니다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. $( 'h1' ).attr( 'title', 'Hello' ); 예제 1 ...
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 { ...