JQuery [ Hover, $(document).on, AddClass, RemoveClass ]

Hover

• jQuery 에서 hover 는 이벤트가 아니라 제공해주는 메소드
  -> $("선택자").bind("hover",function(event){}) 인 경우 에러

$("선택자").hover(function(e){	// mouseover
		....
	}, function(e){				// mouseout
		...
	}
})		// end of $("선택자").hover(function(e){})-----------	

---

★ 중요 ★

$(document).on

• $(document).on("이벤트종류", "선택자", function(){})
• 선택자가 태그에 직접 기술한 것이라면 선택자를 제대로 잡을 수 있다.
• JS 에서 선택자를 기술한 경우 잘 못 잡는 경우가 발생하기 때문에 이 기술을 이용

$(document).on("mouseover","선택자", function(){
	...
}

---

AddClass, RemoveClass

• css 설정하기위해 class 지정해주기
• AddClass : css 파일에서 스타일을 설정
• RemoveClass : css 파일에서 스타일을 설정 해제
• 주의.
  -> width 와 height 는 적용되지 않아 설정할 시 기본방법으로 진행해야 된다.

// css 설정 (기본)
$("선택자").css({"background-color":"navy", "color":"white"});
// addclass 를 이용한 css 설정
$("선택자").addClass('클래스명');

// css 설정값 원상 복구하기
$("선택자").css({"background-color":"", "color":""});
$("선택자").removeClass('클래스명');

---

정리

• 01_eventHandling -> chap05_mouseover_mouseout_hover
  -> 05_hover.html, 05.js, 05.css

• 01_eventHandling -> chap06_addClass_removeClass_accordion_tab_SeatReservation
  -> 01_css_addClass_removeClass_document_on.html, 01.js, 01.css