[Javascript] jQuery기본 개념 / 사용법 / 주요 선택자

[jQuery]

- 경량 javascript library

- 조작, 이벤트 핸들링, 애니메이션, Ajax등을 api를 통해 간편하게 사용 => 쉽고 빠른 개발~!

- 메소드 체인을 제공하여, 반복적인 코딩을 줄여줌.

 

[특징]

- 어떤 브라우저에서도 동일하게 동작. => 대체코드 작성 필요X

- 네이티브 DOM API보다 직관적이고 편리한  API를 제공!

 

[기본 구문]

$(selector).action();

- $(selector)는 탐색한 DOM 객체들을 담은 래퍼세트를 반환

 

[jQuery에서의 DOM 탐색]

- CSS에서 사용하는 Selector 표현 방식을 사용

- DOM 탐색 결과로  래퍼세트(Wrapper Set)라는 DOM을 래핑 한 객체를 반환.

 

[기본 형식]

$("h1").css("color","blue");

$: jQuery

"h1": selector

css: function

 

[Element Selector]

- document.getElementsByTagName()과 같다.

- $('element').css('color','blue');

 

[다중 Selector]

- 여러 element 선택

- $('en1,en2,en3').css('color','blue');

 

[속성 Selector]

- DOM 요소가 가진 속성 값으로 탐색

- 대괄호([])로 표현

- $(selector[attr]) : attr을 속성값으로 가지는 문서객체 선택

 

[필터 선택자]

- 기본 선택자 뒤에 콜론(:)rhk gkaRp vyrl

- el: button => type이 button인 input 요소 또는 button 요소 선택

 

[주요 위치기반 필터선택자]

- :first => 첫번째 요소 선택

- :last => 마지막 요소 선택

- :even, :odd => 짝수/홀수 번째 요소 선택

 

[레퍼세트와 메소드]

- size() :레퍼세트의 요소 개수 반환

- get(index): 레퍼세트에서 인덱스 번호에 위치하는 DOM 객체 반환

 

[요소 반복]

- $.each(array, function(index, item){});

- 배열이나 객체를 반복적으로 처리할 때 사용

- 첫번째 인자: js 배열 , 래퍼세트 객체

- 두번재 인자: 처리할 콜백 함수

- 콜백함수는 두개의 매개변수(index: 배열 인덱스, item: 반복하는 요소 객체)를 가짐

 

[요소 반복 2]

- $(selector.each(function(index, item){});

- 반복대상을 의미하는 첫번째 인자가 없음. 래퍼세트의 DOM 요소들이 반복 대상.

 

[필터 함수]

- $(selector).filter(selector);

- $(selector).filter(function(index,item){});

 

[위치기반 함수]

- $(selector).first();

- $(selector).eq(index);

 

[DOM  요소 판별]

- is() 메소드는 기존 레퍼세트가 주어진 선택자와 일치하는지 boolean값으로 여부를 반환

- $(selector).is(selector);

 

[자손 요소 탐색]

- $(selector).find(selector);

 

---

<정리>

- jQuery는 DOM 탐색을 위하여 CSS에서 사용하는 Selector 표현 방식을 사용