[6/23 일반] 라이브러리 소개

박재준·2022년 6월 23일
CSSSearchNodeajaxanimate()jquery이클립스
0

1. 학습한 내용

1) 필기 내용

[6/23 일반] 라이브러리 소개

  • jQuery 효과 : 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있고, 여러 가지 효과를 제공함

  • hide, show, toggle(hide와 show의 합체버전)
    fadeIn, fadeOut, fadeToggle(fadeIn, fadeOut 합체 버전), fadeTo(지정된 투명도로 페이드아웃)
    slideUp, slideDown, slideToggle(Up, Down 합체 버전)
    callback 함수 : 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록할 수 있음

  • Animate({}) : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정

  • 표준 웹 통신 vs Ajax 통신
    → 표준 웹 통신은 변경되는 내용이 화면 전체에서 변경
    → Ajax 통신은 변경되는 부분만 변경되어서 화면의 일부에서 변경 작업 가능
    → jQuery Ajax 통신 사용

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

workspace/Ajax/src/main/webapp/Ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function getText(){
		$.ajax({
			url : "data1.txt",
			type : "post",
			dataType : "text",
			success : function(rec_data){
				$("#result").text(rec_data);
			}
		});
	}
	
	function getHtml(){
		$.ajax({
			url : "data2.html",
			type : "post",
			dataType : "html",
			success : function(rec_data){
				$("#result").html(rec_data);
			}
		});
	}
	
	function getXml(){
		$.ajax({
			url : "data3.xml",
			type : "post",
			dataType : "xml",
			success : function(rec_data){
				var data = $(rec_data).find("data");
				
				$(data).each(function(idx, obj){
					var str1 = $(obj).find("str1");
					var str2 = $(obj).find("str2");
					
					var str11 = $(str1).text();
					var str22 = $(str2).text();
					
					$("#result").append("str1 : " + str11 + "<br/>");
					$("#result").append("str2 : " + str22 + "<br/>");
				});				
			}
		});
	}
	
	function getJson(){
		$.ajax({
			url : "data4.json",
			type : "post",
			dataType : "json",
			success : function(rec_data){
				$("#result").append("data1 : " + rec_data.data1 + "<br/>");
				$("#result").append("data2 : " + rec_data.data2 + "<br/>");
				$("#result").append("data3 : " + rec_data.data3 + "<br/>");
			}
		});
	}
</script>
</head>
<body>
	<button onclick="getText()">문자열 데이터</button>
	<button onclick="getHtml()">HTML 데이터</button>
	<button onclick="getXml()">XML 데이터</button>
	<button onclick="getJson()">JSON 데이터</button>
	<div id="result"></div>
</body>
</html>

data1.txt 파일

문자열입니다.

data2.html 파일

<a href="http://www.google.com">google</a>

data3.xml 파일

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<data>
		<str1>문자열 1-1</str1>
		<str2>문자열 1-2</str2>
	</data>
		<data>
		<str1>문자열 2-1</str1>
		<str2>문자열 2-2</str2>
	</data>
		<data>
		<str1>문자열 3-1</str1>
		<str2>문자열 3-2</str2>
	</data>
</root>

data4.json 파일

{
	"data1" : 100,
	"data2" : 11.11,
	"data3" : "문자열"
}

→ 결과(아래 그림 1)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

workspace/Animate/src/main/webapp/Animate.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function setSize(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow");
	}
	
	function setOpacity(){
		$("#a1").animate({
			opacity : 0
		}, "slow");
	}
	
	function setPosition(){
		$("#a1").animate({
			left : 100,
			top : 100
		}, "slow");
	}
	
	function setBackgroundColor(){
		$("#a1").animate({
			backgroundColor : "red"
		}, "slow");
	}
	
	function setTotal(){
		$("#a1").animate({
			width : 400,
			height : 400,
			opacity : 0.5,
			left : 100,
			top : 100
		}, "slow");
	}
	
	function setSequence(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow").animate({
			left : 100,
			top : 100
		}, "slow").animate({
			opacity : 0.2
		}, "slow");
	}
	
	/*
	function setSequence(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow").delay(1000).animate({
			left : 100,
			top : 100
		}, "slow").delay(1000).animate({
			opacity : 0.2
		}, "slow");
	}	
	*/
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;	
		position : relative;	
	}
</style>
</head>
<body>
	<button onclick="setSize()">size 설정</button>
	<button onclick="setOpacity()">투명도 조절</button>
	<button onclick="setPosition()">위치 이동</button>
	<button onclick="setBackgroundColor()">배경색 설정</button>
	<button onclick="setTotal()">종합 설정</button>
	<button onclick="setSequence()">순차 설정</button>
	<div id="a1"></div>
</body>
</html>

→ 결과(아래 그림 2)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

workspace/CSS/src/main/webapp/CssClass.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function addClass(){
		$("#a1").addClass("active");
	}
	
	function removeClass(){
		$("#a1").removeClass("active");
	}	

	function toggleClass(){
		$("#a1").toggleClass("active");
	}
</script>
<style>
	.active{
		background-color : black;
		color : white;
	}
</style>
</head>
<body>
	<h1 id="a1">h1 태그</h1>
	<button onclick="addClass()">CSS 클래스 추가하기</button>
	<button onclick="removeClass()">CSS 클래스 제거하기</button>
	<button onclick="toggleClass()">CSS 클래스 전환하기</button>
</body>
</html>

→ 결과(아래 그림 3)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

workspace/Effect/src/main/webapp/Callback.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function test_callback(){
		$("#a1").hide("slow", function(){
			alert("effect end");
		});
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="test_callback()">callback 함수 테스트</button>
	<div id="a1"></div>
</body>
</html>

→ 결과(아래 그림 4)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Fade.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_fadeout(){
		$("#a1").fadeOut(3000);
	}
	
	function div_fadein(){
		$("#a1").fadeIn(3000);
	}
	
	function div_fadetoggle(){
		$("#a1").fadeToggle("slow");
	}
	
	function div_fadeto(){
		$("#a1").fadeTo("slow", 0.3);
	}	
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="div_fadeout()">fade out</button>
	<button onclick="div_fadein()">fade in</button>
	<button onclick="div_fadetoggle()">fade toggle</button>
	<button onclick="div_fadeto()">fade to</button>
	<div id="a1"></div>
</body>
</html>

→ 결과(아래 그림 5)

ShowHide.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_hide(){
		//$("#a1").hide();
		//$("#a1").hide(1000);
		$("#a1").hide("slow");
		//$("#a1").hide("fast");
	} 
	
	function div_show(){
		//$("#a1").show();
		//$("#a1").show(1000);
		//$("#a1").show("slow");
		$("#a1").show("fast");
	}
	
	function div_toggle(){
		//$("#a1").toggle();
		$("#a1").toggle(1000);
		//$("#a1").toggle("slow");
		//$("#a1").toggle("fast");
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick = "div_hide()">hide</button>
	<button onclick = "div_show()">show</button>
	<button onclick = "div_toggle()">toggle</button>
	<div id="a1"></div>
</body>
</html>

→ 결과(아래 그림 6)

Slide.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_slideup(){
		$("#a1").slideUp("slow");
	}
	
	function div_slidedown(){
		$("#a1").slideDown("slow");		
	}
	
	function div_slidetoggle(){
		$("#a1").slideToggle("slow");	
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="div_slideup()">slide up</button>
	<button onclick="div_slidedown()">slide down</button>
	<button onclick="div_slidetoggle()">slide toggle</button>
	<div id="a1"></div>
</body>
</html>

→ 결과(아래 그림 7)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

workspace/SearchNode/src/main/webapp/Ascending.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#a4").parent().css("border-color", "red");
		$("#a4").parents().css("border-width", "4px");
		$("#a4").parents(".c1").css("border-style", "dashed");
		$("#a4").parentsUntil(".c1").css("border-style", "dotted");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
	}
</style>
</head>
<body>
	<div>div tag 1
		<div class="c1">div tag 2
			<div class='c2'>div tag 3
				<div id="a4">div tag 4</div>
			</div>
		</div>
	</div>
</body>
</html>

→ 결과(아래 그림 8)

Descending.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#a1").children().css("border-color", "red");
		$("#a1").children(".c1").css("border-width", "4px");
		$("#a1").find(".c3").css("border-style", "dotted");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
	}
</style>
</head>
<body>
	<div id="a1">
		div
		<div class="c1">
			div 1
			<div class="c3">
				div 1-2				
			</div>
		</div>
		<div class="c2">
			div 2
			<div>
				div 2-2
			</div>
		</div>
	</div>
</body>
</html>

→ 결과(아래 그림 9)

Next.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#a1").next().css("border-color", "red");
		$("#a1").nextAll().css("border-style", "dotted");
		$("#a1").nextUntil("#a2").css("border-width", "4px");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
		margin-bottom : 10px;
	}
</style>
</head>
<body>
	<div>div 1</div>
	<div id="a1">div 2</div>
	<div>div 3</div>
	<div>div 4</div>
	<div id="a2">div 5</div>
</body>
</html>

→ 결과(아래 그림 10)

Prev.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#a1").prev().css("border-color", "red");
		$("#a1").prevAll().css("border-style", "dotted");
		$("#a1").prevUntil("#a2").css("border-width", "4px");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
		margin-bottom : 10px;
	}
</style>
</head>
<body>
	<div id="a2">div 1</div>
	<div>div 2</div>
	<div>div 3</div>
	<div id="a1">div 4</div>
	<div>div 5</div>
</body>
</html>

→ 결과(아래 그림 11)

Siblings.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>	
	$(function(){
		$("#a1").siblings().css("border-color", "red");
		$("#a1").siblings(".c2").css("border-style", "dotted");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
	}
</style>
</head>
<body>
	<div class="c1">div 1</div>
	<div class="c2">div 2</div>
	<div id="a1">div 3</div>
	<div class="c1">div 4</div>
	<div class="c2">div 5</div>
</body>
</html>

→ 결과(아래 그림 12)

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) 학습 하는 것과 상관없이, 집 와이파이 문제 때문에 강의를 못 들음...

3. 해결방법 작성

1) 낼 카페를 가서 하던가, 와이파이를 고치던가...

4. 학습 소감

1) 그냥.. 뭐 답답했다 여러모로

profile
박재준
초급 개발자
이전 포스트

jQuery 익히기 - 실전! jQuery 익히기

다음 포스트

[6/24 일반] React/ 실습 - 리액트 작동 원리와 기초(문법, 컴포넌트)

0개의 댓글