Front/jQuery
jQuery - 선택자(필터 선택자)
by Hyeon_
2021. 12. 14.
jQuery 선택자(selector)
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 종류
- 직접 선택자
- 인접 관계 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
필터 선택자
- 태그의 상태나 순서 등으로 선택
$('태그명:순서필터')
$('태그명:상태필터')
$('input:checked') : 체크 상태인 <input> 태그 선택
필터 선택자 속성
요소 : odd - 홀수 번째 위치한 요소 선택요소 : even - 짝수 번째요소 : first - 첫 번째요소 : last - 마지막요소 : checked - 체크된 요소 선택(radio나 checkbox)요소 : selected - 선택된 요소 선택(select의 option selected)요소 : disabled - 비활성 입력 양식 요소 선택요소 : enabled - 활성화된 입력 양식 요소 선택요소 : focus - 커서가 놓여진 입력 양식 요소 선택요소 : eq(n) - n번째(equal)요소 : not(선택자) - 선택자와 일치하지 않은 요소 선택요소 : lt(n) - n번째 미만(less than)요소 : gt(n) - n번째 초과(greater than)요소 : has(선택자) - 선택자를 갖고 있는 요소 선택요소 : nth:child(숫자 n) - n의 배수 : nth-child(3n) : 0, 3, 6 …(번째)요소 : nth:child(숫자 n+1) - n+1의 배수 : nth-child(3n+1) : 1, 4, 7 …(번째)
필터 선택자 예제
filterSelector.html
- 홀수행 선택 (행 인덱스 : 0부터 시작)
- 짝수행 선택
- 첫 번째 행
- 특정 행 선택 : tr의 5행(여섯 번째 행)
- tr의 5행보다 큰 행 전부 선택
- tr의 0행 제외하고 모두 선택
- nth-child(숫자 n+1)
- 짝수 열 선택 : nth-child(숫자 n) : 2n
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자</title>
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// table1 찾기
// 1. 홀수행 선택 (행 인덱스 : 0부터 시작)
$('#table1 tr:odd').css('background-color', 'gray');
// 2. 짝수행 선택
$('#table1 tr:even').css('background-color', 'green');
// 3. 첫 번째 행
$('#table1 tr:first').css({'background-color':'pink', 'fontSize':'20px'});
// 4. 특정 행 선택 : tr의 5행(여섯번째 행)
$('#table1 tr:eq(5)').css('color', 'red');
// 5. tr의 5행보다 큰 행 전부 선택
$('#table1 tr:gt(5)').css('color', 'blue');
// table2에서 찾기
// 6. tr의 0행 제외하고 모두 선택
$('#table2 tr:not(tr:eq(0))').css('background', 'gold');
// nth : 서수(~번째)
// 7. nth-child(숫자n+1)
$('#table2 tr:nth-child(3n+1)').css('background', 'orange');
// 8. 짝수 열 선택 : nth-child(숫자n) : 2n
$('#table2 td:nth-child(2n)').css('background', 'yellow');
});
</script>
</head>
<body>
<h1>table1</h1>
<table id="table1" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이정후</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>이장군</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>허훈</td><td>40</td><td>대구</td></tr>
</table>
<br><br>
<h1>table2</h1>
<table id="table2" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이대호</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>기성용</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>박인비</td><td>40</td><td>대구</td></tr>
</table>
</body>
</html>
jQuery 선택자(selector)
- jQuery 코드는 선택자와 메서드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 종류
- 직접 선택자
- 인접 관계 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
필터 선택자
- 태그의 상태나 순서 등으로 선택
$('태그명:순서필터')
$('태그명:상태필터')
$('input:checked') : 체크 상태인 <input> 태그 선택
필터 선택자 속성
요소 : odd - 홀수 번째 위치한 요소 선택요소 : even - 짝수 번째요소 : first - 첫 번째요소 : last - 마지막요소 : checked - 체크된 요소 선택(radio나 checkbox)요소 : selected - 선택된 요소 선택(select의 option selected)요소 : disabled - 비활성 입력 양식 요소 선택요소 : enabled - 활성화된 입력 양식 요소 선택요소 : focus - 커서가 놓여진 입력 양식 요소 선택요소 : eq(n) - n번째(equal)요소 : not(선택자) - 선택자와 일치하지 않은 요소 선택요소 : lt(n) - n번째 미만(less than)요소 : gt(n) - n번째 초과(greater than)요소 : has(선택자) - 선택자를 갖고 있는 요소 선택요소 : nth:child(숫자n) - n의 배수 : nth-child(3n) : 0, 3, 6 …(번째)요소 : nth:child(숫자n+1) - n+1의 배수 : nth-child(3n+1) : 1, 4, 7 …(번째)
필터 선택자 예제
filterSelector.html
- 홀수행 선택 (행 인덱스 : 0부터 시작)
- 짝수행 선택
- 첫 번째 행
- 특정 행 선택 : tr의 5행(여섯번째 행)
- tr의 5행보다 큰 행 전부 선택
- tr의 0행 제외하고 모두 선택
- nth-child(숫자n+1)
- 짝수 열 선택 : nth-child(숫자n) : 2n
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자</title>
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// table1 찾기
// 1. 홀수행 선택 (행 인덱스 : 0부터 시작)
$('#table1 tr:odd').css('background-color', 'gray');
// 2. 짝수행 선택
$('#table1 tr:even').css('background-color', 'green');
// 3. 첫 번째 행
$('#table1 tr:first').css({'background-color':'pink', 'fontSize':'20px'});
// 4. 특정 행 선택 : tr의 5행(여섯번째 행)
$('#table1 tr:eq(5)').css('color', 'red');
// 5. tr의 5행보다 큰 행 전부 선택
$('#table1 tr:gt(5)').css('color', 'blue');
// table2에서 찾기
// 6. tr의 0행 제외하고 모두 선택
$('#table2 tr:not(tr:eq(0))').css('background', 'gold');
// nth : 서수(~번째)
// 7. nth-child(숫자n+1)
$('#table2 tr:nth-child(3n+1)').css('background', 'orange');
// 8. 짝수 열 선택 : nth-child(숫자n) : 2n
$('#table2 td:nth-child(2n)').css('background', 'yellow');
});
</script>
</head>
<body>
<h1>table1</h1>
<table id="table1" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이정후</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>이장군</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>허훈</td><td>40</td><td>대구</td></tr>
</table>
<br><br>
<h1>table2</h1>
<table id="table2" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이대호</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>기성용</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>박인비</td><td>40</td><td>대구</td></tr>
</table>
</body>
</html>