jQuery Basic Selectors - 온더테크

Contents

jQuery 기본 선택자 (Basic Selectors)

jQuery 선택자는 HTML 문서에서 특정 요소를 찾기 위해 사용됩니다. CSS 선택자와 유사하게 작동하며, 다양한 유형의 선택자를 제공합니다. 기본 선택자에는 요소 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자, 복합 선택자가 있습니다.

요소 선택자 (Element Selectors)

요소 선택자는 HTML 태그 이름을 기반으로 요소를 선택합니다. 예를 들어, 모든 <p> 태그를 선택하려면 다음과 같이 작성합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>요소 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").css("color", "blue");
        });
    </script>
</head>
<body>
    <p>첫 번째 단락입니다.</p>
    <p>두 번째 단락입니다.</p>
</body>
</html>

위 코드에서는 모든 <p> 요소의 텍스트 색상을 파란색으로 변경합니다.

클래스 선택자 (Class Selectors)

클래스 선택자는 특정 클래스 이름을 가진 요소를 선택합니다. CSS 클래스 선택자와 동일한 방식으로 작동하며, 클래스 이름 앞에 .를 붙입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".highlight").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p class="highlight">이 단락은 강조됩니다.</p>
    <p>이 단락은 강조되지 않습니다.</p>
</body>
</html>

위 코드에서는 highlight 클래스를 가진 모든 요소의 배경 색상을 노란색으로 변경합니다.

아이디 선택자 (ID Selectors)

아이디 선택자는 특정 아이디를 가진 요소를 선택합니다. CSS 아이디 선택자와 동일한 방식으로 작동하며, 아이디 이름 앞에 #를 붙입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>아이디 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#unique").css("font-weight", "bold");
        });
    </script>
</head>
<body>
    <p id="unique">이 단락은 고유한 아이디를 가집니다.</p>
    <p>이 단락은 고유한 아이디를 가지지 않습니다.</p>
</body>
</html>

위 코드에서는 unique 아이디를 가진 요소의 글자 굵기를 굵게 설정합니다.

속성 선택자 (Attribute Selectors)

속성 선택자는 특정 속성을 가진 요소를 선택합니다. CSS 속성 선택자와 유사하게 작동하며, 속성 이름을 대괄호 [] 안에 작성합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>속성 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("input[type='text']").val("새로운 값");
        });
    </script>
</head>
<body>
    <input type="text" value="기존 값">
    <input type="button" value="버튼">
</body>
</html>

위 코드에서는 type 속성이 text인 모든 <input> 요소의 값을 “새로운 값”으로 변경합니다.

복합 선택자 (Compound Selectors)

복합 선택자는 여러 선택자를 조합하여 사용합니다. 이를 통해 더 구체적인 요소 선택이 가능합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>복합 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p.highlight, p#unique").css("color", "red");
        });
    </script>
</head>
<body>
    <p class="highlight">이 단락은 강조됩니다.</p>
    <p id="unique">이 단락은 고유한 아이디를 가집니다.</p>
    <p>이 단락은 선택되지 않습니다.</p>
</body>
</html>

위 코드에서는 highlight 클래스를 가지거나 unique 아이디를 가진 모든 <p> 요소의 텍스트 색상을 빨간색으로 변경합니다.

이와 같이 jQuery는 다양한 선택자를 제공하여 HTML 요소를 쉽게 선택하고 조작할 수 있게 합니다. 이러한 기본 선택자를 활용하면 웹 페이지의 특정 요소를 선택하고 스타일을 적용하거나 이벤트를 처리하는 작업이 매우 간편해집니다.

Post Views: 75