[Jquery]셀렉터

jquery기능-셀렉터

HTML안에 DOM요소를 쉽게 찾기 위해 아래와 같은 표현식을 사용한다. DOM이란 Document element model로 HTML 문서의 모든 요소에 접근하는 방법을 제공하는 것을 말하며, 트리형태로 표현한다. DOM 트리구조는 계층적 구조로 HTML 태그와 element를 나타내는 노드가 표현되있다. 

트리구조

기본셀렉터

 - $('.a') : 클래스가 a인 요소 선택 

 - $('img') : 이미지 요소 선택

 - $('table') : 테이블 요소 선택

 - $('#a') : id가 a인 요소 선택 

 - $('input[name=a]') : a라는 이름을 가진 input text 요소 선택

순서셀렉터

  - $('input:first') : 첫번째 input 요소 선택

  - $('input:last') : 마지막 input 요소 선택

  - $('input:odd') : 홀수번째 input 요소 선택

  - $('input:even') : 짝수번째 input 요소 선택

  - $('input:ep(인덱스)') : 인덱스번째 input 요소 선택

  - $('input:lt(인덱스)') : 인덱스 보다 작은 input 요소 선택

  - $('input:lt(인덱스)') : 인덱스 보다 큰 input 요소 선택

관계기반셀렉터

  - $('선택자').children() : 선택자의 자식요소 선택

  - $('선택자').parent() : 선택자의 부모요소 선택

  - $('선택자').next(),nextAll() : 선택자의 다음/전체요소 선택

  - $('선택자').prev(),prevAll() : 마지막 input 이전/전체요소 선택

조건기반셀렉터

  - $('input').filter('.a') : 클래스가 a인 input 요소 검색(현재 위치)

  - $('div').find('.a') : div 자식 중에 클래스가 a인 요소 검색(자식 위치)

  - $('div').contains('test') : div 중에 'test' 내용이 포함된 요소 검색

  - $('div').not('.a') : div 중에 클래스가 a인 요소 제거

선택자중첩

  - $('#a div span') : id가 a인 요소 안에 div안에 모든 span요소 선택

예시