PowerPoint Template
Download
Report
Transcript PowerPoint Template
www.kyobobook.co.kr
웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery
08장. 작고 강한 자바스크립트 jQuery
교보문고
08장. 작고 강한 자바스크립트 jQuery
section 01. jQuery 기본 다루기
• 오픈 소스 형태로 제공되기 때문에 jQuery 라이브러리 파
일을 포함시켜서 사용
• jQuery 라이브러리를 사용하기 위한 2가지 방법
CDN 서비스에서 로딩
웹 로컬에서 로딩
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 01. jQuery 기본 다루기
• jQuery 메소드를 사용하려면 jQuery 레퍼(wrapper) 객체
로만 접근할 수 있다.
• jQuery 레퍼 객체는 jQuery 함수를 사용하여 생성할 수 있
다.
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 01. jQuery 기본 다루기
• $(document).ready()
jQuery는 DOM에서 엘리먼트를 선택
DOM은 브라우저 HTML 문서를 완전히 로드한 후에 준비된 상태
(ready)가 되었을 때에만 생성
HTML 문서가 읽히기 전인 head 부분에 jQuery를 기술하려 한다면
문서가 로드되고 난 후에 jQuery가 수행되도록 처리를 미뤄야 함
이때 사용되는 jQuery가 제공하는 이벤트 핸들러는
$(document).ready()
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 01. jQuery 기본 다루기
• $(document).ready()
문서가 준비상태가 되면 $(document).ready() 이벤트 핸들러에 의해
서 콜백함수가 호출
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
• 셀렉터(selector)
문서 내에서 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기 위해
서 jQuery에서 제공하는 기술
DOM 안의 특정 엘리먼트에 접근하는 방법은 CLASS와 ID를 사용
하는 2가지로 나뉨.
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
• ".class" 셀렉터
class 어트리뷰트 값이 . 다음에 기술한 내용과 일치하는 엘리먼트
에 접근
검색하고자 하는 대상이 "class='myClass'"라면 '$(.myClass)'를
사용.
• "myClass"란 클래스를 갖는 엘리먼트를 찾아 스타일을 지
정하는 문장
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
•
"#id" 셀렉터
id 어트리뷰트 값이 # 다음에 기술한 내용과 일치하는 엘리먼트에 접근
검색 하고자 대상이 "id='myID'"라면 '$#myID'를 사용
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
•
기본 CSS 셀렉터
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
•
자주 사용되는 셀렉터
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 02. 셀렉터
•
자주 사용되는 셀렉터
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 03. 원하는 태그를 추출하여 조작하기
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 03. 원하는 태그를 추출하여 조작하기
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 03. 원하는 태그를 추출하여 조작하기
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 03. 원하는 태그를 추출하여 조작하기
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 04. 이벤트 처리
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 04. 이벤트 처리
•
DOM 탐색(Traversing) 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 04. 이벤트 처리
•
이벤트가 발생했을 때 여러분이 의도한 처리를 하기 위해서는 이벤트
핸들러에 처리 함수를 대응시킨 후에 이곳에 원하는 로직을 기술하여
프로그램을 완성
•
bind() 함수를 사용하여 해당 엘리먼트에 원하는 이벤트를 적용할 수 있
고 unbind() 함수로 제거할 수 있다.
첫 번째 매개변수에는 click, mousedown, focus, resize 등과 같은 적용 가능한 이
벤트 타입
두 번째 매개변수에는 이벤트가 발생했을시 실행되는 함수
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 05. 이펙트
•
그림이나 글씨에 투명도를 주어 선명하게 혹은 흐르게 나타낼 수도 있
고, fade(현재 화면 위에서 서서히 나타남)나 flip(현재 화면이 뒤집히면
서 사라지고 다음 뷰가 나타남)와 같은 일련의 이펙트 위한 메소드
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 05. 이펙트
•
display 속성이 none 상태인 엘리먼트에 애니메이션 효과를 주어 서서
히 나타나도록 하기 위해서 show() 사용
첫 번째 매개변수는 애니메이션을 지속시키는 시간을 설정합니다. fast는 200 ms(밀
리 세컨드, 1/1000초), slow는 600 ms normal 혹은 fast, slow 이외의 문자열은
400 ms 동안 애니메이션이 진행됩니다. 0 이상의 숫자(ms 단위)를 줄 수도 있다.
두 번째 매개변수는 애니메이션이 종료한 후에 실행할 사용자 정의 함수
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 05. 이펙트
•
hide()
•
엘리먼트가 사라지는 애니메이션 효과
toggle()
엘리먼트가 사라졌다 나타나도록 하는 상태를 반복하도록 하는 애니메이션 효과
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 05. 이펙트
•
fadeTo()
대상 엘리먼트를 지정한 투명도 값으로 변경
첫 번째 매개변수는 효과의 속도로 fast, normal, slow 또는 0 이상
의 숫자(밀리세컨드 단위)를 지정
두 번째 매개변수는 셀렉터로 지정한 태그의 투명도를 설정합니다.
투명도는 0(사라짐)~1(나타남)의 수치로 지정하고 마지막 매개변수
는 애니메이션이 종료한 후에 실행할 사용자 정의 함수
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 06. 플러그인 사용법 살피기
•
플러그인
jQuery 기능을 확장할 수 있는 방법으로 제공되는 메커니즘
jQuery 코어에서 제공되지 않는 보편적이지 않은 기능이 필요할 경우에는 플러그인
형태로 제공
• lightBox 플러그인
현재 페이지에 이미지를 오버레이하는데 사용 jQuery 플러그인
www.kyobobook.co.kr
08장. 작고 강한 자바스크립트 jQuery
section 06. 플러그인 사용법 살피기
현재 페이지에 이미지를 오버레이하는데 사용 jQuery 플러그인
www.kyobobook.co.kr