티스토리 뷰

반응형

안녕하세요. 이번 포스팅에서는 제이쿼리(jquery) 선택자 중 직접 선택자에 대해서 알아보도록 하겠습니다. 

 


선택자는 HTML 요소를 선택하여 가져옵니다. jquery에서 선택자는 CSS와 마찬가지로 가져온 요소의 스타일을 변경하는 데 사용됩니다. 다만 차이점은 CSS로 스타일을 적용하는 경우는 사용자의 동작에 의해 동적으로 스타일을 변경하는 게 불가능합니다. 하지만 jquery의 선택자를 이용하면 HTML의 요소들을 사용자의 동작에 맞게 동적으로 스타일을 변경하는 것이 가능합니다. jquery 선택자도 CSS 선택자와 마찬가지로 다양한 종류의 선택자를 제공하고 있습니다. 직접선택자를 시작으로 하나씩 알아보도록 하겠습니다.


1. 전체 선택자

전체 선택자는 HTML 요소 전체를 선택하는 선택자(Selector)입니다. HTML 문서 내의 정의된 모든 태그를 선택합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>전체 선택자 ("*")</title>
    <script src = "js/jquery.js"></script>
    <script>
        $(function(){
            $("*").css("color","blue");
        });
    </script>
</head>
<body>
    <h1>Hellow World!</h1>
    <h2>Hellow World!</h2>
    <h3>Hellow World!</h3>
</body>
</html>

전체 선택자 적용된 형태


2. 아이디 선택자 (ID Selector)

아이디 선택자는 id 속성에 지정한 값을 포함하는 모든 요소를 선택합니다. 아이디 선택자의 기본 형태는 아래와 같습니다. 

$("#id 속성값")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>전체 선택자 ("*")</title>
    <script src = "js/jquery.js"></script>
    <script>
        $(function(){
            $("#title").css("color","blue");
        });
    </script>
</head>
<body>
    <h1 id = "title">직접 선택자 예제</h1>
    <h2>Hello World!</h2>
    <h3>Hellow World!</h3>
</body>
</html>

id 선택자 결과

▼ <h1> 태그요소의 id 속성값을 "title"로 지정합니다. $("#title").css("color","blue"); 같이 코드를 작성함으로써 id 속성값이 "title"인 요소를 선택하여 color 속성값을 blue로 변경하는 예제입니다.


3. 클래스 선택자 (Class Selector)

클래스 선택자는 요소의 class 속성에 지정한 값을 포함하는 요소를 선택합니다. 

 

$(".id 속성값")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>전체 선택자 ("*")</title>
    <script src = "js/jquery.js"></script>
    <script>
        $(function(){
            $(".title").css("color","blue");
        });
    </script>
</head>
<body>
    <h1 class = "title">직접 선택자 예제</h1>
    <h2>Hello World!</h2>
    <h3>Hellow World!</h3>
</body>
</html>

class 선택자 적용한 결과

▼ <h1> 태그요소의 class 값을 "title"로 지정합니다. 그리고 해당 요소를 선택하기 위해 $(".title").css("color,"blue")와 같이 사용하여 class 속성값이 "title"인 요소를 선택하여 color 속성값을 "blue"로 지정합니다.


4. 태그 선택자

지정한 요소명(태그명)과 일치하는 요소를 모두 선택하는 선택자입니다. 

 

$("요소명")

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>전체 선택자 ("*")</title>
    <script src = "js/jquery.js"></script>
    <script>
        $(function(){
            $("h1").css("color","blue");
        });
    </script>
</head>
<body>
    <h1>직접 선택자 예제</h1>
    <h2>Hello World!</h2>
    <h3>Hellow World!</h3>
</body>
</html>

요소명 선택자

$("h1").css("color","blue")와 같이 사용하여 <h1> 태그요소를 선택하여 해당 요소의 color 속성값을 blue로 지정합니다.


5. 그룹 선택자

여러개의 요소를 각자 다른 선택자를 사용하여 한꺼번에 선택할 수 있는 선택자입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>전체 선택자 ("*")</title>
    <script src = "js/jquery.js"></script>
    <script>
        $(function(){
            $("h1, #content, h3").css("color","blue");
        });
    </script>
</head>
<body>
    <h1>직접 선택자 예제</h1>
    <h2 id = "content">Hello World!</h2>
    <h3>Hellow World!</h3>
</body>
</html>

그룹 선택자 적용 결과

▼ 그룹 선택자를 통해 <h1>, <h2>, <h3> 요소를 모두 선택하여 CSS 스타일을 적용하는 예제입니다. <h2> 요소는 아이디 선택자를 통해 요소를 선택하였으며 나머지 요소들은 태그 선택자를 통해 구현하였습니다. 

반응형