* 이 책의 특징
– 가장 쉽고 재미있는 jQuery 입문서
– 최신 트렌드를 반영한 실무 예제 중심 구성
– 웹 디자이너와 웹 퍼블리셔를 위한 실전 테크닉
– HTML, CSS를 이해하고 있으면 Javascript를 몰라도 충분히 이해할 수 있도록 설명
* 이 책은 누가 봐야 할까요?
– 동적인 웹을 제작하고자 하는 웹 디자이너와 퍼블리셔
– 웹 페이지에 갤러리, 내비게이션, 다양한 이미지 효과를 사용해야 하는 웹 디자이너
– 프로그램의 기초가 없어 javascript/jQuery가 학습하기 두려우신 분
– HTML(구조), CSS(표현)을 넘어 javascript/jQuery(동작) 분야에 영역을 넓히고 싶은 분
[바로바로 할 수 있는 jQuery 입문]에 관한 본문의 예제 파일, 동영상 강좌 다운로드와 묻고 답하기는 네이버 카페(http://cafe.naver.com/jqueryfordesigner)를 통해 제공합니다.
PART 01. jQuery 입문에 필요한 기본 요소
CHAPTER 01. jQuery란?
1. jQuery 준비
1) jQuery 설치
2) jQuery 자습서
3) jQuery가 적용된 웹 사이트 사례
CHAPTER 02. jQuery를 공부하기 위한 선수 학습
1. javaScript
1) javaScript의 탄생
2) 주석(Comment)
3) 변수
4) 데이터 타입
5) 배열
6) 객체
7) 함수
8) 이벤트
9) 조건문
10) 반복문
11) 연산자(Operator)
12) 타이머 메서드
13) 랜덤 함수
14) 숫자 타입 변환 함수
15) javaScript vs. java
2. DOM 문서 객체 모델
1) DOM
2) 노드의 형태
3) DOM Tree
4) DOM을 제어하는 javaScript 명령어(속성/메서드)
5) DOM 노드에 접근하는 방법(javaScript vs. jQuery)
3. HTML/CSS
CHAPTER 03. jQuery 기본 개념
1. jQuery 기능 카테고리
1) Core(핵심 개념)
2) Selector(실렉터)
3) Attributes/CSS(속성)
4) Manipulation(조작)
5) Traversing(탐색)
6) Events
7) Effects
8) UI
9) Ajax
2. 워밍업 – Hello World!
1) 전체 코드
2) 코드 설명
3) $( )의 의미
4) $(this)의 의미
5) 문서 준비 이벤트
6) 따옴표
PART 02. jQuery 기초
CHAPTER 01. 선택자(Selector)
1. 기본 선택자(Basic)
1) $(`h2`)
2) $(`.group`)
3) $(`#main`)
4) $(`p, div, #nav`)
5) $(`✽`)
2. 계층 선택자(Hierarchy)
1) $(“div#container li”)
2) $(“div > p”)
3) $(“#first + li”)
4) $(“#second ~ li”)
3. 속성 선택자(Attribute)
1) $(“li a[href=`#page2`]”)
2) $(“li a[href^=`http`]”)
3) $(“li a[href$=`.com`]”)
4) $(“[href✽=`2`]”)
5) $(“img[src !=`sample1.png`]”)
6) $(“[src][alt]”)
4. 기본 필터 선택자(Basic Filter)
1) $(“li:eq(6)”)
2) $(“li:gt(5)”)
3) $(“li:lt(3)”)
4) $(“li:first, li:last”)
5) $(“li:even”)
6) $(“li:odd”)
7) $(“li:not(:eq(7))”)
5. 내용 필터 선택자(content Filter)
1) $(“li:contains(`ap`)”)
2) $(“ul:has(`li`)”)
3) $(“li:empty”).text(“Hello”)
4) $(“li:parent”)
6. 보임 필터 선택자(Visibility Filter)
7. 자식 요소 필터 선택자(Child Filter)
1) $(“li::first-child”)
2) $(“li:last-child”)
3) nth-child(index/even/odd/equation)
4) $(“div p:only-child”)
8. 폼 선택자(Forms)
CHAPTER 02. 탐색(Traversing)
1. 트리 구조 탐색(Tree Traversal)
1) $(`div#container`).children(`p`)
2) $(`div#container`).find(`p`)
3) $(`p#part1`).prev( )
4) $(`p#part1`).next( )
5) $(`p#part1`).siblings( )
6) $(`p#part1`).parent( )
2. 필터링(Filtering)
1) $(`div#main p`).first( )
2) $(`div#main p`).last( )
3) $(`div#main p`).eq(1)
4) $(`div`).filter(“.middle”)
5) $(`div`).not(`.middle`)
6) $(`li`).has(`ul`)
CHAPTER 03. DOM 변경(Dom Manipulation)
1. append( )
1) 매개 변수 : content
2) 미리 보기
2. prepend( )
1) 매개 변수 : content
2) 미리 보기
3. html( )/html(htmlString)
1) html( )
2) html(htmlString)
4. text( ) / text(textString)
1) text( )
2) text(textString)
5. remove( )
6. empty( )
7. detach( )
CHAPTER 04. CSS Styling and jQuery
1. css(propertyName)
2. css(propertyName, value)
3. addClass(className)
4. removeClass( [className])
5. addClass( )와 removeClass( ) 활용 예제
1) 미리 보기
2) HTML
3) CSS
4) jQuery
5) 실행
CHAPTER 05. Events
1. 이벤트 처리 방식
1) javaScript 이벤트 처리 방식
2) jQuery 이벤트 처리 방식
2. jQuery 이벤트 주제별 구분
1) 마우스 이벤트
2) hover 이벤트
3) 문서 로딩 이벤트
4) 폼 이벤트
5) 키보드 이벤트
6) 웹 브라우저 이벤트
3. 이벤트 흐름 및 차단
1) 이벤트 흐름
2) 이벤트 차단
CHAPTER 06. Effects and Custom Animations
1. Basics
1) hide( )
2) show( )
3) toggle( )
2. Fading
1) fadeIn( )
2) fadeOut( )
3) fadeToggle( )
4) fadeTo( )
3. Sliding Effects
1) slideDown( )
2) slideUp( )
3) slideToggle( )
4. Custom Animations
1) properties
2) 애니메이션의 다양한 표현 방법
3) 애니메이션 큐
4) 애니메이션 정지(Stopping Animations)
5) 애니메이션 연기(지연)
CHAPTER 07. jQuery UI
1. 다운로드 및 설정
1) 첫 번째 방법
2) 두 번째 방법
2. 컬러 애니메이션
1) 미션 : 내비게이션의 글씨와 배경색을 애니메이션을 사용하여 변경해보기
2) 미리 보기
3. 다양한 easing 효과
1) 미션 : 다양한 easing 경험하기
2) 미리 보기
CHAPTER 08. jQuery PlugIn
1. jQuery PlugIn
2. jQuery PlugIn 사용 방법
3. 내가 만드는 PlugIn 제작법
1) 기본 형식
2) 코드 사례
3) 파일 저장
4) 사용법
4. 라이선스(저작권) 확인
1) MIT 라이선스
2) BSD 라이선스
3) GPL 라이선스
PART 03. jQuery 실전 예제
CHAPTER 01. Gallery
1. 썸네일 포토 갤러리
2. 설명(자막)을 제공하는 갤러리
3. 부드러운(FadeIn-Out) 장면 전환 갤러리
4. lightBox PlugIn
5. Gallery PlugIn – skitter
CHAPTER 02. 내비게이션
1. Tree형 내비게이션
2. 어디서나 펼쳐지는 내비게이션
3. 슬라이딩 내비게이션(바네이 메뉴)
CHAPTER 03. 다양한 이미지 효과
1. 배경 이미지를 활용한 역동적 오버 효과
2. 연속 이미지를 사용하여 애니메이션 제어하기
3. 이미지 이동을 사용한 pan 효과
4. 색상 애니메이션을 활용하여 배경 컬러 바꾸기
5. 직접 만들어 보는 이미지 hover 효과
6. Pixastic Image Processing Library
7. Zoomooz PlugIn
CHAPTER 04. 유용한 기능
1. drag and drop 기능
2. 슬라이더 바를 사용한 콘텐츠 보기
3. One Page Scroll
4. toolTip 도움말 효과 만들기
