[JavaScript] jQuery(제이쿼리)

jQuery 기본 선택자

제이쿼리에서 사용되는 기본 선택자에 대해 살펴봅시다.

기본 선택자

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

선택자 종류	선택자 설명
태그 선택자	$("p")	p 요소 선택
id 선택자	$("#gnb")	#gnb 요소 선택
class 선택자	$(".logo")	.logo인 요소 선택
자식 선택자	$("#gnb > ul > li")	#gnb의 자식 요소(ul)의 자식 요소 li를 선택
하위 선택자	$("#gnb ul")	#gnb의 하위에 있는 모든 li 요소를 선택
인접 선택자	$("#visual + #content")	#visual 다음에 오는 #content 요소를 선택
형제 선택자	$("#visual ~ #footer")	#visual의 형제 요소 #footer를 선택
종속 선택자	$("div.util")	div 요소 중 class가 util인 요소를 선택
그룹 선택자	$(".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>메뉴
                    <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
[JavaScript] jQuery(제이쿼리) - 탐색 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 필터 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 속성 선택자 (4)	2022.08.30
[JavaScript] jQuery(제이쿼리) 알아보기 (5)	2022.08.30

코딩공책📚

[JavaScript] jQuery(제이쿼리) - 기본 선택자

jQuery 기본 선택자

기본 선택자

예제 코드

코드펜 결과

'jQuery' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[JavaScript] jQuery(제이쿼리) - 기본 선택자

jQuery 기본 선택자

기본 선택자

예제 코드

코드펜 결과

'jQuery' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바