www.kyobobook.co.kr

교보문고

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery

08 장 . 작고 강한 자바스크립트 jQuery

08 장 . 작고 강한 자바스크립트 jQuery

• 오픈 소스 형태로 제공되기 때문에 jQuery 라이브러리 파일을 포함시켜서 사용

• jQuery 라이브러리를 사용하기 위한 2 가지 방법

CDN 서비스에서 로딩

웹 로컬에서 로딩

section 01. jQuery 기본 다루기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• jQuery 메소드를 사용하려면 jQuery 레퍼 (wrapper) 객체로만 접근할 수 있다 .

• jQuery 레퍼 객체는 jQuery 함수를 사용하여 생성할 수 있다 .

section 01. jQuery 기본 다루기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• $(document).ready() jQuery 는 DOM 에서 엘리먼트를 선택 DOM 은 브라우저 HTML 문서를 완전히 로드한 후에 준비된 상태

(ready) 가 되었을 때에만 생성 HTML 문서가 읽히기 전인 head 부분에 jQuery 를 기술하려

한다면 문서가 로드되고 난 후에 jQuery 가 수행되도록 처리를 미뤄야 함

이때 사용되는 jQuery 가 제공하는 이벤트 핸들러는 $(document).ready()

section 01. jQuery 기본 다루기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• $(document).ready() 문서가 준비상태가 되면 $(document).ready() 이벤트 핸들러에

의해서 콜백함수가 호출

section 01. jQuery 기본 다루기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 셀렉터 (selector) 문서 내에서 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기

위해서 jQuery 에서 제공하는 기술 DOM 안의 특정 엘리먼트에 접근하는 방법은 CLASS 와 ID 를

사용하는 2 가지로 나뉨 .

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• ".class" 셀렉터 class 어트리뷰트 값이 . 다음에 기술한 내용과 일치하는

엘리먼트에 접근 검색하고자 하는 대상이 "class='myClass'" 라면 '$

(.myClass)' 를 사용 .

• "myClass" 란 클래스를 갖는 엘리먼트를 찾아 스타일을 지정하는 문장

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• "#id" 셀렉터 id 어트리뷰트 값이 # 다음에 기술한 내용과 일치하는 엘리먼트에 접근 검색 하고자 대상이 "id='myID'" 라면 '$#myID' 를 사용

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 기본 CSS 셀렉터

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 자주 사용되는 셀렉터

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 자주 사용되는 셀렉터

section 02. 셀렉터

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 03. 원하는 태그를 추출하여 조작하기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 03. 원하는 태그를 추출하여 조작하기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 03. 원하는 태그를 추출하여 조작하기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 03. 원하는 태그를 추출하여 조작하기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 04. 이벤트 처리

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• DOM 탐색 (Traversing) 메소드

section 04. 이벤트 처리

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 이벤트가 발생했을 때 여러분이 의도한 처리를 하기 위해서는 이벤트 핸들러에 처리 함수를 대응시킨 후에 이곳에 원하는 로직을 기술하여 프로그램을 완성

• bind() 함수를 사용하여 해당 엘리먼트에 원하는 이벤트를 적용할 수 있고 unbind() 함수로 제거할 수 있다 .

첫 번째 매개변수에는 click, mousedown, focus, resize 등과 같은 적용 가능한 이벤트 타입

두 번째 매개변수에는 이벤트가 발생했을시 실행되는 함수

section 04. 이벤트 처리

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 그림이나 글씨에 투명도를 주어 선명하게 혹은 흐르게 나타낼 수도 있고 , fade( 현재 화면 위에서 서서히 나타남 ) 나 flip( 현재 화면이 뒤집히면서 사라지고 다음 뷰가 나타남 ) 와 같은 일련의 이펙트 위한 메소드

section 05. 이펙트

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• display 속성이 none 상태인 엘리먼트에 애니메이션 효과를 주어 서서히 나타나도록 하기 위해서 show() 사용

첫 번째 매개변수는 애니메이션을 지속시키는 시간을 설정합니다 . fast 는 200 ms( 밀리 세컨드 , 1/1000 초 ), slow 는 600 ms normal 혹은 fast, slow 이외의 문자열은 400 ms 동안 애니메이션이 진행됩니다 . 0 이상의 숫자 (ms 단위 ) 를 줄 수도 있다 .

두 번째 매개변수는 애니메이션이 종료한 후에 실행할 사용자 정의 함수

section 05. 이펙트

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• hide() 엘리먼트가 사라지는 애니메이션 효과

• toggle() 엘리먼트가 사라졌다 나타나도록 하는 상태를 반복하도록 하는 애니메이션 효과

section 05. 이펙트

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• fadeTo() 대상 엘리먼트를 지정한 투명도 값으로 변경

첫 번째 매개변수는 효과의 속도로 fast, normal, slow 또는 0 이상의 숫자 ( 밀리세컨드 단위 ) 를 지정

두 번째 매개변수는 셀렉터로 지정한 태그의 투명도를 설정합니다 . 투명도는 0( 사라짐 )~1( 나타남 ) 의 수치로 지정하고 마지막 매개변수는 애니메이션이 종료한 후에 실행할 사용자 정의 함수

section 05. 이펙트

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

• 플러그인 jQuery 기능을 확장할 수 있는 방법으로 제공되는 메커니즘 jQuery 코어에서 제공되지 않는 보편적이지 않은 기능이 필요할 경우에는 플러그인

형태로 제공

• lightBox 플러그인 현재 페이지에 이미지를 오버레이하는데 사용 jQuery 플러그인

section 06. 플러그인 사용법 살피기

www.kyobobook.co.kr

08 장 . 작고 강한 자바스크립트 jQuery

현재 페이지에 이미지를 오버레이하는데 사용 jQuery 플러그인

section 06. 플러그인 사용법 살피기

www.kyobobook.co.kr