선택자 중에 : 기호를 포함하는 선택자를 필터 선택자라고 한다
입력 양식 필터 선택자
- 요소:button : input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택한다
- 요소:checkbox : input 태그 중 type 속성이 check인 문서 객체를 선택한다
- 요소:file : input 태그 중 type 속성이 file인 문서 객체를 선택한다
- 요소:image : input 태그 중 type 속성이 image인 문서 객체를 선택한다
- 요소:password : input 태그 중 type 속성이 password인 문서 객체를 선택한다
- 요소:radio : input 태그 중 type 속성이 radio인 문서 객체를 선택한다
- 요소:reset : input 태그 중 type 속성이 reset인 문서 객체를 선택한다
- 요소:submit : input 태그 중 type 속성이 submit인 문서 객체를 선택한다
- 요소:text : input 태그 중 type 속성이 text인 문서 객체를 선택한다
- 요소:checked : 체크되어 있는 입력 양식을 선택한다
- 요소:disabled : 비활성화된 입력 양식을 선택한다
- 요소:enabled : 활성화된 입력 양식을 선택한다
- 요소:focus : 초점이 맞추어져 있는 입력 양식을 선택한다
- 요소:input : 모든 입력 양식을 선택한다 (input, textarea, select, button)
- 요소:selected : option 객체 중 선택된 태그를 선택한다
input 태그의 type 속성에 따라 문서 객체를 선택하는 좀 더 간단한 방법
필터 선택자는 기본 선택자 뒤에 사용한다
'input:button'의 형태로 선택하면 된다
위치 필터 선택자
- 요소:odd : 홀수 번째에 위치한 문서 객체를 선택한다
- 요소:even : 짝수 번째에 위치한 문서 객체를 선택한다
- 요소:first : 첫 번째에 위치한 문서 객체를 선택한다
- 요소:last : 마지막에 위치한 문서 객체를 선택한다
<body>
<table>
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
<tr>
<td>강민수</td>
<td>AB형</td>
<td>서울특별시 송파구</td>
</tr>
</table>
</body>
$(function () {
$('tr:odd').css('background', '#f9f9f9');
$('tr:even').css('background', '#9f9f9f');
$('tr:first').css('background', '#000').css('color', '#fff');
});위치 필터 선택자 예시와 첫 번째 tr 선택시 사용한 체이닝 예시
함수 필터 선택자
- 요소:contains(문자열) : 특정 문자열을 포함하는 문서 객체를 선택한다
- 요소:eq(n) : n번째 위치하는 문서 객체를 선택한다
- 요소:gt(n) : n번째 초과에 위치하는 문서 객체를 선택한다
- 요소:has(h1) : h1 태그가 있는 문서 객체를 선택한다
- 요소:lt(n) : n번째 미만에 위치하는 문서 객체를 선택한다
- 요소:not(선택자) : 선택자와 일치하지 않는 문서 객체를 선택한다
- 요소:nth-child(3n+1) : 3n+1번째에 위치하는 문서 객체를 선택한다(1, 4, 7, ....)
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 06) - 배열 관리 2 (0) | 2020.07.30 |
|---|---|
| JS jQuery (part. 05) - 배열 관리 (0) | 2020.07.30 |
| JS jQuery (part. 03) - 속성 선택자 (0) | 2020.07.29 |
| JS jQuery (part. 02) - 선택자 (0) | 2020.07.29 |
| JS jQuery (part. 01) - $(document).ready() (0) | 2020.07.29 |
