제이쿼리 : 기본 선택자

728x90

제이쿼리 : 기본 선택자

JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 기본 선택자에 대하여 알아보도록 하겠습니다.

1. 기본 선택자

선택자 종류	설명
태그 선택자	$("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 요소를 선택합니다.
전체 선택자	$("*")	모든 요소를 선택합니다.

2. 기본 선택자 사용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본 선택자</title>
    <style>
        * {
            margin: 5px;
        }
    </style>
</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>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></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>
</body>
</html>

결과는 다음과 같습니다.

728x90

저작자표시

'JQuery' 카테고리의 다른 글

제이쿼리 : 클래스 관련 메서드 (3)	2022.09.04
제이쿼리 : 탐색 선택자 (5)	2022.09.01
제이쿼리 : 필터 선택자 (10)	2022.08.30
제이쿼리 : 속성 선택자 (7)	2022.08.30
제이쿼리 : 연결 방법 (10)	2022.08.29

🦙코딩보다 알파카🦙

제이쿼리 : 기본 선택자

제이쿼리 : 기본 선택자

1. 기본 선택자

2. 기본 선택자 사용 예제

'JQuery' 카테고리의 다른 글

댓글

티스토리툴바

제이쿼리 : 기본 선택자

제이쿼리 : 기본 선택자

1. 기본 선택자

2. 기본 선택자 사용 예제

'JQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바