[JQuery 요약 정리] 3. 객체 선택

3. 객체 선택

1) filter() 메소드

- 문서 객체를 필터링

- 사용방법: 매개변수에 '선택자' 혹은 'function (index){return index;}의 형태로 사용

- 사용 예시

$('h1).filter(':even').css('color', 'red') -> h1 중 짝수 요소 빨간색으로 변경

$('h1).filter(function (index){return index % 3 == 0;}).css('color', 'red')

-> h1 중 3의 배수 요소를 빨간색으로 변경

2) end() 메소드

- 문서 객체 선택을 한 단계 뒤로 돌림(ex. filter() 메소드의 선택 제거)

- 메소드 체이닝을 통해 다양한 조건을 한꺼번에 입력할 시에 유용

*메소드 체이닝: 여러가지 메소드를 연결해서 사용하는 것

- 예시

$('h1').css('color', 'red).filter(':even').css('color', 'black').end().filter(':odd').css('backbground', 'red');

3) eq(), first(), last() 메소드

- 특정 위치의 객체 선택 메소드

- eq(index) : index위치의 객체 선택

- first() : 첫 번째 객체 선택

- last() : 마지막 객체 선택

4) add() 메소드

- 현재 선택한 객체의 범위를 확장

- 예시

$('h1').css('color', 'red').add('h2').css('background', 'black');

5) is() 메소드

- 객체의 특징을 판별 후 boolean 방식 리턴

- 예시

if($(this.is('.select')) {

alert('ok'); }

-> select 클래스에 포함될 경우 알림창 띄움

6) find() 메소드

- 하위의 특정 요소를 선택

- 후손 선택자의 선택 방법을 메소드로 분리해놓은 개념

7) parent() 메소드

- 부모 요소를 선택

* parents()로 사용시 조상 선택

- 예시

$('span').parent().css('color', 'red') -> span의 부모 요소의 색깔을 빨간색으로 변경

8) siblings() 메소드

- 형제 요소를 모두 선택