06.23 목 라이브러리 소개

이재빈·2022년 6월 23일

AI스쿨_JS

목록 보기

13/18

Css

Cssclass

<script>
	function addClass(){
		$("#a1").addClass("active");
	}
	function removeClass(){
		$("#a1").removeClass("active");
	}
	function toggleClass(){
		$("#a1").toggleClass("active");
	}
    </script>

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","white")
	}
</script>

Searchnode

기준을 중심으로 작용 ( 기준포함 X )

부모 자식간

ascending

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

decending

<script>
$(function(){
	$("#a1").children().css("border-color","red");
	$("#a1").children(".c1").css("border-width","4px");
	$("#a1").find(".c3").css("border-style","dotted");
});
</script>

같은 계층에서 찾아가는 것

sibling

<script>
$(function(){
$("#a1").siblings().css("border-color", "red");
$("#a1").siblings(".c2").css("border-style", "dotted");
});
</script>

<script>
$(function(){
$("#a1").next().css("border-color", "red");
$("#a1").nextAll().css("border-style", "dotted");
$("#a1").nextUntil("#a2").css("border-width", "4px");
});
</script>

<script>
$(function(){
$("#a1").prev().css("border-color", "red");
$("#a1").prevAll().css("border-style", "dotted");
$("#a1").prevUntil("#a2").css("border-width", "4px");
});
</script>

Effect

hide show toggle

<script>
function div_hide(){
	$("#a1").hide();
	$("#a1").hide(1000); //1000밀리초 = 1초
	$("#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>

fade

<script>
 function div_fadeout(){
	 $("#a1").fadeOut(3000);
 }
 function div_fadein(){
	 $("#a1").fadeIn("slow");
 }
 function div_fadetoggle(){
	 $("#a1").fadeToggle("fast");
 }
 function div_fadeto(){
	 $("#a1").fadeTo("slow",0.3);
 }
</script>

slide
아래 -> 위로 올라감

<script>
	 function div_slideup(){
		 $("#a1").slideUp("slow")
	 }
	 function div_slidedown(){
		 $("#a1").slideDown("fast")
	 }
	 function div_slidetoggle(){
		 $("#a1").slideToggle(2000)
	 }
</script>

callback
실행 후 무언가를 실행

<script>
function test_callback(){
	$("#a1").hide("slow",function(){
		alert("effect end");	
	});
}
</script>

Animation

jQuery 기본

<script>
	function setSize(){
		$("#a1").animate({
			width : 400,
			height: 400
		}, "slow");
	}
	function setOpacity(){
		$("#a1").animate({
			opacity : 0.5
		},"slow");
	}
	//css에서 position이 정의되야 사용가능
	function setPosition(){
		$("#a1").animate({
			left : 100,
			top : 100
		}, "slow")
	}
    </script>

jQuery 2y? 에서 가능

	function setBackgroundColor(){
		$("#a1").animate({
			backgroundColor: "red"
		},"slow")
	}

일괄설정

    <script>
	function setTotal(){
		$("#a1").animate({
			width: 400,
			height: 400,
			opacity: 0.5,
			left: 100,
			top:100
		},"slow")
	}
    </script>

순차적 설정
.delay()로 딜레이를 줄 수 있음

 <script>
	function setSequence(){
		$("#a1").animate({
			width: 400,
			height: 400
			},"slow").delay(1000).animate({
				left: 100,
				top: 100
		},"slow").delay(500).animate({
			opacity: 0.2
		},"slow");
	}
</script>

Ajax 통신

화면은 변경되지 않고 화면의 일부분만을 변경하는 등의 작업
오늘날 웹 애플리케이션 개발할 때 많이 사용하는 통신 기술
Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능
브라우저 종류나 버젼에 따라 작성하는 코드가 다름
=>jQuery는 개발자에게함수를 만들어 제공

load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
get : get방식으로 ajax통신
post: post방식
ajax: Ajax통신을 위한 종합적인 모든 기능을 제공하는 함수

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

XML은 정확한 위치를 찾기 위해 코드가 길어짐

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