2024-10-16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
/*
위치 탐색 선택자
3. 짝수번째(홀수 인덱스) 요소 선택자
==> 전체 요소 중에서 짝수번째(홀수 인덱스) 요소만 선택하는 선택자
형식) $("요소선택:odd") /or/ $("요소선택").oddd()
4. 홀수번째(짝수 인덱스) 요소 선택자
==> 전체 요소 중에서 홀수번째(짝수 인덱스) 요소만 선택
형식) $("요소선택:even") /or/ $("요소선택").even()
인덱스는 [0] 부터 시작함.
*/
$(function() {
$(".menu li:odd").css("background-color", "lightgray");
$(".menu li:even").css("background-color", "yellow");
});
</script>
</head>
<body>
<h2>탐색 선택자 - 위치 탐색 선택자</h2>
<ul class="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
<li>내용7</li>
<li>내용8</li>
<li>내용9</li>
<li>내용10</li>
<li>내용11</li>
<li>내용12</li>
<li>내용13</li>
<li>내용14</li>
<li>내용15</li>
<li>내용16</li>
<li>내용17</li>
<li>내용18</li>
<li>내용19</li>
<li>내용20</li>
</ul>
</body>
</html
