<h3>필터 관련 선택자</h3>
<table border="1">
<!-- (tr>td*3)*5 -->
<tr>
<th>이름</th>
<th>혈액형</th>
<th>거주지</th>
</tr>
<tr>
<td>박명수</td>
<td>AB</td>
<td>서울</td>
</tr>
<tr>
<td>유재석</td>
<td>O</td>
<td>경기</td>
</tr>
<tr>
<td>노홍철</td>
<td>B</td>
<td>인천</td>
</tr>
<tr>
<td>정준하</td>
<td>A</td>
<td>부산</td>
</tr>
<tr>
<td colspan="2">총 인원</td>
<td>4명</td>
</tr>
</table>
tr요소 중 첫 번째 요소와 마지막 요소의 속성 변경
$(function(){
$("tr:first").css("background-color","black").css("color","white");
$("tr:last").css({backgroundColor:"red",color:"darkblue"});
})
tr요소 중 짝수번, 홀수번 요소의 속성 변경
$(function(){
$("tr:even").css("backgroundColor","lightgray");//짝수번째 행 (0부터 시작)
$("tr:odd").css("backgroundColor","lightyellow");//홀수번째 행
})
기준이 되는 요소 중에 특정 요소만 걸러 선택해주는 메소드
- first()
- last()
- filter()
- eq()
- not()
<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>
h4태그 중 첫 번째 요소, 마지막 요소, 2번 인덱스의 속성 변경
$(function(){
//h4요소들 중 가장 처음요소를 선택
$("h4").first().css("font-size","20px");
//h4요소들 중 가장 마지막요소 선택
$("h4").last().css("font-size","10px");
//0부터 시작해서 해당 요소를 선택
$("h4").eq(2).text("eq로 선택됨");
});
h4태그 중 클래스명이 test인 것과 test가 아닌 것의 속성 변경
//h4요소중 test클래스를 가진 요소 선택
$("h4").filter(".test").html("선택받았습니다..");
//h4요소중 test클래스 아닌 요소 선택
$("h4").not(".test").css("color","red");