DAY-45 jquery event 활용

🚀 jquery event 활용

2022-05-03

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

🔔 스크롤(화면) 이동

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• 현재 스크롤의 위치를 알려면 (특정요소).prop(“scrollHeight”)를 줘야한다
• 스크롤의 위치를 변화시키려면 scrollTop()이라는 메서드를 사용해야 한다
• 화면이 위로 올라가기 위해서는 scrollTop()이 0이어야 하고 화면이 아래로 가기 위해선 scrollTop()이 현재 스크롤의 높이인 (특정요소).prop(“scrollHeight”)이어야 한다

🔔 엔터키 감지

• keyCode가 13이어야 한다
• 해당 글자의 keyCode를 아는 방법

console.log(e.keyCode);

🔔 jquery effect

• slide down과 slide up을 사용해야 수직으로 변경된다

• hide와 show를 사용하면 구석으로 변경

• animation함수를 이용할 수 있다

slide down / slide up 예제

1️⃣

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• slideDown() -> display none 속성을 display block 으로 변경
• slideUp() -> display none으로 변경

2️⃣

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

hide / show / toggle 예제

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.