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>
/*
제이쿼리 탐색 선택자.
- 제이쿼리 탐색 선택자를 이용하면 직접 선택자를 이용해 선택한 요소 중
원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있는 장점이 있음.
탐색 선택자의 종류.
- 위치 탐색 선택자
==> 선택한 요소 중 위치를 기준으로 선택하는 선택자.
- 속성 탐색 선택자
==> 요소의 지정된 속성을 기준으로 선택하는 선택자.
*/
/*
위치 탐색 선택자
1. 첫번째 요소 선택 : 전체 선택자 중에서 첫번째 요소만 선택
형식) $("요소선택:first") /or/ $("요소선택").first()
2. 마지막 요소 선택 : 전체 선택자 중에서 마지막 요소만 선택
형식) $("요소선택:last") /or/ $("요소선택").last()
*/
$(function() {
// $(".menu li:first").css("color", "red");
// or
$(".menu li").first()
.css("color", "red");
// $(".menu li:last").css("color", "blue");
// or
$(".menu li").last()
.css("color", "blue");
});
</script>
</head>
<body>
<h2>탐색 선택자 - 위치 탐색 선택자</h2>
<ul class="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
</html
