[SIST] Web_jquery_days09_jquery selector(제이쿼리 선택자)

1. jquery selector(제이쿼리 선택자)

1) *

- 모든 요소

 

2) #아이디명

- 해당 아이디명을 가진 요소

 

3) .클래스명

- 해당 클래스명을 가진 요소

 

4) 태그명

- 해당 태그명을 가진 요소

 

5) :first     :last

:first - 첫 번째에 해당하는 요소

:last - 마지막에 해당하는 요소

 

6) :even    :odd

:even - 짝수 인덱스 기준인 행

:odd - 홀수 인데스 기준인 행

 

7) :first-child    :last-child

:first-child - 어떤 요소의 첫 번째 자식 요소가 해당 요소인 것

:last-child - 어떤 요소의 마지막 자식 요소가 해당 요소인 것

 

8) :first-of-type    :last-of-type

:first-of-type - 어떤 요소에서 첫 번째로 만나는 자식 요소가 해당 요소인 것

:last-of-type - 어떤 요소에서 마지막으로 만나는 자식 요소가 해당 요소인 것

 

[7) 8) 사용 예시]

 

9) :nth-child(n)    :nth-of-type(n)

:nth-child(n) - 각 요소 안의 n번째 요소가 해당 요소인 것(각 부모 요소 안에서 n번째 자식에 해당하는 요소)

:nth-of-type(n) - 각 요소의 n번째에 만나는 해당 요소인 것

 

10) :nth-last-child(n)      :nth-last-of-type(n)

:nth-last-child(n) - 각 요소 안의 뒤에서 n번째 요소가 해당 요소인 것(각 부모 요소 안에서 n번째 자식에 해당하는 요소)

:nth-last-of-type(n) - 각 요소의 뒤에서 n번째에 만나는 해당 요소인 것

 

11) :only-child     :only-of-type

:only-child - 부모의 유일한 자식이 해당 요소인 것

:only-of-type - 부모 요소에 다른 자식들이 있더라도 해당 요소가 1개만 있는 요소

 

12) parent 요소와 child 요소 관련

parent 요소 공백 child 요소 : 부모 요소의 직계자식이 아니더라도 모든 후손에 해당하는 후손 요소

parent 요소 > child 요소 : 부모 요소의 직계 자식 요소

parent 요소 + child 요소 : 부모 요소 바로 뒤에 따라오는 형제 요소 

parent 요소 ~ child 요소 : 부모 요소 뒤에 있는 모든 형제 요소

 

13) :eq(index)      :gt(n)      :lt(n)

:eq(index) - index는 0부터 시작하며, index에 해당하는 번째의 요소

:gt(n) - n번째보다 큰 요소들

:lt(n) - n번째보다 작은 요소들

 

14) :not(selector)

- 선택자를 제외한 요소들

- .not() : jquery method로 기능은 동일하다.

 

15) :header

- h1~h6 태그에 해당하는 요소들을 뜻함

 

16) :animated

- 애니메이션 효과가 있는 요소

17) :focus

- 현재 focus를 가진 요소

 

18) :has(selector)

- 선택자를 가지고 있는 요소

 

19) :contains(문자열)

- 문자열을 가지고 있는 해당 요소

 

[18) 19) 예시]

 

20) :empty      :parent

:empty - 해당 요소 중 아무것도 가지고 있지 않은 요소(빈요소)

:parent - 자식이 있는 해당 요소

 

21) :hidden       :visible

:hidden -  보이지 않는 해당 요소

:visible - 보이는 해당 요소

 

22) :root

- 루트 엘리먼트(요소) == html 요소

 

[21) 22) 예시]

 

23) 속성선택자(속성명과 속성값)

[attribute] : 속성값은 중요하지 않고 해당하는 속성명만 가지는 요소
[attribute = value] : 해당 속성명 = 속성값인 요소
[attribute != value] : 해당 속성명이 속성값이 아닌 요소
[attribute *= value] : 해당 속성명에 속성값이 들어가는 요소
[attribute $= value] : 해당 속성명이 속성값으로 시작하는 요소
[attribute ^= value] : 해당 속성명이 속성값으로 끝나는 요소
[attribute ~= value] : 해당 속성명이 속성값이거나 공백 속성값 또는 속성값 공백에 해당하는 요소
[attribute |= value] : 해당 속성명이 속성값이거나 속성값으로 시작하는 요소

 

24) input 태그 관련

:input            ==    input
:text               ==    input[type=text]
:password     ==    input[type=password]
:radio             ==    input[type=radio]
:check            ==     input[type=checkbox]
:submit           ==     input[type=submit]
:button           ==     input[type=button]
:image            ==     input[type=image]
:file                 ==     input[type=file]

 

25) 선택, 비활성화, 활성화, 체크된 선택자

:selected - 선택된 요소

:disabled - 비활성화된 요소

:enabled - 활성화된 요소

:checked - 체크된 요소