Jquery 복습 - 이벤트 1

참고사이트: https://www.w3schools.com/jquery/jquery_animate.asp

//실행순서 정리

1. 순서대로 한줄한줄 HTML을 읽어가며 dom parsing을 한다.
그래서 Dom load전에는 DOM element 접근 메서드를 사용 할 수 없다. 예를들어 

<script>
  var divtest = document.querySelector("div#test");
  if(divtest == null){
      alert('divtest is null');
  }else{
      alert('divtest is not null');
  }
</script>

<div id="test">
  helloworld!
</div>

스크립트가 어디에 위치했느냐에 따라서 동작이 다르다-

2.$(document).ready() 돔파싱 끝나면 실행할 메서드. 이벤트핸들러를 등록하는듯하다.
3. 실행
4. image resource 등등.. 로딩
5. $(window).load() 

//메서드 정리

$(document).ready(function(){ 
/*그래서 이벤트 핸들러는 ready의 익명함수안에 넣습니다.*/
}) 
//1) 클릭하면 숨겨진다. 
$("p").click(function(){ 
	$(this).hide(); 
}) 
//2) 더블클릭하면 숨겨진다. 
$("p").dblclick(function(){ 
	$(this).hide(); 
}); 
//3) 마우스커서를 올려놓으면 alert 발생 
$("#p1").mouseenter(function(){ 
	alert("You entered p1!"); 
}); 

//4) 마우스 커서를 떼면 alert 발생 
$("#p1").mouseleave(function(){ 
	alert("Bye! You now leave p1!"); 
}); 

//5) 마우스를 클릭하면 alert 발생 
$("#p1").mousedown(function(){ 
	alert("Mouse down over p1!"); 
}); 

//6) 마우스를 클릭하고 떼는순간 alert 발생 
$("#p1").mouseup(function(){ 
	alert("Mouse up over p1!"); 
}) 

//7) 마우스를 올려놨을때, 뗐을때 alert 발생 
$("#p1").hover(function(){ 
	alert("You entered p1!"); 
}, 
function(){ 
	alert("Bye! you now leave p1!"); 
}); 

//8) focus를 얻었을때, 잃었을때 각각 배경색으로 초록, 빨강 지정 
$("input").focus(function(){ 
	$(this).css("background-color", "green"); 
}); 
$("input").blur(function(){ 
	$(this).css("background-color", "red"); 
}); 

//9) 여러개의 이벤트 핸들러 등록 가능 
$("p").on({ 
  mouseenter: function(){ 
 	 $(this).css("background-color", "red"); 
  }, 
  mouseleave: function(){ 
 	 $(this).css("background-color", "yellow"); 
  }, 
  click: function(){ 
  	$(this).css("background-color", "green"); 
  }
}); 

//10) 딜레이를 주며 숨기고.. 숨김이 끝나면 callback 호출 
$("button").click(function(){ 
  $("p").hide(1000, function(){ 
  	alert('test!'); 
  }) 
}) 

//11) 숨겼다, 나타냈다..처리... slow, fast 혹은 숫자로 speed설정이 가능하며 마찬가지로 끝나면 실행할 callback을 등록 할 수 있다. 
-> 특이한점은 사라졌다, 나타났다 하며 callback을 두번 타는것 같다..? 
$("button").click(function(){ 
	$("p").toggle(); 
});
//12) 천천히 나타나게 처리.. 주의할점은, 초기에 나타날 element가 style="display:none"이 되어있어야 한다는 점이다. 
$("button").click(function(){ 
  $("#div1").fadeIn(); 
  $("#div2").fadeIn("slow"); 
  $("#div3").fadeIn(3000); 
}); 


//13) 마찬가지로 천천히 나타나게 처리... 특이한점은 *사라지면서 차지했던 자리도 같이 사라진다* 
$("button").click(function(){ 
  $("#div1").fadeOut(); 
  $("#div2").fadeOut("slow"); 
  $("#div3").fadeOut(3000); 
}); 

//14) 토글처리.  
$("button").click(function(){ 
  $("#div1").fadeOut(); 
  $("#div2").fadeOut("slow"); 
  $("#div3").fadeOut(3000); 
}) 

//15) 완전히 사라지지는 않고, 특정 수치[0~1]까지 불투명 하게 만들기. 
//0에 가까울수록 투명하다. 
$("button").click(function(){ 
  $("#div1").fadeTo("slow", 0.009); 
  $("#div2").fadeTo("slow", 0.4); 
}) 

//16) slideDown- 클릭하면 스스슥 내려오기 
//#flip은 메뉴버튼이고- #panel은 초기에 display:none되어있다가 flip을 클릭하면 스스슥 내려온다. 
$("#flip").click(function(){ 
  $("#panel").slideDown("slow"); 
}); 

//17) slideUp- 클릭하면 스스슥 올라간다. 
//#flip은 메뉴버튼이고- #panel은 flip을 클릭하면 스스슥 올라간다. 
$("#flip").click(function(){ 
  $("#panel").slideUp("slow"); 
}); 

//18) Slide Toggle- 네가 생각하는 그 동작. 
//참고로, #panel에 display: none;가 있으면, 최초 로딩시 숨겨져있는상태에서 토글이 동작하고, 없으면 그 반대이다. 
$("#flip").click(function(){ 
  $("#panel").slideToggle("slow"); 
})