jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드
.wrap()
.wrap()은 선택한 요소를 원하는 태그로 감쌉니다.
문법
.wrap( wrappingElement )
예를 들어
$( 'p' ).wrap( '<div></div>' );
는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다.
$( 'p' ).wrap( '<div id="ab" class="cd"></div>' );
여러 태그로 감쌀 수도 있습니다.
$( 'p' ).wrap( '<div><strong></strong></div>' );
예제
클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다.
<!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>
$( document ).ready( function() {
$( 'p.a' ).wrap( $( '<blockquote></blockquote>' ) );
} );
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<p>Hello World!</p>
<p class="a">Goodbye World!</p>
</body>
</html>
참고
- 여러 요소를 한번에 감쌀 때는 .wrapAll()을 사용합니다.
- 선택한 요소의 상위 태그를 제거할 때는 .unwrap()을 사용합니다.
Related Posts
jQuery / Method / .submit() - 폼 전송 이벤트
.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다. select 선택 시 바로 폼 전송 select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다. <!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> ...
jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드
.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드
.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자
:empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다. 문법 $( ':empty' ) 예를 들어 $( 'div:empty' ) 는 div 요소 중 내용이 없는 것을 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...
jQuery / 동적 셀렉트(select) 만드는 방법
앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...
jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드
.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!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 / 스크롤해도 상단에 고정되는 메뉴 만들기
상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...
jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드
.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
jQuery / input 값 변화 감지하기 / change, keyup
input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
jQuery / .ajax() / 동기식으로 사용하는 방법
Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...