[8주차] 5. $(' ') 선택자 예시

* even, eq : index가 0부터 시작
* nth-child : index가 1부터 시작

* 선택자는 CSS에서 사용하던 분법을 그대로 사용할 수 있다.

 

$('tr:nth-child(1)')

<tr>태그의 부모의 입장에서 첫번째 자식인데 <tr>인 것 + 모든 <tr>에 대해 적용

 

$('tr:first-child')

바로 위의 것과 같은 의미

 

$('tr:first')

<tr>태그의 부모의 입장에서 첫번째 자식인데 <tr>인 것

 

$('tr:nth-child(3n)')

<tr>태그의 부모의 입장에서 3의 배수번째 모든 자식인데 <tr>인 것 + 모든 tr에 대해 적용

3, 6, 9, 12,,,

 

$('tr:nth-child(3n+1)')

<tr>태그의 부모의 입장에서 3의 배수 + 1 번째 모든 자식인데 인 것 + 모든 tr에 대해 적용

4, 7, 10, 13,,,

 

$('tr:nth-child(even)')

<tr>태그의 부모의 입장에서 짝수 번째 모든 자식인데 <tr>인 것 + 모든 tr에 대해 적용

2, 4 ,6, 8,,,

 

$('tr:even')

<tr>태그의 부모의 입장에서 짝수 번째 모든 자식인데 <tr>인 것

단, 0번째 index를 포함해서 2, 4, 6, ...

 

$('td:eq(3)') 혹은 $('td').eq(3)       둘은 모두 사용가능한 같은 표현(후자는 index를 변경시키기 용이)

<td>태그의 부모의 입장에서 자식으로 존재하는 모든 <td> 중에 index가 3인 것 단 1개

이 방식은 아마 css에서 존재 하지 않던 것이라서 알아두면 좋을거 같다.

---

$('#asd')

id 속성의 값이 asd인 요소

 

$('.asd')

class 속성의 값이 asd인 요소

 

$('input:checked')

type이 checkbox 혹은 radio 인  요소들에서, 체크된 모든 input 요소들을 지정

 

$('input[name="ㅁㄴㅇ"] : checked')?