[JQuery] 선택자

gimyeondong 2020. 4. 20. 11:59

스타일 시트에서는 하위 요소에만 접근 가능

JQuery에서는 상위 요소도 접근 가능

find / children : 하위요소에 대한 접근 함수
closest / parent : 상위요소에 대한 접근 함수
siblings : 동수준 요소에 대한 접근 함수

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
        <script>
        // find / children : 하위요소에 대한 접근 함수
        // closest / parent : 상위요소에 대한 접근 함수
        // siblings : 동수준 요소에 대한 접근 함수
            

        
        </script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <p class="title">This is title</p>
                <ul class="fruits">
                    <li class="fruit">Apple</li>
                    <li class="fruit">Orange</li>
                    <li class="fruit">Grape</li>
                </ul>
            </div>
            <div class="body">
                <p class="body_title">This is title</p>
                <ul class="fruits">
                    <li class="fruit test">Apple</li>
                    <li class="fruit">Orange</li>
                    <li class="fruit">Grape</li>
                </ul>
            </div>
        </div>
    </body>
</html>

상위 요소 선택

.test의 상위

parent() : 상위 요소

            $(function(){
                console.log($(".test").parent().parent().css("background-color","pink"));
            })

closest(".body") : 가장 가까운 .body

            $(function(){
                console.log($(".test").closest(".body").css("background-color","pink"));
            })

siblings 형제 요소 찾아가기

.body로 올라간후 siblings(".header")를 찾아라

            $(function(){
                console.log($(".test").closest(".body").siblings(".header").css("background-color","pink"));
            })

container 까지 올라간 후 자식들 선택

            $(function(){
                console.log($(".test").closest(".container").children().css("background-color","pink"));
            })

children

container 까지 올라간후 직계 자식만 선택

            $(function(){
                console.log($(".test").closest(".container").children(".header").css("background-color","pink"));
            })

find

직계 자식이 아닌 하위 요소도 선택

            $(function(){
              $(".test").closest(".container").find(".title").css("background-color","pink");
            })

nth-child()

            $(function(){
              $(".test").closest(".container").find(".header .fruit:nth-child(2)").css("background-color","pink");
            })

.test에서 .container로 올라간후 .header 밑의 2번째 자식 fruit 선택

에러 : 자바스크립트 노드에는 parent 기능 없음

            $(function(){

                var fruits = $(".fruit");
//              console.log(fruits[0].parent());
                //에러 : 자바스크립트 노드에는 parent 없음
                
                console.log($(fruits[0]).parent());
                //제이쿼리를 입히면 동작
                // 이미 만들어진 요소(객체나 변수)에는 ""넣지 않음
                //"fruits[0]" : fruits 태그의 0이라는 속성
            })

JQuer를 입히면 동작