jquery 라이브러리 - kangwoncs.kangwon.ac.kr/~whcho/2017_spring/practice/lecture10.pdf ·...

jQuery 라이브러리

이벤트

키보드를 누르거나 마우스를 클릭하는 것과 같이 어떠한 현상이 프로그램에게 영향을 미치는 것을 의미

– 마우스, 키보드, HTML 프레임 이벤트, etc.

위 양식에서 onload를 이벤트 속성(event property)라 하며, on을 제외한 load를 이벤트 이름 혹은 이벤

트 타입(event name or type) 이라 함

이벤트 속성에 넣는 함수를 이벤트 리스터 혹은 이벤트 핸들러(event listener or handler) 라고 함

22017-05-26

이벤트모델

문서 객체에 이벤트를 연결하는 것

이벤트 모델은 다음과 같이 DOM Level 버전에 따라 구분할 수 있음

32017-05-26

DOM Level 설명

DOM Level 0인라인이벤트모델

고전이벤트모델

DOM Level 2마이크로소프트인터넷익스플로러이벤트모델

표준이벤트모델

예제 1. 인라인이벤트모델

42017-05-26

예제 2. 고전이벤트모델

52017-05-26

이벤트객체

발생한 이벤트를 자바스크립트를 통해 이벤트와 관련된 정보를 이벤트 객체를 통하여 알 수 있음

62017-05-26

이벤트객체

예제 3. 이벤트객체

이벤트제거

HTML 태그는 기본적으로 몇 가지 이벤트를 가지고 있음

– a태그를 누르면 하이퍼링크로 이동, form 태그로 생성한 제출 버틀을 클릭하면 양식 전송, etc.

어떠한 경우 이러한 기본 태그를 제거할 필요가 있음

72017-05-26

예제 4. 이벤트제거

jQuery 라이브러리

HTML 속 클라이언트 스크립트 언어를 단순화 하도록 설계되어 브라우저 호환성이 있는 JavaScript 라이

브러리

무료로 사용이 가능하며 사용 목적은 다음과 같음

– 쉬운 문서 객체 모델과 관련된 처리 구현

– 쉬운 일관된 이벤트 연결 구현

– 쉬운 시각적 효과 구현

– 쉬운 Ajax 응용 프로그램 개발

82017-05-26

jQuery 라이브러리설정

jQuery 사이트 접속 라이브러리 다운로드

92017-05-26

jQuery 라이브러리설정

CDN(Content Delivery Network) 호스트 사용

102017-05-26

예제 5. jQuery 문서객체선택

jQuery 라이브러리는 다음과 같이 사용

112017-05-26

jQuery 문서객체조작

jQuery 라이브러리를 사용해서 문서 객체의 속성을 조작할 때는 attr() 메소드를 사용

매개변수를 넣는 방법에 따라 속성을 추출할 수도 있고, 지정할 수도 있음

메소드 체이닝: 문서 객체를 조작한 후자기 자신을 다시 반환하는 성질을 이용하여 메소드를 연결함

이러한 장점을 이용하여 중복된 코드를 줄임

122017-05-26

메소드이름 설명

attr() 문서객체의속성조작

예제 6. jQuery 문서객체조작

jQuery 라이브러리는 다음과 같이 사용

132017-05-26

스타일조작

jQuery 스타일 조작할 때는 css() 메소드를 사용

142017-05-26

메소드이름 설명

css() 문서객체의스타일속성조작

예제 7. 스타일조작

jQuery 라이브러리는 다음과 같이 사용

152017-05-26

감사합니다