필터 ">
<!-- 01_basic/01-05_필터선택자.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-05_필터선택자</title>
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:odd").css("background", "gold"); // tr 요소중 홀수행만 선택
$("tr:even").css("background", "orange"); // tr 요소중 홀수행만 선택
$("td:first").css("background", "red"); // 첫번째 td 선택
$("td:last").css("background", "blue"); // 마지막 td 선택
$("li:eq(0)").css("background", "lightblue"); // index 가 0 인 li 요소 선택
$("li:gt(0)").css("background", "purple"); // index 가 0 보다 큰 li 요소 선택
(function upDown(){
$("h2").slideToggle(1000, upDown);
})();
$(":animated").css("border", "2px solid navy"); // 움직이는 요소 선택
});
</script>
<style type="text/css">
table, tr, td{
border: 1px solid gray;
border-collapse: collapse;
}
table {
width: 300px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h1>필터 선택자</h1>
<h2> 제목 2 </h2>
<table>
<caption>필터 선택자</caption>
<colgroup>
<col><col><col>
</colgroup>
<tbody>
<tr>
<td> 1 </td><td> 2 </td><td> 3 </td>
</tr>
<tr>
<td> 4 </td><td> 5 </td><td> 6 </td>
</tr>
<tr>
<td> 7 </td><td> 8 </td><td> 9 </td>
</tr>
<tr>
<td> 10 </td><td> 11 </td><td> 12 </td>
</tr>
</tbody>
</table>
<br/>
<ul>
<li class="bg">내용 1</li>
<li class="bg">내용 2</li>
<li class="bg">내용 3</li>
</ul>
</body>
</html>