1장. jQuery Basics

[ 목차 ]

1. jQuery

2. jQuery 특징

3. jQuery 설치

4. jQuery 함수

5. Selector 태그/ ID / Class 선택자

6. 다양한 선택자들

7. Manipulation

1. jQuery

1) 존 레식이 발표한 크로스 플랫폼을 지원하는 경량의 자바스크립트 라이브러리

2) HTML문서의 탐색, 조작, 이벤트 핸들링, 애니메이션, Ajax 등을 멀티 브라우저를 지원하는 API를 통해 간편하게 사용

2. jQuery 특징

1) 어떠한 브라우저에서도 동일하게 동작, 이는 호환성을 고려하여 대체코드를 작성할 필요가 없다는 것을 의미

2) 네이티브 DOM API보다 직관적, 편리한 API를 제공, CSS 스타일의 selector를 사용할 수 있으며 조작 또한 강력, 유연

3) 이벤트 처리 Ajax, 애니메이션 효과를 쉽게 사용 가능

4) 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않음

3. jQuery 설치

1) jQuery 2.x 버전은 IE8 이하를 지원하지 않음

2) https://jquery.com/download/

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

3) Google CDN

4) 설치 확인 예제

4. jQuery 함수

1) jQuery 객체 생성

jQuery()

$()

2) 전달되는 인수의 종류에 따라 다른 움직임을 하며 jQuery 객체를 반환

2-1] CSS 스타일의 selector

$('h1').text('Hello!');

2-2] HTML

2-3] JavaScript 객체

2-4] 콜백함수

5. Selector 태그/ ID / Class 선택자

1) jQuery는 CSS 스타일의 selector를 이용해서 요소를 선택할 수 있음

2) jQuery는 반복문 없이 해당하는 모든 요소에 접근/조작할 수 있음

3) 후손 선택자

4) 자식 선택자

5) 복합 선택자

6) 가상 클래스 선택자

7) 홀짝 요소 선택자 : 0, 2, 4 인덱스-even, 1, 3, 5 인덱스-odd

8) * 선택자

9) .class 선택자

10) element 선택자

11) id 선택자

12) selects 선택자

13) parent > child

14) prev + next

15) prev ~ siblings

16) animated

https://api.jquery.com/animated-selector/

17) :eq()

18) :gt()

19) header

20) :not()

21) [name="value"]

22) :nth-of-type()

23) :button

24) :checked

25) :selected

6. 다양한 선택자들

1) https://api.jquery.com/category/selectors/

Selectors | jQuery API Documentation

Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elem

api.jquery.com