Animating Effect
<body>
<img src="<!--이미지 경로-->" id="img1">
<div id="one"></div>
</body>- 애니메이팅을 부여할 이미지와 <div>상자 생성
<script>
$("#img1").animate({width:'200px',opacity:'0.5'},2000); //slow,fast,2000
$("#img1").animate({width:'100px',opacity:'1'},'slow','linear',function(){
//애니메이션이 끝난후 처리할것들
$(this).after("<b>The End!!</b>");
});
$("#one").animate({"left":"+=100"},2000).animate({"borderWidth":"10px"},2000).
animate({"width":"150px"},2000).animate({"height":"150px"},2000);
</script>- $(대상 태그).animate({스타일}, 지속 시간, 시간당 속도 함수, 결과 함수)
- {스타일}은 필수 입력 조건이며, 나머지 조건은 생략 가능
- 시간당 속도 함수 종류 : swing(시작과 끝에서는 느리게, 중간은 빠르게), linear(일정 속도)
- 여러 animate() 함수를 부여하면 앞에서부터 순차적으로 효과 적용
<script>
//애니메이션_box1이 너비가 100씩 커지고 선굵기 20px 투명도_3초동안
$("#box1").animate({width:'+=100px',borderWidth:'20px',opacity:'0.5',marginLeft:"300px"},3000);
//제자리
$("#box1").animate({width:"-=100px",borderWidth:'1px',opacity:'1',marginLeft:"0px"},3000);
</script>- animate() 함수에서 스타일 부여 시 결과 값이 아닌 변화 값을 지정하기 위해서는 “+=변화 값”, “-=변화 값”과 같이 입력
<body>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</body><script>
$(".box2").each(function(i,element){
$(this).delay(i*500).animate({left:"+=300px"},'slow');
});
//이미지 사라졌다 잠시 멈춘다, 그리고 다시 나타남
$("#img1").slideUp(2000).delay(3000).slideDown(2000);
</script>- delay() 함수는 인자 값만큼 대상 태그의 효과를 지연
- 먼저 부여된 효과부터 순차적으로 적용
Events on Element that will be happened
on()
- 이벤트로 인해 나중에 발생한 요소(동적 생성 요소)에 대한 이벤트 부여 시 사용
- 기존에 존재하는 요소에 대해서도 적용 가능
- 사용법 : $(document).on(이벤트, 지정자, 결과 함수);
- 지정자는 선택자와 유사한 의미
<body>
<button type="button" id="add">+</button>
</body>- 기존에 존재하는 버튼 1개
<script>
$("#add").click(function(){
$("body").append("<button id='add'>+</button>");
});
</script>- 기존 방식으로 이벤트 부여
- 클릭 시마다 새로운 + 버튼 생성되지만, 이로 인해 생성된 버튼은 이벤트 부여 불가
<script>
$(document).on("click","button[id='add']",function(){ //이경우 id가 여러개 생성될수있음
$("body").append("<button id='add'>+</button>");
})
</script>- 동적 이벤트 방식
- 지정자 입력 방식 : “태그[속성=’속성 값’]” (속성과 그 값은 불필요 시 생략 가능)
- 클릭 이벤트로 인해 생성된 버튼 또한 동일한 클릭 이벤트(+버튼 생성) 부여
- 동적 방식으로 생성된 태그에는 동일한 id가 여러개 발생 가능
<body>
<ul id="mylang">
<li>Java</li>
<li>Oracle</li>
<li>Jsp</li>
<li>Mysql</li>
</ul>
</body>- 이벤트 발생을 위한 리스트 생성
<script>
//정적클릭이벤트
$("#mylang").children().click(function(){
$(this).remove();
});
</script>- 기존 방식(정적 이벤트)으로 각 리스트 요소 클릭 시 각 요소 제거하는 이벤트 부여
<script>
//li를 이벤트로 추가
$("#mylang").append("<li>JQuery</li>");
//동적클릭이벤트
$(document).on("click","li",function(e){
$(e.target).remove(); //this,e.target은 li
});
</script>- ‘JQuery’라는 리스트를 이벤트로 추가 (이벤트로 생성된 새로운 요소이므로 정적 이벤트 방식으로는 이벤트 부여 불가)
- 따라서 동적 이벤트 방식으로 이벤트 부여
- 동적 이벤트 방식에서 결과 함수의 인자 값(e)은 지정자의 element 의미
- 인자(e).target으로 this(지정자)에 해당하는 요소 지정 가능 (e.target=this 여기서는 <li>태그)
on() Exercise
- 기존 버튼 1개로 시작
- 기존 버튼 클릭 시 새로운 버튼 2개 생성(동적 이벤트)
- 새로 생성된 버튼 클릭시 모종의 이벤트 발생하는 예제
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="result"></div>
</body>- 공백의 <div>상자 5개 생성
<script>
var theater="",movie="",ppl="";
//#one에 버튼추가
var b="<button type='button' id='btn1' class='a'>영화예매</button>";
$("#one").append(b);
//버튼1이벤트
$("#btn1").click(function(){
var b2="<button type='button' id='btn2' class='b'>극장선택</button>";
b2+=" <button type='button' id='btn3' class='c'>영화선택</button>";
$("#two").html(b2);
});
</script>- 최종 출력할 문자열들 공백의 문자열 변수로 선언
- one <div>에 기존 버튼 1개 추가(정적 이벤트)
- 기존 버튼(btn1) 클릭 시 two에 버튼 2개(btn2, btn3) 생성(정적 이벤트)
<script>
//버튼2 는 나중에 동적생성이므로 on 이벤트
$(document).on("click","#btn2",function(){
var s="<h3 class='theater'>CGV강남점</h3>";
s+="<h3 class='theater'>MEGABOX청담</h3>";
s+="<h3 class='theater'>CGV왕십리</h3>";
s+="<h3 class='theater'>MEGABOX코엑스</h3>";
$("#three").html(s);
});
//버튼3
$(document).on("click","#btn3",function(){
var s="<h3>인어공주</h3>";
s+="<h3 class='movie'>엘리멘탈</h3>";
s+="<h3 class='movie'>귀공자</h3>";
s+="<h3 class='movie'>분노의질주</h3>";
s+="<h3 class='movie'>범죄도시</h3>";
$("#three").html(s);
});
</script>- btn2와 btn3는 동적 이벤트로 생성되었으므로 동적 이벤트만 부여 가능
- 두 버튼 모두 three라는 동일 <div>요소 값을 변경하므로 각각 클릭 시 다른 요소 대체
<script>
//영화관,영화제목 클릭시 이벤트
$(document).on("click","#three h3",function(){
//클릭한h3태그에서 class를 얻는다
var select=$(this).attr("class");
if(select=="theater")
theater="극장명:"+$(this).text();
else
{
movie="영화명:"+$(this).text();
//인원수
var tag="";
tag+="<input type='number' min='1' max='5' value='0' id='ppl'><br>";
//시간배열_라디오박스
var times=["09:00","13:30","15:20","18:50","20:30"];
$.each(times,function(i,elt){
tag+="<input type='radio' name='time' value='"+elt+"'>"+elt+"<br>";
});
$("#four").html(tag);
}
$("#result").html(theater+"<br>"+movie);
});
</script>- btn2, btn3 클릭 시 생성된 <h3>태그의 class 속성을 추출하여 if~else문으로 구분
- number 타입의 버튼 생성 위해 문자열(tag) 누적
- 배열의 요소를 반복문(each)을 통해 버튼(name=time) 생성 위해 tag 누적
<script>
$(document).on("change","#ppl",function(){
ppl="인원수:"+$("#ppl").val();
$("#result").html(theater+"<br>"+movie+"<br>"+ppl);
});
$(document).on("click","input[name='time']",function(){
var t="시간:"+$(this).val();
$("#result").html(theater+"<br>"+movie+"<br>"+ppl+"<br>"+t);
});
</script>- 마지막 생성된 버튼 2개 클릭 시 출력
초보개발자