[JQuery] CSS/Ajax

XIXI·2022년 6월 23일

대구AI스쿨

목록 보기

41/57

🌱 CSS

✏️CssClass

<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>

• jQuery는 태그의 css를 제어할 수 있는 함수를 제공
• addClass : css class를 설정
• removeClass : css class를 제거
• toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거
• css : css 속성을 가져오거나 설정

✏️CssFunction

<script>
	function getCss() {
		var v1 = $("#a1").css("background-color");
		var v2 = $("#a1").css("color");
		
		$("#result").append("background-color : " + v1 + "<br/>")
		$("#result").append("color : " + v2 + "<br/>")
	}
	function setCss() {
		$("#a1").css("background-color", "blue");
		$("#a1").css("color", "yellow");
	}
</script>
<style>
	#a1 {
		background-color : black;
		color: white;
	}
</style>
</head>
<body>
	<h1 id="a1">h1 태그</h1>
	<button onclick="getCss()">css 읽어오기</button>
	<button onclick="setCss()">css 설정하기</button>
	<div id="result"></div>
</body>

• addClass : css class를 설정
• removeClass : css class를 제거
• toggleClass : 지정된 클래스가 없으면 설정, 있으면 제거
• css : css 속성을 가져오거나 설정

🌱 태그 탐색

✏️태그

jQuery는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있다.
태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 한다

✏️부모 태그

<script>
	$(function(){
		$("#a4").parent().css("border-color", "red");
		$("#a4").parents().css("border-width", "4px");
		$("#a4").parents(".c1").css("border-style", "dashed");
		$("#a4").parentsUntill().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>

• parent : 선택된 태그의 부모 태그를 선택
• parents : 선택된 태그의 모든 부모 태그를 선택
• parents(선택자2) : 선택된 태그의 모든 부모 태그 중 선택자2에 해당하는
태그들이 선택
• parentsUntil(선택자2) : 선택된 태그에서 선택자2 태그까지의 모든 부모태
그들이 선택

✏️자식 태그

<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>

• children : 선택된 태그의 자식 태그들을 선택
• children(선택자2) : 선택된 태그의 자식 태그들 중 선택자2에 해
당하는 태그들이 선택
• find(선택자2) : 선택된 태그의 하위 태그들 중 선택자2에 해당
하는 태그들이 선택

✏️형제 태그

<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>

• siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택
• siblings(선택자2) : 선택된 태그와 같은 계층의 모든 태그 중 선택자2
에 해당하는 태그들이 선택

✏️Next

<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>

• next : 선택된 태그 다음 태그가 선택
• nextAll : 선택된 태그의 다음 태그들이 모두 선택
• nextUntil(선택자2) : 선택된 태그 다음 태그들 중 선택자2 까지의 모
든 태그들이 선택

✏️Pre

<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>

• prev : 선택된 태그 이전 태그가 선택
• prevAll : 선택된 태그 이전의 모든 태그가 선택
• prevUntil(선택자2) : 선택된 태그의 이전 태그들 중 선택자2 까
지의 모든 태그들이 선택

✏️정리

• siblings를 사용하면 같은 계층의 모든 태그들을 선택할 수 있다.
• next, nextAll nextUntil을 사용하면 다음 태그들을 선택할 수 있
다.
• prev, prevAll, prevUntil을 사용하면 이전 태그들을 선택할 수 있
다.

🌱 jQuery 효과

✏️개념

jQuery는 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있다.
여러가지 효과 제공

✏️hide/show/toggle

<script>
	function div_hide() {
		$("#a1").hide();
	}
	
	function div_show() {
		$("#a1").show();
	}
	
	function div_toggle() {
		$("#a1").toggle();
	}
</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>

<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>

• hide : 선택된 태그를 사라지게 함
• show : 선택된 태그를 나타나게 함
• toggle : 사라지거나 나타나는 상태를 전환
• hide(시간), show(시간), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타남
• 시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은
시간이 선택됨

✏️Fade

<script>
	function div_fadeout() {
		$("#a1").fadeOut("slow");
	}
		
	function div_fadein() {
		$("#a1").fadeIn("slow");	
	}
		
	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>

• fadeIn : 페이드 효과를 통해 나타나게 한다.
• fadeout : 페이드 효과를 통해 사라지게 한다.
• fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환
한다.
• fadeTo : 지정된 투명도 만큼 페이드 아웃한다.

✏️Slide

<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>

• slideUp : 위로 슬라이드 되면서 사라진다.
• slideDown : 아래로 슬라이드 되면서 나타난다.
• slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태
를 전환한다.

✏️Callback

<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>

• 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록
할 수 있다

✏️정리

• show, fade in, slide down을 사용하면 애니메이션 효과와 함께 나타
나게 할 수 있다.
• hide, fade out, slide up을 사용하면 애니메이션 효과와 함께 사라지
게 할 수 있다.
• 사라지거나 나타날 때 호출되는 함수를 등록해서 사용할 수 있다.

🌱 애니메이션

✏️개념

jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있록 지원
선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모
두 만들어 주고 태그에 변화를 줌

✏️Animate

<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").delay(1000).animate({
			left : 100,
			height : 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>

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

✏️정리

• animate 함수를 사용하면 애니메이션 효과를 만들어 사용할 수
있다.
• jQuery UI 라이브러리를 사용하면 좀 더 다양한 효과를 만들 수
있다

🌱 표준 통신

✏️개념

• 웹 브라우저는 서버에게 파일을 요청
• 이 때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결
과로 클라이언트에게 전달
• 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스
스로 처리

✏️문제

• 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게되면
브라우저가 스스로 처리하려고 함
• 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다
운로드가 됨
• 만약 응답 결과가 html 코드이면 html 코드를 통해 화면을 변경하고 이미
지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는
화면으로 변경되어 처리, 즉 웹 브라우저는 처리할 수 있는 데이터를 받게
되면 화면이 변경

✏️ Ajax 통신

• Ajax 통신은 서버와 통신시 서버로부터 받은 응답 결과를 웹 브라우
저에 반영하지 않고 JavaScript로 처리할 수 있도록 고안된 통신 방식
• 서버와의 통신은 정상적으로 이루어지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능
• 오늘날 웹 애플리케이션을 개발할 때 많이 사용하는 통신 기술
• Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능

✏️ jQuery Ajax 통신

getText

<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>

<script>
	function getText() {
		$.ajax({
			url : "data1.txt",
			type : "post",
			dataType : "text",
			success : function(rec_data) {
				$("#result").text(rec_data);
			}
		});
	}
</script>

getHtml

function getHtml(){
		$.ajax({
			url : "data2.html",
			type : "post",
			dataType : "html",
			success : function(rec_data){
				$("#result").html(rec_data);
			}
		});
	}

getXml

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/>");
				});				
			}
		});
	}

getJson

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/>");
			}
		});
	}

• Ajax 통신은 브라우저의 종류나 버전에 따라 작성하는 코드가 다름
• jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공
• load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
• get : get 방식으로 ajax 통신
• post : post 방식으로 ajax 통신
• ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수

✏️ 정리

ajax 통신을 사용하면 화면의 변경 없이 서버와 통신할 수 있다.

🍃 어려웠던 점 or 해결못한 것

ajax 통신을 이용해서 실행 시 연결이 안됌

🍀 해결방법 작성

✏️ 어떻게 해결을 했는가?
파일명이 잘못 기입되어 있음.

~~✏️ 이렇게 이해를 했다~~
~~✏️ 어디까지 이해했지?~~
~~✏️ 다음에 시도해볼 방법~~

🌷 학습 소감

애니메이션 구현과 Ajax 통신을 활용하여 다양한 기능을 구현할 수 있어 재밌었다

XIXI

Life is experience:)

이전 포스트

[JQuery] Form

다음 포스트

[JQuery] CSS/Ajax

대구AI스쿨

🌱 CSS

✏️CssClass

✏️CssFunction

🌱 태그 탐색

✏️태그

✏️부모 태그

✏️자식 태그

✏️형제 태그

✏️Next

✏️Pre

✏️정리

🌱 jQuery 효과

✏️개념

✏️hide/show/toggle

✏️Fade

✏️Slide

✏️Callback

✏️정리

🌱 애니메이션

✏️개념

✏️Animate

✏️정리

🌱 표준 통신

✏️개념

✏️문제

✏️ Ajax 통신

✏️ jQuery Ajax 통신

getText

getHtml

getXml

getJson

✏️ 정리

🍃 어려웠던 점 or 해결못한 것

🍀 해결방법 작성

🌷 학습 소감

[JQuery] Form

[React] 설치

0개의 댓글