[Web] Day36 - jQuery 자바스크립트 라이브러리

🌎 Web

[Web] Day36 - jQuery 자바스크립트 라이브러리

harveydent 2023. 6. 26. 19:28

728x90

jQuery

jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. jQuery를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 jQuery를 활용하여 빠르게 개발할 수 있습니다.

jQuery 다운로드

https://jquery.com/download/

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

jQuery 로드 방법

jQuery.js 파일 로드
CDN 로드

1. jQuery.js 파일 로드

<head>
	<script src="/파일경로/제이쿼리파일명.js"></script>
</head>

2. CDN 로드

<head>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<head/>

실습

실습 1 - 선택자로 스타일 적용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div, ul, li {
		margin: 5px;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#header').css("border", "1px solid black");
		$('ul > li').css("border", "3px solid green");
		$('div.gnb').css("border", "3px solid pink");
		$('li[class="test"]').css("background", "lightblue");
	});
</script>
</head>
<body>

<div id="header">
	<div id="Logo">로고</div>
	<div>공지사항</div>	
</div>

<div class="gnb">
	<ul>
		<li>메뉴 01
			<ul>
				<li class="test">하위 메뉴 01</li>
				<li>하위 메뉴 02</li>
			</ul>
		</li>
		<li>메뉴 02</li>
		<li>메뉴 03</li>
		<li>메뉴 04</li>
	</ul>
</div>

<div id="footer">푸터</div>

</body>
</html>

실습 2 - ready() 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var datas = ['사과', '바나나', '키위'];
		// 향상된 each 메서드
		$.each(datas, function(index, value) {
			console.log(index + '번 인덱스: ' + value);
		});
		var obj = {name: '홍길동', score: 85};
		$.each(obj, function(key, value) {
			console.log(key + ' 속성의 값= ' + value);
		});
	});
</script>
</head>
<body>

</body>
</html>

실습 3 - 갤러리 프로젝트

갤러리 프로젝트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리 프로젝트</title>
<style type="text/css">
	#wrap {
		width: 160px;
	}
	#wrap .page {
		text-align: right;
		margin: 5px;
	}
	#wrap .photo {
		border: 2px solid black;
		width: 160px;
		height: 160px;
		overflow: hidden;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var total = $('.photo > div').length;
		var num = 1;
		$('.pageInfo > span:first').text(num);
		$('.pageInfo > span:last').text(total);
		
		$('.btn1').click(function() {
			num--;
			$('.photo div:last').insertBefore('.photo div:first');
			if (num < 1) {
				num = total;
			}
			$('.pageInfo > span:first').text(num);
		});
		$('.btn2').click(function() {
			num++;
			$('.photo div:first').insertAfter('.photo div:last');
			if (num > total) {
				num = 1;
			}
			$('.pageInfo > span:first').text(num);
		});
	});
</script>
</head>
<body>

<div id="wrap">
	<div class="page">
		<button class="btn1"> &lt; </button>
		<span class="pageInfo"> <span></span> / <span></span> </span>
		<button class="btn2"> &gt; </button>
	</div>
	<div class="photo">
		<div><img alt="이미지01" src="images/Galio.png"></div>
		<div><img alt="이미지02" src="images/Gangplank.png"></div>
		<div><img alt="이미지03" src="images/Garen.png"></div>
	</div>
</div>

</body>
</html>

실습 4 - 마우스 이벤트

마우스 이벤트

mouseover

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
	.box {
		background-color: lightgray;
		padding: 10px;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.box').mouseover(function() {
			$('.result').append('<p>마우스오버이벤트발생!</p>');
		});
	});
</script>
</head>
<body>

<div class="box">mouseover</div>

<hr>

<div class="result"></div>

</body>
</html>

실습 5 - 키보드 이벤트

키보드 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 이벤트</title>
<style type="text/css">
	.box {
		background-color: lightgray;
		padding: 10px;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('textarea').keydown(function() {
			$('.result').text($(this).val());
		});
	});
</script>
</head>
<body>

<textarea rows="5" cols="5"></textarea>

<hr>

<div class="result"></div>

</body>
</html>

실습 6 - 버튼 이벤트

실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
	#box {
		width: 200px;
		height: 200px;
		background-color: lightseagreen;
	}
	.test {
		display: none;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function() {
		/*
		$('#wrap button:eq(0)').click(function() {
			$('#wrap .box').addClass("test");
		});
		$('#wrap button:eq(1)').click(function() {
			$('#wrap .box').removeClass();
		});
		$('#wrap button:eq(2)').click(function() {
			if ($('#wrap .box').attr("class") == 'test') {
				$('#wrap .box').removeClass();			
			}
			else {
				$('#wrap .box').addClass("test");
			}
		});
		*/
		$('#wrap button:eq(0)').click(function() {
			$('#wrap .box').hide();
		});
		$('#wrap button:eq(1)').click(function() {
			$('#wrap .box').show();
		});
		$('#wrap button:eq(2)').click(function() {
			$('#wrap .box').toggle();
		});
	});
</script>
</head>
<body>
	<div id="wrap">
		<button>버튼1</button>
		<button>버튼2</button>
		<button>버튼3</button>
		<hr>
		<div class="box"></div>
	</div>
</body>
</html>

GitHub

https://github.com/Qkrwnsgus0522/Web

GitHub - Qkrwnsgus0522/Web

Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.

github.com

728x90