본문 바로가기
💻 1. 웹개발_Front end/1-5 JQuery

[JQuery] 06-2 선택자

by 달님🌙 2021. 9. 12.
반응형

 

선택자

 

- CSS 선택자처럼 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있음

- HTML에 작성한 스타일 : 사용자에 의해 스타일을 변경할 수 없으므로 정적임

- 제이쿼리 선택자 : 동적임

 

문서 객체 모델 (DOM)

 

- DOM = Document Object Model

- HTML문서 객체 구조를 말함

- 문서 객체 모델에서는 모든 태그를 객체라고 부름

- 태그에는 기능과 속성이 포함되어 있다.

- 예를 들어, <img> 태그의 기능은 이미지출력 이고 속성에는 src, alt, width 등이 있다.

 

 

- HTML의 문서 객체 구조를 그림으로 표현하면 트리 구조가 된다.

- 가장 상위에 위치하는 <html>은 뿌리(Root)라고 하고, 가지처럼 뻗어나가는 요소는 노드(Node)라고 함

- 노드의 종류 : 요소노드, 텍스트노드, 속성노드

 

선택자 사용하기

 

- 제이쿼리 실행 -> <body> 영역에 문서 객체 불러오기 순서로 하면 안됨

- <body>가 생성되기도 전에 선택자가 먼저 실행되므로 이렇게 되면 선택자로 문서 객체를 선택할 수 없음

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="title">제목</h1>
    <script>
        //제이쿼리 즉시 실행 함수 - html 문서 로딩이 완료되면 실행
        $(function() {
            //제이쿼리 아이디 선택자
            //선택된 요소의 글자색을 빨간색으로 변경
            $("#title").css("color", "red");
        });
    </script>
</body>
</html>

기본 선택자 종류

 

 

직접 선택자

 

- 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자

- 직접 선택자의 종류 : 전체(*), 아이디(#), 클래스(,), 요소명, 그룹(,) 선택자

 

전체 선택자

 

    <script>
        $(function() {
            //전체 요소 선택자
            $("*").css("border", "1px solid red");
        })
    </script>

 

아이디 선택자

 

    <script>
        $(function() {
            //아이디 선택자
            //속성 여러개 적용
            //체이닝 기법 : 메소드 여러개를 줄줄이 사용하는 방식
            //$("#tit").css("border", "1px solid red").css("background-color", "#ff0");
            $("#tit").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

 

체이닝 기법

 

- 한 객체에 여러 메소드를 연속해서 사용하고자 할 때 사용

- 메소드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 붙인다.

 //체이닝 기법 : 메소드 여러개를 줄줄이 사용하는 방식
 $("#tit").css("border", "1px solid red").css("background-color", "#ff0");

 

 

클래스 선택자

 

    <script>
        $(function() {
            //클래스 선택자
            $(".tit").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

 

요소명 선택자

 

    <script>
        $(function() {
            //요소 선택자
            $("h2").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

 

그룹 선택자
    <script>
        $(function() {
            //그룹 선택자
            //속성을 객체로 전달하는 방식
            $("h1, .tit").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

 

종속 선택자
<script>
        $(function() {
            //종속 선택자
            $("h1.tit").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

 

인접 관계 선택자

 

- 인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용

- 가까이에 있는 요소에는 이전 요소와 다음 요소로 나뉨

 

문서 객체 구조와 관계

 

 

1. a는 c의 상위(closet) 요소이고, c는 b의 하위 요소이다.

2. b는 c의 부모(parent) 요소이고, c는 b의 자식(children) 요소이다.

3. d는 e의 형(prev) 요소이고, f는 e의 동생(next) 요소이다.

 

 

부모 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부모 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>부모 요소 선택자</h1>
    <!--ul>(li>ul>li*2) + li*2-->
    <ul id="wrap">
        <li>리스트1
            <ul>
                <li id=list_1>리스트1-1</li>
                <li>리스트1-2</li>
            </ul>
        </li>
        <li>리스트2
            <ul>
                <li id=list_2>리스트2-1</li>
                <li>리스트2-2</li>
            </ul>
        </li>
        <li>리스트3
            <ul>
                <li id=list_3>리스트3-1</li>
                <li>리스트3-2</li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            //부모 요소 선택자
            //list_1의 바로 위 부모 선택됨 : ul
            $("#list_1").parent().css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

</body>
</html>

 

 

하위 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하위 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>하위 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>하위 요소 선택자2</h1>
            <p>내용2</p>
        </section>
    </div>
    <script>
        $(function() {
            //하위 요소 선택자
            //wrap 요소 하위에 있는 h1 선택됨
            $("#wrap .p").css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

</body>
</html>

 

 

자식 요소 선택자

 

<wrap 자식인 h1 선택됨>

<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>자식 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>자식 요소 선택자2</h1>
            <p>내용2</p>
        </section>
    </div>
    <script>
        $(function() {
            //자식 요소 선택자
            // wrap 자식인 h1 선택됨
            $("#wrap>section>h1").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>
</body>

 

<wrap 자식인 h1 선택됨>

<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>자식 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>자식 요소 선택자2</h1>
            <p>내용2</p>
        </section>
    </div>
    <script>
        $(function() {
            // wrap 자식인 h1 선택됨
            $("#wrap").children("h1").css( {
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>
</body>

 

<wrap의 모든 자식 요소 선택>

<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>자식 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>자식 요소 선택자2</h1>
            <p>내용2</p>
        </section>
    </div>
    <script>
        $(function() {
            //wrap의 모든 자식 요소 선택
            $("#wrap").children().css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>
</body>

 

형 / 동생 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>형/동생 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>형/동생 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>형/동생 요소 선택자2</h1>
            <p>내용2</p>
            <p>내용3</p>
            <p class="txt">내용4</p>
            <p>내용5</p>
            <p>내용6</p>
        </section>
    </div>
    <script>
        $(function() {
            //형 요소 선택자
            //내용3 선택
            $(".txt").prev().css({
                "border" : "1px solid red",
                "background-color" : "yellow"
            });

            //동생 요소 선택자
            //내용5 선택
            $(".txt").next().css({
                "border" : "1px solid red",
                "background-color" : "brown"
            });

            //동생 요소 선택자
            //내용6 선택
            $(".txt").next().next().css({
                "border" : "1px solid red",
                "background-color" : "pink"
            });

            //동생 요소 선택자
            //내용5 선택
            $(".txt + p").css({
                "border" : "1px solid red",
                "background-color" : "skyblue"
            });
        });
    </script>

</body>
</html>

 

 

전체 형 / 동생 요소 선택자

 

<script>
  $("요소 선택").prevAll()
  $("요소 선택").nextvAll()
 </script>

 

 

전체 형제 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전체 형/동생 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="p">전체 부모 요소 선택자</h1>
    <div id="wrap">
        <h1>전체 형/동생 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>전체 형/동생 요소 선택자2</h1>
            <p>내용2</p>
            <p>내용3</p>
            <p class="txt">내용4</p>
            <p>내용5</p>
            <p>내용6</p>
        </section>
    </div>
    <script>
        $(function() {
            //전체 형 요소 선택자
            //h1, 내용2, 내용3 선택
            $(".txt").prevAll().css({
                "border" : "1px solid red",
                "background-color" : "$00"
            });
            //전체 동생 요소 선택자
            //h1, 내용2, 내용3 선택
            $(".txt").nextAll().css({
                "border" : "1px solid red",
                "background-color" : "pink"
            });
        });
    </script>

</body>
</html>

 

 

 

전체 형제 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전체 형 / 동생 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>전체 형/동생 요소 선택자1</h1>
        <p>내용1</p>
        <p class= " txt">내용2</p>
        <p>내용3</p>
        <p class = "txt">내용4</p>
    </div>
    <script>
        $(function() {
            //전체 형 요소 선택자
            $(".txt").siblings().css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

</body>
</html>

 

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전체 형제 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="p">부모 요소 선택자</h1>
    <div id="wrap">
        <h1>전체 형제 요소 선택자1</h1>
        <p class="p">내용1</p>
        <section>
            <h1>전체 형제 요소 선택자2</h1>
            <p>내용2</p>
            <p>내용3</p>
            <p class="txt">내용4</p>
            <p>내용5</p>
            <p>내용6</p>
        </section>
    </div>
    <script>
        $(function() {
            //전체 형제 요소 선택자
            $(".txt").next.css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
        });
    </script>

</body>
</html>

 

범위 제한 전체 형 / 동생 요소 선택자

 

- 기본형

<script>
  $("요소 선택").prevUntil("범위 제한 요소 선택")
  $("요소 선택").nextUntil("범위 제한 요소 선택")
 </script>

 

- 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <h1 class="title">선택자</h1>
        <p>내용1</p>
        <p>내용2</p>
        <p class="txt3">내용3</p>
        <p>내용4</p>
        <p>내용5</p>
        <p class="txt6">내용6</p>
    </div>
    <script>
        $(function() {
            $(".txt3").prevUntil("title").css({
                "border" : "1px solid #0ff",
                "background-color" : "#ff0"
            });
            $(".txt3").nextUntil(".txt6").css({
                "border" : "1px solid red",
                "background-color" : "skyblue"
            });
        });
    </script>

</body>
</html>

 

 

상위 요소 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="title">상위 요소 선택자</h1>
    <section>
        <div>
            <p class="txt1">내용1</p>
        </div>
    </section>
    <section>
        <div>
            <p class="txt2">내용2</p>
        </div>
    </section>
    <script>
        $(function() {
            //상위 요소 전체 선택
            $(".txt1").parents().css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });
            //상위 요소 중 div 선택
            $(".txt2").parents("div").css({
                "border" : "1px dashed red",
                "background-color" : "skyblue"
            });
        });
    </script>

</body>
</html>

 

 

가장 가까운 상위 요소 선택자

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가장 가까운 상위 요소 선택자</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 class="title">선택자</h1>
    <div>
        <p class="txt1">내용1</p>
    </div>
    
    <div>
        <section>
            <p class="txt2">내용2</p>
        </section>
    </div>
    <script>
        $(function() {
            //가장 가까운 상위 요소 중 div 선택
            $(".txt1").closest("div").css({
                "border" : "1px solid red",
                "background-color" : "#ff0"
            });

            //상위 요소 중 div 선택
            $(".txt2").closest("div").css({
                "border" : "1px dashed red",
                "background-color" : "skyblue"
            });
        });
    </script>
</body>
</html>

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-5 JQuery' 카테고리의 다른 글

[JQuary] 07-2 제이쿼리 그룹 이벤트 등록 및 삭제하기  (0) 2021.09.14
[JQuary] 07-1 제이쿼리 이벤트 등록 메서드  (0) 2021.09.14
[JQuary] 06-4 객체 조작  (0) 2021.09.14
[JQuary] 06-3 제이쿼리 탐색 선택자  (0) 2021.09.14
[JQuery] 06-1 제이쿼리 기본 다지기  (0) 2021.09.12

관련글

댓글

티스토리툴바