- 현재 위치
- home > 컴퓨터·ICT·어학 > 컴퓨터·IT 도서 > 웹프로그래밍 > jQuery 입문(바로바로 할 수 있는)[제우미디어]
;)
웹 디자이너와 웹 퍼블리셔를 위한 실전 테크닉을 담은『jQuery 입문』. 가장 쉽고 재미있는 jQuery 입문서이다. jQuery를 학습하기 전에 반드시 정리해야 할 기본적인 사항에 대해 다루었다. 또한 실렉터를 비롯한 다양한 조작 함수에 대해 학습하며 jQuery에 대한 전체적인 흐름을 익히고, 현업에서 많이 사용하는 예제를 선정하여 실전에 도움이 되도록 하였다.
저자: 유광열
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 도움말 효과 만들기
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 도움말 효과 만들기
