프로그래밍

[Web] day36 : jQuery 자바스크립트 라이브러리 본문

Web/Web

[Web] day36 : jQuery 자바스크립트 라이브러리

시케 2023. 7. 5. 08:07
728x90
반응형

2023.06.26.월

jQuery

제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다

링크로 연결하는 CDN방식과 직접 라이브러리 파일을 다운받아 적용시키는 방식으로 사용할 수 있다

 

CDN 연결방식

<!-- CDN 연결방식 -->
<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(){
		console.log('jQuery 문법');
	});
</script>

jQuery로 요소 선택 후 스타일 적용

jQuery를 사용하면 보다 손쉽게 요소를 선택할 수 있다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</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>

ready()

jQuery를 사용하여 요소들이 모두 준비되면 함수를 작동시키는 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</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(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>

jQuery를 활용한 갤러리 예제(사진 옆으로 넘기기)

갤러리 프로젝트
/
이미지01
이미지02
이미지03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리 프로젝트</title>

<style type="text/css">
	#wrap {
		width: 700px;
	}
	
	#wrap .page {
		text-align: right;
		margin: 5px;
	}
	
	#wrap .photo {
		border: 2px solid black;
		width: 700px;
		height: 500px;
		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">
		<span class = "pageInfo">
			<span></span> / <span></span>
		</span>
		<button class= "btn1"> &lt; </button>
		<button class= "btn2"> &gt; </button>
	</div>
	<div class= "photo">
		<div><img alt ="이미지01" src ="images/gora.jpg"></div>
		<div><img alt ="이미지02" src ="images/paduck.jpg"></div>
		<div><img alt ="이미지03" src ="images/test.png"></div>
	</div>
</div>



</body>
</html>

jQuery를 활용한 마우스 이벤트

마우스 이벤트 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
.box {
	background: 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="30" cols="30"></textarea>
	<hr>
	<div class="result"></div>


</body>
</html>

jQuery실습01

  • 버튼1이 클릭되면 상자가 보이지 않게 한다
  • 버튼2가  클릭되면 상자가 나타나게 한다
  • 버튼3이 클릭되면 상자가 사라졌을땐 보이게 보일때는 안보이게 바꾼다 
실습 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>

<style type="text/css">
	div {
		width: 500px;
		height: 500px;
		background-color: lightgreen;
	}
</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() {
			$('.btn1').click(function() {
				$('div').hide();
			});
			
			$('.btn2').click(function() {
				$('div').show();
			});
			
			$('.btn3').click(function() {
				$('div').toggle();
			});
	});
</script>

</head>
<body>


	<button class = "btn1">버튼1</button>
	<button class = "btn2">버튼2</button>
	<button class = "btn3">버튼3</button>

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

</body>
</html>
728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day37 : JSP  (0) 2023.07.05
[Web] day37 : ajax() 메서드와 JSON 데이터  (0) 2023.07.05
[Web] day36 : 자바스크립트 주사위/가위바위보 예제  (0) 2023.07.04
[Web] day35 : BOM (Browser Object Model)  (0) 2023.07.04
[Web] day35 : 자바스크립트 이벤트 활용 예제  (0) 2023.07.04
'Web/Web' Related Articles more
Comments