jQuery 선택자
jQuery 선택자에 대해 알아보는 시간을 가지도록 하겠습니다.
jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.
jQuery 선택자의 형식은 다음과 같습니다.
| $("선택자") | $("#gnb") |
|---|
01. 기본 선택자
| 선택자 종류 | 설명 | |
|---|---|---|
| 태그 선택자 | $("p") | p 요소를 선택합니다. |
| id 선택자 | $("#gnb") | #gnb 요소를 선택합니다. |
| class 선택자 | $(".logo") | .logo인 요소를 선택합니다. |
| 자식 선택자 | $("#gnb > ul > li") | #gnb의 자식 요소의 자식 요소 li를 선택합니다. |
| 하위 선택자 | $("#gnb ul") | #gnb 하위에 있는 모든 ul 요소를 선택합니다. |
| 인접 선택자 | $("#visual + content") | #visual 다음에 오는 #content 요소를 선택합니다. |
| 형제 선택자 | $("#visual ~ #footer") | #visual의 형제 요소 #footer를 선택합니다. |
| 종속 선택자 | $("div.util") | div 요소 중 class가 util인 요소를 선택합니다. |
| 그룹 선택자 | $(".left, .right, #banner") | .left, .right, #banner 요소들을 선택합니다. |
| 전체 선택자 | $("*") | 모든 요소를 선택합니다. |
선택자를 하나씩 코딩하면서 결과를 그때그때 확인하는 방법이 jQuery 선택자를 이해하는 좋은 방법입니다.
02. 예제
{
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
* {
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("border","4px solid red");
$("#gnb").css("border", "4px solid orange");
$(".logo").css("border", "4px solid yellow");
$("#gnb > ul > li").css("border", "4px solid green");
$("#gnb > ul").css("border", "4px solid blue");
$("#visual + #content").css("border", "4px solid navy");
$("#visual + #footer").css("border", "4px solid purple");
$("div.util").css("border", "4px solid pink");
$(".left,.right,#banner").css("border", "4px solid gray");
});
</script>
</head>
<body>
<header id="header">
<div class="logo">로고</div>
<div class="util">회원가입</div>
<nav id="gnb">
<ul>
<li>메뉴1
<ul>
<li>메뉴1_1</li>
</ul>
</li>
</ul>
</nav>
<div id="visual">
<p>비주얼</p>
</div>
<div id="content">
<div class="left">왼쪽</div>
<div class="right">
<div class="util">오른쪽</div>
</div>
<div id="banner">배너</div>
<footer id="footer">푸터</footer>
</div>
</header>
</body>
</html>
}
03. 결과물
'jQuery' 카테고리의 다른 글
| jQuery 클래스 메서드 (3) | 2022.09.03 |
|---|---|
| 탐색 선택자 (4) | 2022.08.30 |
| 필터 선택자 (4) | 2022.08.30 |
| 속성 선택자 (4) | 2022.08.30 |
| jQuery 기본 개념 (6) | 2022.08.29 |
댓글