31번 개발일지(대구AI스쿨 66일차)

학습한 내용

jQuery 4일차. CSS 제어, 태그 탐색, jQuery 효과, 애니메이션, Ajax 통신에 대해서 학습했다.

학습소감

1️⃣🟢 jQuery Ajax 통신을 통해서 화면의 변경 없이 서버와 통신할 수 있다는 게 편리했다.

	<script>
  // text 파일을 받아오는 Ajax
		function getText() {
			$.ajax({
				url : "data1.txt",
				type : "post",
				dataType : "text",
				success : function(rec_data) {
					$("#result").text(rec_data);
				}
			});
		}
  // html 파일을 받아오는 Ajax
		function getHtml() {
			$.ajax({
				url : "data2.html",
				type : "post",
				dataType : "html",
				success : function(rec_data) {
					$("#result").html(rec_data);
				}
			});
		}
  // xml 파일을 받아오는 Ajax
		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/>");
					});
				}
			});
		}
  // json 파일을 받아오는 Ajax
		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>

2️⃣🟢 애니메이션 여러개를 한꺼번에 설정할 수도 있고 순서대로 실행되도록 설정할 수도 있다.

// 한꺼번에 설정한 애니메이션
		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");
		}