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

16
jQuery 라이브러리

Upload: others

Post on 29-Mar-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

jQuery 라이브러리

Page 2: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

이벤트

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

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

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

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

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

22017-05-26

Page 3: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

이벤트모델

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

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

32017-05-26

DOM Level 설명

DOM Level 0인라인이벤트모델

고전이벤트모델

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

표준이벤트모델

Page 4: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

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

42017-05-26

Page 5: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

예제 2. 고전이벤트모델

52017-05-26

Page 6: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

이벤트객체

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

62017-05-26

이벤트객체

예제 3. 이벤트객체

Page 7: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

이벤트제거

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

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

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

72017-05-26

예제 4. 이벤트제거

Page 8: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

jQuery 라이브러리

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

브러리

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

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

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

– 쉬운 시각적 효과 구현

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

82017-05-26

Page 9: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

jQuery 라이브러리설정

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

92017-05-26

Page 10: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

jQuery 라이브러리설정

CDN(Content Delivery Network) 호스트 사용

102017-05-26

Page 11: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

예제 5. jQuery 문서객체선택

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

112017-05-26

Page 12: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

jQuery 문서객체조작

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

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

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

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

122017-05-26

메소드이름 설명

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

Page 13: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

예제 6. jQuery 문서객체조작

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

132017-05-26

Page 14: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

스타일조작

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

142017-05-26

메소드이름 설명

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

Page 15: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

예제 7. 스타일조작

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

152017-05-26

Page 16: jQuery 라이브러리 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture10.pdf · 2017-06-15 · jQuery 문서객체조작 jQuery 라이브러를 사용해서문서객체의속성을조작할때는attr()

감사합니다