[JS] jQuery - 선택자

CSS에서 선택자에 대해서 공부해 보았다. HTML 문서에서 가장 중요한 부분은 내가 원하는 요소를 얼마나 잘 가져오는지가 중요하다.

CSS에서 선택자를 이용하여 원하는 요소에 원하는 스타일을 줄 수 있었고 자바스크립트에서도 DOM을 통해 원하는 객체를 어떻게 가져와야하는지가 중요했다. 왜냐? 객체를 가져와야 그 속성을 추가하거나 제거하고 메소드를 이용하면서 프로그램을 제작할 수 있다.

사실 조작할 대상을 잘 선택하고 조작해야한다. 그것이 프로그램의 중요한 원리 중 하나이다.

선택자는 jQuery에서도 굉장히 중요하다. 선택자만 잘 알아도 jQuery의 반을 마스터 한 것이다. CSS를 하면서 공부했던 선택자를 잘 상기하도록 하자.

일단 기본적으로 알아야 할 내용은 $()에 css선택자 문자열을 전달하면 일치하는 요소의 집합을 나타내는 jQuery를 반환한다는 것이다. 즉, 조회의 결과로 하나의 요소만 일치한다면 하나의 객체만을 얻어서 원하는 작업을 처리해 줄 수 있지만 집합을 얻을 때가 많을 것이고 이를 잘 처리해야하는 것이 프로그래머의 몫이다.(반환되는 요소집합이 배열과 유사하기는 하지만 실제 배열은 아니다)

1. 전체선택자 - $("*")
2. 태그선택자 - $("태그명")
3. 아이디선택자 - $("#아이디")
4. 클래스선택자 - $(".클래스")
5. 자식선택자 - $("부모 > 자식")
6. 후손선택자 - $("부모 후손")
7. 속성선택자
요소[속성] : 특정 속성을 가진 요소(객체) 선택
요소[속성=값] : 해당하는 속성과 값이 일치하는 요소 선택
요소[속성~=값] : 속성에 특정한 값을 단어로써 포함하는 요소 선택
요소[속성^=값] : 속성에 특정값으로 시작하는 요소 선택
요소[속성$=값] : 속성에 특정값으로 끝나는 요소 선택
요소[속성*=값] : 속성에 특정값을 포함하는 요소 선택


8. 입력(input) 양식필터  선택자
요소:button = input 태그 중 type속성이 button인 요소 선택
(종류 : button, checkbox, file, image, password, radio, reset, submit, text)
요소:checked = 체크된 input요소 선택
요소:disabled = 비활성화된 input요소 선택
요소:enabled = 활성화된 input요소 선택
요소:focus = 입력대기 중인 input요소 선택
요소:input = 모든 input요소 선택
요소:selected = option요소 중 선택된 요소 선택

9. 선택필터 선택자
요소:odd = 홀수 번째에 위치한 요소 선택
요소:even = 짝수 번째에 위치한 요소 선택
요소:first = 첫 번째 위치한 요소 선택
요소:last = 마지막에 위치한 요소 선택
요소:animated : 현재 애니매이션이 적용되고 있는 요소 선택
요소:header : 헤더 요소 선택(h1~h6)
요소:hidden : 감춰진 요소 선택
요소:visible : 보여지는 요소 선택


10. 함수필터 선택자
요소:contains(문자열) = 특정 문자열을 포함하는 요소 선택
요소:eq(n) = n번째에 위치하는 요소 선택
요소:gt(n) = n번째의 위치를 초과하는 요소 선택
요소:has(selector) = 선택자로 선택한 요소를 가지고 있는 요소 선택
요소:lt(n) = n번째 위치 미만인 요소 선택
요소:not(selector) = 선택자로 선택한 요소를 가지고 있지 않은 요소 선택
요소:nth-child(3n+1) = 3n+1번째 위치하는 요소 선택(1, 4, 7, 10...)


몇가지 예를 보도록하자.

p:odd = p태그 중 홀수번째 태그 선택
ul li:last-child = ul태그 안에 li태그 중 마지막 태그 선택
table#laguage td:nth-child(1) = laguage라는 아이디를 가진 테이블 안에 td태그 중 인덱스가 1인 태그 선택
$("input[type=checkbox][checked]")
타입이 checkbox이고 체크되어진 input객체를  jQuery객체로  선택.
checkbox:checked:enabled = 활성화되고 선택이 되어 있는 체크박스 객체 선택
input:not(:checkbox) = input객체 중 checkbox가 아닌 객체 선택
img:not([src*="dog"] = img객체 중 src속성에 "dog"를 포함하지 않는 객체 선택
div:has(span) = div객체 중 span객체를 가지는 객체 선택