1. 제이쿼리 시작

1) 제이쿼리 개요

• 사용 방식

2) 제이쿼리 기초

• 제이쿼리란?

• 제이 쿼리의 장점

3) 제이쿼리 적용

• 적용법

• CDN 으로 적용하는 방법

2. 제이쿼리 기본

4) 제이쿼리 문법

• 문법

• $()함수

• Document 객체의 ready() 메소드

5) 자바스크립트 기초 지식

• 변수
• 배열
• 연산자
• 제어문
• 함수
• 유효범위
• 객체

3. 요소의 선택

6) css 선택자

• 요소의 선택

• CSS 선택자를 이용한 선택
  - 예제

7) 제이쿼리 선택자

• 제이쿼리 선택자

• 선택한 요소의 저장
  - 예제

• 선택한 요소의 필터링
  - 예제

• input 요소의 선택
  - 예제

8) 선택된 요소에 접근

• getter 메소드와 setter 메소드
  - 예제

• 메소드 체이닝(method chaining)
  - 예제
  - 예제

• .width() 메소드와 .height() 메소드
  - 예제

• .attr() 메소드
  - 예제

• 대표적인 getter 메소드와 setter 메소드

4. 요소의 조작

9) 요소의 추가

• 기존 요소의 내부에 추가
  - .append() 메소드
  - .prepend() 메소드
  - .appendTo() 메소드
  - .prependTo()메소드

• 기존 요소의 내부에 새로운 요소를 콘텐트를 추가해주는 메소드

• 기존 요소의 외부에 추가
  - .before() 메소드
  - .after() 메소드
  - .insertBefore() 메소드
  - .insertAfter() 메소드

• 기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드

• 기존 요소를 포함하는 요소의 추가
  - .wrap() 메소드
  - .wrapAll() 메소드
  - .wrapInner() 메소드

• 기존 요소를 포함하는 새로운 요소를 추가해주는 메소드

10) 요소의 복사 및 삭제

• .clone() 메소드
  - 예제

• 요소를 복사해주는 메소드

• 요소의 대체
  - .replaceAll() 메소드
  - .replaceWith() 메소드

• 요소를 대체해주는 메소드

• 요소의 삭제
  - .remove()
  - .detach() 메소드
  - .empty() 메소드
  - .unwrap() 메소드

• 요소를 삭제해주는 메소드

5. 요소의 탐색

11) 조상 요소의 탐색

• 트리탐색(tree traversing)

• 조상(ancestor) 요소의 탐색
  - .parent() 메소드
  - .parents() 메소드
  - .parentsUntil() 메소드
  - .closet() 메소드

• 조상 요소를 탐색하는 메소드

12) 형제 요소의 탐색

• 형제 요소의 탐색
  - .siblings()
  - .next() 메소드
  - .nextAll() 메소드
  - .nextUntil() 메소드
  - .prev(), .prevAll(), .prevUntil() 메소드

• 형제 요소를 탐색하는 메소드

13) 자손 요소의 탐색

• 자손 요소의 탐색
  - .children()
  - .find() 메소드

• 자손 요소를 탐색하는 메소드

14) 기타 탐색 메소드

• 기타 탐색 메소드
  - .add() 메소드
  - .each() 메소드
  - .end()메소드
  - .offsetParent() 메소드
  - .contents() 메소드

• 기타 탐색 메소드

15) 필터링 메소드

• 필터링 메소드
  - .first() 메소드와 last() 메소드
  - .eq() 메소드
  - .filter() 메소드
  - .not() 메소드
  - .has() 메소드
  - .is() 메소드
  - .map()
  - .slice() 메소드

• 필터링 메소드

6. 요소의 영역

16) 요소의 크기

• 요소의 크기
  - inner 와 outer
  - .width() 와 .height() 메소드

• 다양한 크기 정보를 반환하는 메소드
  - 예제

• 다양한 크기 관한 메소드

17) 요소의 위치

• 요소의 위치
  - .offset() 메소드와 .position() 메소드

• 기준이 되는 조상 요소
  - .scrollLeft() 메소드와 .scrollTop() 메소드

• 요소의 위치에 관한 메소드

7. 스타일 설정

18) 프로퍼티 설정

• css 스타일 설정
  - .css() 메소드
  

• 프로퍼티 설정
  - .attr()
  - .prop() 메소드
  

• 속성과 프로퍼티의 차이점

• 속성과 프로퍼티의 차이점
  - .attr() 메소드와 .prop() 메소드와의 차이점
  

• css 스타일 설정에 관한 메소드

19) 클래스 설정

• 클래스 설정

• 클래스의 추가 및 제거

• 클래스의 확인

• 클래스 설정에 관한 메소드

8. 이벤트 처리

20) 이벤트 개념

• 이벤트란 ?

• 이벤트 핸들러

• 이벤트 객체

21) 이벤트의 처리

• 이벤트의 연결

• 이벤트 처리의 발전
  - .on() 메소드
  - .one() 메소드
  - .off 메소드
  

22) 이벤트의 위임

• 이벤트의 위임

• 이벤트의 전파(event propagation)

23) 이벤트 메소드

• 이벤트 메소드
• 마우스 이벤트와 관련된 메소드
  - .dblclick() 메소드
  - .hover() 메소드
  
• 마우스 이벤트와 관련된 메소드
  - .keypress() 메소드
  
• 키보드 이벤트와 관련된 메소드
  - .focusin() 메소드와 .focusout() 메소드
  
• 입력 양식 이벤트와 관련된 메소드

9. 이펙트 효과

24) 요소의 표시와 숨김

• 이펙트(effect) 효과

• 요소의 표시와 숨김

• 요소의 표시 상태 토글

25) 페이드 효과

• 페이드 효과

• 페이드 인(fade in)과 페이드 아웃(fade out)

• 페이드 효과의 토글

• 페이드 효과의 투명도 설정

• 페이드 효과와 관련된 메소드

26) 슬라이드 효과

• 슬라이드 효과

• 슬라이드 업(slide up)과 슬라이드 다운(slide down)

• 슬라이드 효과의 토글

• 슬라이드 효과와 관련된 메소드

27) 이펙트 효과의 제어

• 이펙트 효과의 제어

• 이펙트 효과의 지연 설정

• 이펙트 효과의 중지

• 이펙트 효과의 제어와 관련된 메소드

28) jQuery.fx 객체

• jQeury.fx.speeds

• jquery.fx.interval 프로퍼티

• jQuery.fx.off 프로퍼티

• jQuery.fx 객체 프로퍼티

29) 사용자 정의 이팩트

• .animate() 메소드
  - 원형

• .animate() 메소드 - 사용할 수 있는 css 속성

• .animate() 메소드 - 미리 정의 된 값

• .animate() 메소드 - 시간당 속도 함수

10. Ajax 와의 연동

30) Ajax의 개요

• Ajax 란 ?
• Ajax 프레임 워크

31) Ajax : HTTP 요청

• HTTP 요청방식

• GET

• POST 방식

• GET 방식와 POST 방식의 비교

• $.get() 메소드

32) Ajax 메소드

• $.ajax() 메소드
  - 원형

33) Ajax와 form 요소

• Ajax와 form 요소

• 직렬화(serialization)

11. 유틸리티 메소드

34) 타입 검사 메소드

• 유틸리티 메소드

• 타입 검사 메소드

• $.type() 메소드

• 특정 타입 검사 메소드

• 타입 검사 메소드

35) 기타 유틸리티 메소드

• 기타 유틸리티 메소드

• $.each() 메소드 (json 값 뽑아옴)

• $.extend() 메소드

• $.trim() 메소드

• 범용 유틸리티 메소드

• $.inArray() 메소드

• 배열에 관련된 메소드

• 파싱에 관련된 메소드