ss [jQuery]기본 선택자
본문 바로가기
jQuery

[jQuery]기본 선택자

by 꿈나무개발 2022. 8. 30.
728x90

jQuery 선택자

jQuery 선택자는 CSS 선택자와 의미가 같은 것이 많습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

01. jQuery 선택자 형식

$("선택자")
$("#gnb")

02. 기본 선택자 종류

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

03. 기본 선택자 예시

<script src="https://code.jquery.com/jquery-3.6.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>
728x90
반응형

'jQuery' 카테고리의 다른 글

[jQuery]클래스 관련 메서드  (1) 2022.09.02
[jQuery]탐색 선택자  (3) 2022.08.30
[jQuery]필터 선택자  (2) 2022.08.30
[jQuery]속성 선택자  (3) 2022.08.30
[jQuery]소개  (5) 2022.08.29

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바