📗 self-study/📗 KH정보교육원 당산지원
[jQuery] 04_필터링 선택자
천재강쥐
2022. 10. 4. 10:37
더보기
jQuery의 필터링 선택자에 대해 알아보자
잠깐!
들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>추가적인 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- 온라인 방식 -->
</head>
필터링 관련 선택자 및 메소드
필터 관련 선택자
👉🏻 선택자:first => 첫 번째
👉🏻 선택자:last => 마지막
👉🏻 선택자:even => 짝수 번째 (기준은 0번부터 시작점이 잡힌다!)
👉🏻 선택자:odd => 홀수 번째
<!-- table>tr*5 + Enter -->
<table border="1">
<tr>
<td>이름</td>
<td>혈액형</td>
<td>거주지</td>
</tr>
<tr>
<td>홍길동</td>
<td>A형</td>
<td>서울</td>
</tr>
<tr>
<td>김영희</td>
<td>B형</td>
<td>경기도</td>
</tr>
<tr>
<td>이순신</td>
<td>O형</td>
<td>부산</td>
</tr>
<tr>
<td colspan="2">총인원</td>
<td>3명</td>
</tr>
</table>
<script>
$(function () {
$("tr:first").css("backgroundColor", "black").css("color", "white");
$("tr:last").css({backgroundColor:"red", color:"white"});
// 우리 눈에 속성명 컬럼은 1번째 같지만 컴퓨터 기준으로는 0번째로 잡힘 (시작점: 0)
// 즉 0, 2, 4번째에 속성이 먹힌 것
$("tr:even").css("backgroundColor", "lightgray");
$("tr:odd").css("backgroundColor", "yellow");
});
</script>
필터링과 관련된 메소드
기준이 되는 요소 중에서 특정요소들만 걸러서 선택해 주는 메소드
👉🏻 태그명:first() : 태그 요소 중 첫 번째 것을 선택
👉🏻 태그명:last() : 태그 요소 중 마지막 것을 선택
👉🏻 태그명:filter() : 태그명일 뿐만 아니라 괄호() 안에 새로운 조건을 더해서 모두 충족하는 것만 선택
👉🏻 태그명:eq() : 괄호() 안에 인덱스를 제시하고 태그명의 인덱스 순번에 해당하는 것만 선택
👉🏻 태그명:not() : 태그명이 아닌 것만 선택
👉🏻 태그명.text() : 선택된 요소의 innerText와 관련된 기능을 수행
<!-- h4[class=test]{test-$}*6 + Enter -->
<h4 class="test">test-1</h4>
<h4 class="test">test-2</h4>
<h4 class="test">test-3</h4>
<h4 class="test">test-4</h4>
<h4>test-5</h4>
<h4 class="test">test-6</h4>
<script>
$(function() {
// h4 요소들 중에서 가장 처음 것을 선택
// $("h4:first").css("font-size", "20px"); 와 똑같음
$("h4").first().css("font-size", "20px");
// h4 요소들 중에서 가장 마지막 것을 선택
//$("h4:last").css("font-size", "30px");
$("h4").last().css("font-size", "30px");
// 추가적인 조건을 제시하는 filter() 메소드
// h4 요소들 중에서 클래스명이 test인 것들만 선택
// $("h4[class=test]").html("ㅋㅋㅋㅋㅋ"); 와 똑같음
$("h4").filter(".test").html("ㅋㅋㅋㅋㅋ");
// 아닌 것만 선택하는 not()
// h4 요소들 중에서 클래스명이 test가 아닌 것들만 선택
$("h4").not(".test").css("color", "red");
// 인덱스를 제시할 수 있는 eq() 메소드 => 0이 시작점
// h4 요소들 중에서 2번째 요소를 선택
$("h4").eq(2).text("eq로 선택됨");
// .text(): 선택된 요소의 innerText와 관련된 기능을 수행하는 메소드
});
</script>