학습한 내용
css 제어
• jQuery는 태그의 css를 제어할 수 있는 함수를 제공
• addClass : css class를 설정
• removeClass : css class를 제거
• toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거
• css : css 속성을 가져오거나 설정
<script>
function addClass(){
$("#a1").addClass("active")
}
function removeClass(){
$("#a1").removeClass("active")
}
function toggleClass(){
$("#a1").toggleClass("active")
}
</script><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>부모 태그 탐색
• parent : 선택된 태그의 부모 태그를 선택
• parents : 선택된 태그의 모든 부모 태그를 선택
• parents（선택자2） : 선택된 태그의 모든 부모 태그 중 선택자2에 해당하는 태그들이 선택
• parentsUntil（선택자2） : 선택된 태그에서 선택자2 태그까지의 모든 부모태 그들이 선택
<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>자식 태그 탐색
• children : 선택된 태그의 자식 태그들을 선택
• children（선택자2） : 선택된 태그의 자식 태그들 중 선택자2에 해 당하는 태그들이 선택
•find（선택자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>같은 계층의 태그 선택
• siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택
• siblings（선택자2） : 선택된 태그와 같은 계층의 모든 태그 중 선택자2 에 해당하는 태그들이 선택
• next : 선택된 태그 다음 태그가 선택
• nextAII : 선택된 태그의 다음 태그들이 모두 선택
• nextUntil（선택자2） : 선택된 태그 다음 태그들 중 선택자2 까지의 모 든 태그들이 선택• prev : 선택된 태그 이전 태그가 선택
• prevAII : 선택된 태그 이전의 모든 태그가 선택
• prevUntil（선택자2） : 선택된 태그의 이전 태그들 중 선택자2 까 지의 모든 태그들이 선택
<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>jQuery 효과
• hide : 선택된 태그를 사라지게 함
• show : 선택된 태그를 나타나게 함
• toggle : 사라지거나 나타나는 상태를 전환
• hide（시간）, show（시간）, toggle（시간） : 지정된 시간만큼 애니메이션 효과가 나타남
• 시간은 "slow"라는 문자열을 넣어주면 적당히 느린 시간, "fast"를 넣어주면 적당히 짧은 시간이 선택됨• fadeln : 페이드 효과를 통해 나타나게 한다.
• fadeout : 페이드 효과를 통해 사라지게 한다.
• fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환 한다.
• fadeTo : 지정된 투명도
• slideUp : 위로 슬라이드 되면서 사라진다.
- slideDown : 아래로 슬라이드 되 면서 나타난다.
• slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태 를 전환한다.
<script>
function div_hide(){
$("#a1").hide();
}
function div_show(){
$("#a1").show();
}
function div_toggle(){
$("#a1").toggle();
}
</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); //투명도 30%
}
</script><script>
function div_slideup(){
$("#a1").slideUp("slow")
}
function div_slidedown(){
$("#a1").slideDown("slow")
}
function div_slidetoggle(){
$("#a1").slideToggle("slow")
}
</script>callback 함수
• 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록 할 수 있다.
<script>
function test_callback(){
$("#a1").hide("slow", function(){
alert("effect end")
})
}
</script>애니메이션
• jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있도록 지원
• 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 줌
• Animate : 지정된 css 속성을 애니메이션 효과와 함께 지정
• Animate({}） : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정
<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");
}
</script>• animate 함수를 사용하면 애니메이션 효과를 만들어 사용할 수
있다.
•jQuery UI 라이브러리를 사용하면 좀 더 다양한 효과를 만들 수 있다.
표준 웹 통신
• 웹 브라우저는 서버에게 파일을 요청
• 이 때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달
• 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리
표준 웹 통신의 문제점
• 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게되면 브라우저가 스스로 처리하려고 함
• 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 됨
• 만약 응답 결과가 html 코드이면 html 코드를 통해 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변경되어 처리, 즉 웹 브라우저는 처리할 수 있는 데이터를 받게 되면 화면이 변경
Ajax 통신
• Ajax 통신은 서버와 통신시 서버로 부터 받은 응답 결과를 웹 브라우 저에 반영하지 않고 JavaScript로 처리할 수 있도록 고안된 통신 방식
• 이를 이용하면 서버와의 통신은 정상적으로 이루어 지며 화면은 변 경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능
• 오늘날 웹 애플리케이션을 개발할 때 많이 사용하는 통신 기술
• 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);
}
});
}
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>• Ajax 통신은 브라우저의 종류나 버전에 따라 작성하는 코드가 다르다.
• 이에 jQ니ery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공
• load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
• get : get 방식으로 ajax 통신
• post : post 방식으로 ajax 통신
• ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수
• ajax 통신을 사용하면 화면의 변경없이 서버와 통신할 수 있다.
어려웠던 내용
마지막에 $.ajax 부분에서 .을 빼고 적는 바람에 아무 반응도 안나타난 문제가 있었다. 다행이도 Json 부분을 타이핑하다가 이것만 실행되는 걸 보고 .이 빠진 것을 발견하고 해결했다.
학습 소감
제이쿼리는 간단명료하고 코드가 잘 보이는거같아서 좋았는데 오늘이 마지막 시간이라 조금 아쉬웠다.
