[새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 3 | JS - 이벤트, jQuery - 메소드(1)

이벤트

addEventListener

- 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드

• click : 클릭
• mouseover : 요소에 커서를 올렸을 때
• mouseout : 마우스가 요소를 벗어날 때
• mousedown : 마우스 버튼을 누르고 있는 상태
• mouseup : 마우스 버튼을 떼는 순간
• focus : 포커스 됐을 때
• blur : 포커스가 벗어나는 순간
• keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
• keydown : 키를 누르는 순간에만 발생
• keyup : 키를 눌렀다가 떼는 순간
• load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료되었을 때
• resize : 스크롤이 발생할 때
• unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
• change : 폼 필드의 상태가 변경되었을 때, input에 변경이 일어나고 다른 요소를 클랙해서 focus out 시키면 발생
• input : 현재 input에 변경사항이 존재하는 순간을 계속 인식, 실시간으로 바로 반영할 수 있다.

 

---

 

jQuery

jQuery란?

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.

 

jQuery의 장점

• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원이 가능하다.
• HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능하다.
• 같은 동작을 하더라도 더욱 짧게 구현이 가능하다.
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능하다.

 

jQuery 요소 선택

$('선택자');

 

jQuery 메소드

값 가져오기 & 설정하기

값 가져오기
$('선택자').val();

값 설정하기
$('선택자').val('설정할 값');

 

text 변경하기

$('선택자').text('글자');

 

html 변경하기

$('선택자').html('html코드');

 

속성 변경하기

$('선택자').attr('속성', '속성값');

 

style 변경하기 & style 속성값 가져오기

style 변경하기
$('선택자').css('속성', '속성값');

style 속성값 가져오기
$('선택자').css('속성');