jQuery / Reference / .slideUp()
개요
- .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.
문법
.slideUp( [duration ] [, easing ] [, complete ] )
duration
- 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
- fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.
easing
- 요소가 사라지는 방식을 정합니다.
- swing과 linear가 가능하며, 기본값은 swing입니다.
complete
- 요소가 사라진 후 수행할 작업을 정합니다.
예제 1
- 버튼을 클릭하면 파란색 배경의 div 요소가 위쪽으로 사라집니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { height: 100px; background-color: #bbdefb; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideUp();
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<div class="b"></div>
</body>
</html>
예제 2
- 사라지는 속도를 비교하는 예제입니다. 왼쪽 요소의 사라지는 시간은 400, 오른쪽 요소는 1200입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { height: 500px; background-color: #bbdefb; }
.c { height: 500px; background-color: #ffcdd2; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideUp( 400 );
$( '.c' ).slideUp( 1200 );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<table style="width: 100%; height: 500px;">
<tr>
<td style="vertical-align: top;"><div class="b"></div></td>
<td style="vertical-align: top;"><div class="c"></div></td>
</tr>
</table>
</body>
</html>
예제 3
- swing와 linear를 비교하는 예제입니다. easing은 가변 속도이고, linear는 고정 속도입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { height: 500px; background-color: #bbdefb; }
.c { height: 500px; background-color: #ffcdd2; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideUp( 2000, 'swing' );
$( '.c' ).slideUp( 2000, 'linear' );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<table style="width: 100%; height: 500px;">
<tr>
<td style="vertical-align: top;"><div class="b"></div></td>
<td style="vertical-align: top;"><div class="c"></div></td>
</tr>
</table>
</body>
</html>
예제 4
- div 요소가 사라진 후 Complete라는 문자열을 나타내는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { height: 100px; background-color: #bbdefb; }
.c { display: none; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideUp( function() {
$( '.c' ).css( 'display', 'block' );
} );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<div class="b"></div>
<p class="c">Complete</p>
</body>
</html>
- .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.
- .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.
개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></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> ...
jQuery / Reference / .slideToggle()
개요 .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...
개요 .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> ...
개요 .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다. 문법 1 - 속성의 값 가져오기 .css( propertyName ) propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 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 { ...
jQuery / Reference / .addClass()
개요 .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
jQuery / Reference / .remove()
개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...
개요 .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 / .removeClass()
개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...