Study Web Development

12월 28일

이전으로

jQuery

3. 문서 객체 조작1

3-4 문서 객체의 속성 추가

  1. 임의의 이미지 파일 Desert.jpg를 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\images로 이동
  2. 새 HTML 파일 s02_attr.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 처리</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// attr() 메서드는 속성과 관련된 모든 기능을 수행
		// $('img').attr('width', 100);
		
		// $('img').attr('width', 100).attr('height', 100);
		
		$('img').attr({width:100,height:100});
	});
</script>
</head>
<body>
	<img src="../images/Desert.jpg">
	<img src="../images/Penguins.jpg">
	<img src="../images/Koala.jpg">
</body>
</html>
  1. 새 HTML 파일 s03_attr.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 처리</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		/*
		$('img').attr('width', function(index) { // attr() 메서드에 매개 변수로 익명 함수를 전달
			return 100 * (1 + index); // 인덱스를 이용해 너비 값을 가공 후 attr() 메서드에 반환
		});
		*/
		
		$('img').attr({
			width:function(index) {
				return 100 * (1 + index);
			},
			height:function(index) {
				return 100 * (1 + index);
			}
		});
	});
</script>
</head>
<body>
	<img src="../images/Desert.jpg">
	<img src="../images/Penguins.jpg">
	<img src="../images/Koala.jpg">
</body>
</html>

3-3 문서 객체의 속성 검사

  1. 새 HTML 파일 s04_attr.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 처리</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// <img> 태그에 접근해서 src 속성 정보 읽기
		var src = $('img').attr('src');
		alert(src);
	});
</script>
</head>
<body>
	<img src="../images/Penguins.jpg">
</body>
</html>

3-5 문서 객체의 속성 제거

  1. 새 HTML 파일 s05_removeAttr.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 제거</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// removeAttr() 메서드는 속성을 제거
		$('h1').removeAttr('align');
	});
</script>
</head>
<body>
	<h1 align="center" data-index="0">Header-0</h1> <!-- data- : HTML5에 도입된 커스텀 데이터 속성 접두사; 해당 접두사가 붙은 속성은 브라우저에서 문법 검사를 수행하지 않음 -->
	<H1 data-index="1">Header-1</H1>
	<H1 data-index="2">Header-2</H1>
</body>
</html>

3-7 문서 객체의 스타일 추가

  1. 새 HTML 파일 s06_css.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 스타일 처리</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// <h1> 태그에 일괄적으로 스타일 부여
		// $('h1').css('color', 'red');
		
		var color = ['crimson', 'gold', 'lavender'];
		var background = ['lightgray', 'deeppink', 'slateblue'];
		
		// <h1> 태그에 서로 다른 글자색 지정
		/*
		$('h1').css('color', function(index) {
			return color[index];
		});
		*/
		
		// <h1> 태그에 글자색과 배경색 지정
		$('h1').css({
			color:function(index) {
				return color[index];
			},
			backgroundColor:function(index) {
				return background[index];
			}
		});
	});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

3-9 문서 객체의 내부 추가

  1. 새 HTML 파일 s07_html_text.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체에 HTML 태그 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// html() 메서드는 태그의 내용을 제어; innerHTML 속성과 같은 기능
		$('div').html('<h1>오늘은 화요일!</h1>');
		
		// text() 메서드는 태그의 내용을 제어; 데이터를 텍스트로 추가; textContent 속성과 같은 기능
		$('p').text('<h1>너무 추운 날씨</h1>');
	});
</script>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>
  1. 새 HTML 파일 s08_html.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 내부에 HTML 태그 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('div').html(function(index) {
			return '<span>텍스트-' + index + '</span>';
		});
		
		// <h1> 태그의 내용을 읽어들여서 내용을 변경한 후 다시 저장
		$('h1').html(function(index, html) {
			// index : 배열의 인덱스
			// html : 접근한 태그의 내부 데이터
			return '**' + html + '**';
		});
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

3-10 문서 객체의 제거

  1. 새 HTML s09_remove.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 내부의 데이터 제거</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('div').empty(); // <div> 태그 내부가 모두 지워지고 <div> 태그는 남아 있음
		$('p').remove(); // <p> 태그 자체가 지워짐
	});
</script>
</head>
<body>
	<div>
		<h1>Header-0</h1>
		<h1>Header-1</h1>
	</div>
	<p>
		<span>Content-0</span>
		<span>Content-1</span>
	</p>
</body>
</html>

4. 문서 객체 조작2

4-2 문서 객체의 삽입

  1. 새 HTML 파일 s10_appendTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// $('<h1>Hello World!!</h1>').appendTo('div'); // <h1> 태그를 새로 생성하여 기존의 <div> 태그에 마지막 자식으로 추가
		// $('<h1>Hello jQuery!</h1>').prependTo('div'); // <h1> 태그를 새로 생성하여 기존의 <div> 태그에 첫 번째 자식으로 추가
		// $('<h1>Hello JavaScript!</h1>').insertAfter('div'); // <h1> 태그를 새로 생성하여 기존의 <div> 태그 바로 다음 형제로 추가
		$('<h1>Hello CSS!</h1>').insertBefore('div'); // <h1> 태그를 새로 생성하여 기존의 <div> 태그 바로 이전 형제로 추가
	});
</script>
</head>
<body>
	<div>
		<h1>안녕하세요!</h1>
	</div>
</body>
</html>
  1. 새 HTML 파일 s11_appendTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 새로운 태그 생성 후 속성을 제어하고 <body> 태그의 마지막 자식으로 추가
		$('<img>').attr({
			src:'../images/Penguins.jpg',
			width:400,
			height:250
		}).appendTo('body');
	});
</script>
</head>
<body>

</body>
</html>
  1. 새 HTML 파일 s13_append.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// $('div').append('<h2>Hello jQuery**</h2>'); // 기존 태그 <div>의 마지막 자식으로 새로 생성한 태그 <h2>를 추가
		// $('div').prepend('<h2>Hello JavaScript**</h2>'); // 기존 태그 <div>의 첫 번째 자식으로 새로 생성한 태그 <h2>를 추가
		// $('div').after('<h2>Hello CSS**</h2>'); // 기존 태그 <div>의 바로 다음 형제로 새로 생성한 태그 <h2>를 추가
		$('div').before('<h2>Hello World**</h2>'); // 기존 태그 <div>의 바로 이전 형제로 새로 생성한 태그 <h2>를 추가
	});
</script>
</head>
<body>
	<div>
		<h1>오늘은 화요일!</h1>
	</div>
</body>
</html>
  1. 새 HTML 파일 s14_append.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		var content = [
			{name:'김연아', city:'서울시'},
			{name:'이상화', city:'부산시'},
			{name:'손연재', city:'인천시'}
		];
		
		var output = '';
		$.each(content, function(index, item) {
			output += '<div>';
			output += '<h1>' + item.name + '</h1>';
			output += '<h2>' + item.city + '</h2>';
			output += '</div>';
		});
		
		$('#output').append(output);
	});
</script>
</head>
<body>
	<div id="output"></div>
</body>
</html>
  1. 새 HTML 파일 s15_append.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/* 
[실습 문제] 성적을 <table> 태그에 표시
	name	korean	english	math
	이름		국어		영어		수학
	홍길동	80		90		88
	박문수	99		99		70
	이순신	89		77		99
	김유신	88		99		98
*/
	$(function() {
		// 배열 생성
		let score = [
			{name:'모카', korean:80, english:90, math:88},
			{name:'초코', korean:99, english:99, math:70},
			{name:'자바칩', korean:89, english:77, math:99},
			{name:'프라페', korean:88, english:99, math:98}
		];
		
		let output = '<tr><th>이름</th><th>국어</th><th>영어</th><th>수학</th></tr>';
		
		// each() 메서드를 이용해서 배열로부터 객체의 정보를 얻기
		$.each(score, function() {
			output += '<tr>';
			output += '<td>' + this.name + '</td>';
			output += '<td>' + this.korean + '</td>';
			output += '<td>' + this.english + '</td>';
			output += '<td>' + this.math + '</td>';
			output += '</tr>';
		});
		
		// <table> 태그에 자식 태그를 추가
		$('#output').append(output);

		$('#output').css('border-collapse', 'collapse');
		$('td,th').css({
			padding:'0 20px',
			textAlign:'center'
		});
		$('tr > td').not(':first-child').css('text-align', 'right');
	});
</script>
</head>
<body>
	<table id="output" border="1"></table>
</body>
</html>

4-3 문서 객체의 이동

  1. 임의의 이미지 파일 Hydrangeas.jpg와 Jellyfish.jpg를 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\images로 이동
  2. 새 HTML 파일 s12_appendTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 추가</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 이미지의 너비 지정
		$('img').css('width', 200);
		
		// 2초마다 함수를 반복 실행
		setInterval(function() {
			$('img').first().appendTo('body'); // first() 메서드는 선택된 태그들 중 가장 앞에 위치한 태그에 접근
		}, 2000);
	});
</script>
</head>
<body>
	<img src="../images/Hydrangeas.jpg">
	<img src="../images/Jellyfish.jpg">
	<img src="../images/Desert.jpg">
	<img src="../images/Penguins.jpg">
	<img src="../images/Koala.jpg">
</body>
</html>

5. 이벤트

5-6 마우스 이벤트

  1. 새 폴더 ch16-jqueryEvent 생성하고 새 HTML 파일 s01_click.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click 이벤트</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 이벤트 연결
		$('#btn').click(function() {
			$('p').css('background-color', 'gold');
		});
	});
</script>
</head>
<body>
	<button id="btn">click</button>
	<p>내용</p>
</body>
</html>
  1. 새 HTML 파일 s02_mouseover.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouseover, mouseout 이벤트</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn').mouseover(function() {
			$('p').css('background-color', 'lemonchiffon');
		});
		$('#btn').mouseout(function() {
			$('p').css('background-color', 'lavender');
		});
		
		$('#btn2').hover(function() { // hover() 메서드의 첫 번째 인자는 마우스 오버 이벤트에 연결됨
			$('p').css('background-color', 'lemonchiffon');
		},
		function() { // hover() 메서드의 두 번째 인자는 마우스 아웃 이벤트에 연결됨
			$('p').css('background-color', 'lavender');			
		});
	});
</script>
</head>
<body>
	<button id="btn">mouseover/mouseout</button>
	<button id="btn2">hover</button>
	<p>내용</p>
</body>
</html>
  1. 새 HTML 파일 s03_hover.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover</title>
<style type="text/css">
	.reverse {
		background-image: url(../images/Jellyfish.jpg);
		color:white;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 이벤트 연결
		$('h1').hover(function() {
			$(this).addClass('reverse'); // this는 이벤트가 발생한 태그; $(this)는 이벤트가 발생한 태그의 jQuery 객체
		},
		function() {
			$(this).removeClass('reverse');
		});
	});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

5-7 키보드 이벤트

  1. 새 HTML 파일 s04_keyup.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>key 이벤트</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*
이벤트 이름		설명
keydown		키보드가 눌려질 때 발생
keypress	글자가 입력될 때 발생(한글 입력시에는 사용할 수 없음)
keyup		키보드가 떼어질 때 발생
*/
	$(function() {
		$('textarea').keyup(function() {
			// 입력한 글자 수를 구하기
			var inputLength = $(this).val().length;
			var remain = 30 - inputLength;
			
			// 문서 객체에 remain을 저장
			$('h1').html(remain);
			
			// 문서 객체의 색상 변경
			if(remain>=0) {
				$('h1').css('color', 'black');	
			}
			else {
				$('h1').css('color', 'red');	
			}
		});
	});
</script>
</head>
<body>
	<div>
		<p>지금 내 생각을</p>
		<h1>30</h1>
		<textarea rows="5" cols="70" maxlength="30"></textarea> <!-- 영문의 경우 정확히 30자까지만 입력 가능하지만, 한글의 경우 간혹 초과될 수 있음 -->
	</div>
</body>
</html>

5-5 이벤트 통합 메서드

  1. 새 HTML 파일 s05_on.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 연결</title>
<style>
	.reverse {
		background: black;
		color: white;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 이벤트 연결
		$('h1').on('click', function() { // on() 메서드에 이벤트명과 이벤트 핸들러를 인자로 전달
			$(this).html(function(index, html) {
				return html + '*'; // <h1> 태그의 원래 내용에 *을 추가하여 저장
			});
		});
		
		// 이벤트 연결
		$('h1').on({ // on() 메서드에 이벤트명과 이벤트 핸들러를 객체로 전달
			mouseover:function() {
				$(this).addClass('reverse');
			},
			mouseout:function() {
				$(this).removeClass('reverse');
			}
		});
	});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>
  1. 새 HTML 파일 s07_on.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 연결</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		/*
		$('h1').on('click', function() { // 현재 태그에만 이벤트가 연결되고 동적으로 생성되는 미래 태그들에는 이벤트가 연결되지 않음
			var length = $('h1').length; // <h1> 태그의 수 반환
			var targetHTML = $(this).html(); // 이벤트가 발생한 태그의 내용 반환
			$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');
		});
		*/
		
		$(document).on('click', 'h1', function() { // 현재 태그뿐만 아니라 미래에 생성되는 태그들에도 이벤트 연결
			var length = $('h1').length; // <h1> 태그의 수 반환
			var targetHTML = $(this).html(); // 이벤트가 발생한 태그의 내용 반환
			$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');			
		});
	});
</script>
</head>
<body>
	<div id="wrap">
		<h1>Header</h1> <!-- 현재 태그 -->
	</div>
</body>
</html>

5-3 이벤트 강제 발생

  1. 새 HTML 파일 s06_trigger.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 강제 발생</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('h1').on('click', function() { // on() 메서드에 이벤트명과 이벤트 핸들러를 인자로 전달
			$(this).html(function(index, html) { // html() 메서드의 첫 번째 인자는 선택된 태그의 인덱스, 두 번째 인자는 선택된 태그의 내용
				return html + '*'; // <h1> 태그의 원래 내용에 *을 추가하여 저장
			});
		});
		
		// 1초마다 매개 변수로 전달된 함수를 실행
		setInterval(function() {
			// trigger() 메서드는 인자로 이벤트명을 전달하면 해당 이벤트를 강제 발생
			$('h1').trigger('click');
		}, 1000);
	});
</script>
</head>
<body>
	<h1>Start : </h1>
</body>
</html>

5-4 기본 이벤트와 이벤트 전달

  1. 새 HTML 파일 s08_default.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 이벤트</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 이벤트 연결
		$('a').click(function(event) { // 이벤트 객체를 사용하려면 이벤트 핸들러의 인자로 전달해야 함
			$(this).css('background-color', 'skyblue');
			
			event.preventDefault(); // 기본 이벤트를 제거하는 JavaScript 표준 메서드; return false;와 같은 기능
		});
	});
</script>
</head>
<body>
	<h1>
		<a href="https://www.naver.com">네이버</a>
	</h1>
</body>
</html>

7. 다양한 효과와 애니메이션

효과 메서드

  1. 임의의 이미지 파일 dog.png를 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\images로 이동
  2. 새 폴더 ch17-jQueryEffect를 생성하고 새 HTML 파일 s01_show.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn1').on('click', function() {
			$('#dog').show('slow', function() { // show() 메서드의 첫 번째 인자인 속도값은 밀리초 단위 또는 키워드(fast(=200ms), normal(=400ms), slow(=600ms))로 지정 가능; 두 번째 인자인 함수는 선택된 태그가 완전히 보여진 후에 실행됨
				alert('보이기 완료');
			});
		});
		
		$('#btn2').on('click', function() {
			$('#dog').hide(1000, function() { // hide() 메서드에 인자로 전달된 함수는 선택된 태그가 완전히 숨겨진 후에 실행됨
				alert('숨기기 완료');
			});
		});
		
		$('#btn3').on('click', function() {
			$('#dog').toggle('slow'); // toggle() 메서드는 선택된 태그가 보여지고 있으면 숨기고, 숨겨져 있으면 나타나도록 처리
		});
	});
</script>
</head>
<body>
	<button id="btn1">Show</button>
	<button id="btn2">Hide</button>
	<button id="btn3">Toggle</button>
	<br>
	<img id="dog" src="../images/dog.png" width="120" height="100" style="display: none;">
</body>
</html>
  1. 새 HTML 파일 s02_fadeIn.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn1').on('click', function() {
			$('#dog').fadeIn('slow');
		});
		
		$('#btn2').on('click', function() {
			$('#dog').fadeOut(1000);
		});
		
		$('#btn3').on('click', function() {
			$('#dog').fadeToggle('fast');
		});
	});
</script>
</head>
<body>
	<button id="btn1">fadeIn</button>
	<button id="btn2">fadeOut</button>
	<button id="btn3">fadeToggle</button>
	<br>
	<img id="dog" src="../images/dog.png" width="150" heigth="100" style="display: none;">
</body>
</html>
  1. 새 HTML 파일 s03_fadeTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn1').on('click', function() {
			$('#dog').fadeTo('slow', 0.3); // fadeTo() 메서드는 선택된 태그의 투명도를 제어; 첫 번째 인자는 속도값이며 두 번째 인자는 투명도(0=투명, 1=불투명)
		});
		
		$('#btn2').on('click', function() {
			$('#dog').fadeTo('slow', 1.0);
		});
	});
</script>
</head>
<body>
	<button id="btn1">투명도(30%)</button>
	<button id="btn2">투명도(100%)</button>
	<br>
	<img id="dog" src="../images/dog.png" width="120" height="100">
</body>
</html>
  1. 새 HTML 파일 s04_slideUp.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<style type="text/css">
	h1 {
		width: 300px;
		height: 200px;
		background-color: #FF0;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn1').on('click', function() {
			$('h1').slideUp(1000); // slideUp() 메서드는 선택된 태그가 위로 올라가면서 숨겨짐
		});
		
		$('#btn2').on('click', function() {
			$('h1').slideDown('slow'); // slideDown() 메서드는 선택된 태그가 아래로 내려가면서 보여짐
		});
		
		$('#btn3').on('click', function() {
			$('h1').slideToggle('fast');
		});
	});
</script>
</head>
<body>
	<button id="btn1">slideUp</button>
	<button id="btn2">slideDown</button>
	<button id="btn3">slideToggle</button>
	<h1>내용</h1>
</body>
</html>

다음으로