jQuery-4일차
학습한 내용
jQuery 실습 - css제어, 여러가지 효과
css 제어
• jQuery는 태그의 css를 제어할 수 있는 함수를 제공
• addClass : css class를 설정
• removeClass : css class를 제거
• toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거
실습1
<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>
- 추가하기를 누르면 설정한 css 추가
- 제거하기 누르면 제거
- toggle은 두 기능을 한 버튼에 적용
• css : css 속성을 가져오거나 설정
<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>
- 다음과 같이 설정한 css를 적용시켜 줄 수도 있고, 읽어올 수도 있음
- css 설정하는 것은 기존에 했던 방법이랑 동일
태그 탐색
- jQuery는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있다.
- 태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 한다.
부모 태그 탐색
• parent : 선택된 태그의 부모 태그를 선택
• parents : 선택된 태그의 모든 부모 태그를 선택
• parents(선택자2) : 선택된 태그의 모든 부모 태그 중 선택자2에 해당하는
태그들이 선택
• parentsUntil(선택자2) : 선택된 태그에서 선택자2 태그까지의 모든 부모태
그들이 선택
<script>
$(function(){
//a4 기준으로
$("#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"); //c2
});
</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 : #a4인 div4기준으로 부모인 div 3 빨간색 적용
- parents : #a4인 div4기준으로 부모인 div 1, 2, 3 굵기 적용
- parents(선택자) : #a4인 div4기준으로 부모들 중 c1클래스인 div2 dashed적용
- parentsuntil(선택자) : #a4인 div4기준으로 부모들 중 c1클래스 div2까지의 사이 div3 dotted 적용
자식 태그 탐색
• children : 선택된 태그의 자식 태그들을 선택
• children(선택자2) : 선택된 태그의 자식 태그들 중 선택자2에 해
당하는 태그들이 선택
• find(선택자2) : 선택된 태그의 하위 태그들 중 선택자2에 해당
하는 태그들이 선택
<script>
$(function(){
//a1 기준으로
$("#a1").children().css("border-color", "red");
$("#a1").children(".c1").css("border-width", "4px");
$("#a1").find(".c3").css("border-style", "dashed");
});
</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 : #a1인 div기준으로 자식인 div1, 2 빨간색 적용
- children(선택자) : #a1인 div기준으로 자식 중 c1클래스 div1 굵기 적용
- find : #a1인 div기준으로 자식 중 c3클래스 div1-2를 찾아 dashed적용
같은 계층의 태그 선택
• siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택
• siblings(선택자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 : #a1인 div3기준으로 같은 계층(형제)인 div1,2,4,5 빨간색 적용
- siblings(선택자) : #a1인 div3기준으로 같은 계층 중 c2인 div2, 5 dotted적용
같은 계층의 태그 선택
• next : 선택된 태그 다음 태그가 선택
• nextAll : 선택된 태그의 다음 태그들이 모두 선택
• nextUntil(선택자2) : 선택된 태그 다음 태그들 중 선택자2 까지의 모
든 태그들이 선택
<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 : #a1인 div2 기준으로 다음 div3 빨간색 적용
- nextAll : #a1인 div2 기준으로 다음 모두인 div3,4,5 dotted
- nextUntil : #a1인 div2 기준으로 #a2 div5까지인 div3,4 굵기 변경
• prev : 선택된 태그 이전 태그가 선택
• prevAll : 선택된 태그 이전의 모든 태그가 선택
• prevUntil(선택자2) : 선택된 태그의 이전 태그들 중 선택자2 까지의 모든 태그들이 선택
<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 : 기준 a1인 div4이전인 div3을 빨간색
- prevAll : 기준 a1인 div4이전인 div1,2,3 모두 dotted
- prevUntil : 기준 a1인 div4이전에서 a2인 div1까지인 div2,3 굵기 변경
jQuery 효과
• hide : 선택된 태그를 사라지게 함
• show : 선택된 태그를 나타나게 함
• toggle : 사라지거나 나타나는 상태를 전환
<script>
function div_hide(){
$("#a1").hide();
}
function div_show(){
$("#a1").show();
}
function div_toggle(){
$("#a1").toggle();
}
</script>
- hide누르면 사라지고 show하면 나타나고
두 기능을 한 버튼으로 한 것이 toggle - hide(시간), show(시간), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타남
- hide(1000) : 1000은 1s의미
- 시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은
시간이 선택됨 - hide("slow"), hide("fast")
• fadeIn : 페이드 효과를 통해 나타나게 한다.
• fadeout : 페이드 효과를 통해 사라지게 한다.
• fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환
한다.
• fadeTo : 지정된 투명도 만큼 페이드 아웃한다. (1이 100%)
<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>
• slideUp : 위로 슬라이드 되면서 사라진다.
• slideDown : 아래로 슬라이드 되면서 나타난다.
• slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태
를 전환한다.
<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>
- 슬라이드 효과를 볼 수 있고, 토글 버튼으로 두 기능을 합칠 수도 있다.
callback 함수
• 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록할 수 있다.
<script>
function test_callback(){
$("#a1").hide("show", 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>
- 아래 div영역을 slow천천히 hide 숨기고 함수를 통해 alert창 나타내기
애니메이션
• 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").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>
사이즈 설정
투명도 조절
위치 이동
종합 설정
- animate안에 여러 기능을 넣어 설정
순차 설정
- animate({})하고 끝내는 것이 아닌 .을 통해 이어 준다.
- animate({}).animate({})
- 조금의 딜리에이는 있지만 추가 딜레이를 넣어 주고 싶은 경우 delay사용
- animate({}).delay(1000).animate({})
Ajax 통신
• Ajax 통신은 서버와 통신시 서버로 부터 받은 응답 결과를 웹 브라우저에 반영하지 않고 JavaScript로 처리할 수 있도록 고안된 통신 방식
• 이를 이용하면 서버와의 통신은 정상적으로 이루어 지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능
• Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능
• load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
• get : get 방식으로 ajax 통신
• post : post 방식으로 ajax 통신
- 실습하기에 앞서 로컬이라 응답 파일을 만들어 줘야함.
- 실제로는 받았을 때 요청한 데이터가 성공했을 때는 어떻게 하고 못했을 때는 어떻게 해라 만들어 주면 됨
- data1.text
문자열 입니다.text 불러오기
<script>
function getText(){
$.ajax({
url : "data1.txt",
type : "post",
dataType : "text",
success : function(rec_data){
$("#result").text(rec_data);
}
});
}
</script>
- data2.html
<a href="http://www.google.com">google</a>html 불러오기
<script>
function getHtml(){
$.ajax({
url : "data2.html",
type : "post",
dataType : "html",
success : function(rec_data){
$("#result").html(rec_data);
}
});
}
</script>- text 불러오는 형식과 동일
- 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>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>");
});
}
});
}
</script>- xml은 배열로 받아 오기에 작업이 필요
- 객체를 저장할 변수가 필요
- 불러올 데이터에 접근해야 함(자식 태그 찾는 find 사용)
- 배열이라 하나씩 찍어 보는 것이 필요
- 그 중 텍스트를 가져와서 보여줘야 함
- data4.json
{
"data1" : 100,
"data2" : 11.11,
"data3" : "문자열"
}json 불러오기
<script>
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>- json은 키, 값으로 이루어져 있어 바로 불러와도 됨.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
해결방법 작성
학습 소감
짧았던 jQuery시간이 끝이 났다. 많은 양을 한꺼번에 머리 속에 집어 넣을려고 하니 상당히 어려웠다. 학습할 때는 아~ 하고 넘어가는데, 막상 자료없이 작성하려고 하면 막막해진다. 눈으로 보는 복습이 아닌 코드를 작성하는 복습방법이 필요하다.
예비 프론트엔드 개발자