jQuery - 기본 선택자

웹 공부일지

jQuery - 기본 선택자 본문

jQuery

jQuery - 기본 선택자

개발자로 거듭나기 2022. 8. 30. 20:04

jQuery 기본 선택자

jQuery의 기본 선택자를 소개해드릴게요. 기본 선택자는 css의 기본 선택자와 흡사합니다.

jQuery 기본 선택자

선택자 종류	설명
태그 선택자	$('p')	p 요소를 선택합니다.
id 선택자	$('#gnb')	#gnb 요소를 선택합니다.
class 선택자	$('.logo')	.logo인 요소를 선택합니다.
자식 선택자	$('#gnb > ul > li')	#gnb의 자식 ul 의 자식 li 요소를 선택합니다.
하위 선택자	$('#gnb ul')	#gnb 하위에 있는 모든 ul 요소를 선택합니다.
인접 선택자	$('#visual + #content')	#visual 다음에 오는 #content 요소를 선택합니다.
형제 선택자	$('#visual ~ #footer')	#visual 요소의 형제요소 #footer를 선택합니다.
종속 선택자	$('div.util')	클래스가 util인 div 요소를 선택합니다.
그룹 선택자	$('.left, .right, #banner')	.left, .right, #banner 요소를 선택합니다.
전체 선택자	$('*')	모든 요소를 선택합니다.

코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <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>
        <div id="banner">배너</div>
        <footer id="footer">푸터</footer>
    </header>
</body>
</html>

결과

'jQuery' 카테고리의 다른 글

jQuery - 클래스 메서드 (6)	2022.09.03
jQuery - 속성 선택자 (7)	2022.08.30
jQuery - 필터 선택자 (8)	2022.08.30
jQuery - 탐색선택자 (6)	2022.08.30
jQuery 연결하기 (15)	2022.08.29