jQuery 05. 요소탐색(순회)메소드_ 자손후손

* 자손,후손 (Descendant) 메소드 

: 기준이 되는 요소의 하위요소들을 선택할 수 있는 메소드 

- $("선택자").children()

    선택된 요소의 모든 자손(바로 하위) 요소들을 선택해주는 메소드

       

- $("선택자").children("선택자")

    선택된 요소의 모든 자손들 중에서 제시한 값과 일치하는 요소들만 선택

- $("선택자").find("선택자")

    선택된 요소의 모든 후손(하위요소 전체)들 중 제시한 값과 일치하는 요소들만 선택

 <div class="wrap">
        <div> div(증조할머니)
            <ul> ul(할머니)
                <li> li(엄마)
                    <span>span</span>
                </li>
            </ul>
        </div>

        <div> div (할아버지)
            <p> p 아빠
                <span>span</span>
            </p>
        </div>

    </div>
    <script>
        $(function(){
            //앞으로 부여할 스타일 객체
            const style1 = {color:"red",border:"2px solid red"};
            const style2 = {color:"green",border:"2px solid green"};
            const style3 = {color:"blue",border:"2px solid blue"};
            const style4 = {color:"orange",border:"2px solid orange"};
            const style5 = {color:"pink",border:"2px solid pink"};

            //children() 
            $(".wrap").children().css(style1);
            $(".wrap").children().children().css(style2);


            //childeren("선택자")
            $(".wrap").children().children("ul").css(style3);

            //find("선택자")
            $(".wrap").find("li").css(style4);
            $(".wrap").find("span").css(style5);
            
        })

    </script>

div(증조할머니)

ul(할머니)
• li(엄마) span

div (할아버지)

p 아빠 span