jQuery - 기본 선택자

jQuery 선택자

제이쿼리는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

jQuery 선택자 형식

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

---

기본 선택자

선택자 종류	설명
태그 선택자	$("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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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>

HTML

<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>

결과