조상, 후손, 동위 선택자

    <h3>조상 탐색 함수</h3>

    <div class="wrap1">

        <div style="width:500px;"> div(great-grandparent)

            <ul> ul(grandparent)

                <li> li(parent)

                    <span> span </span>

                </li>

            </ul>

        </div>

       

        <div style="width:500px"> div(great-grandparent)

            <p> p(parent)

                <span>span</span>

            </p>

           

        </div>

    </div>

   <script>

        $('span:eq(0)').parent().css({

            color:'red',

            border:'2px solid red'        

        });

        //$('span:eq(0)').parent().praret().parent()

        $('span:eq(0)').parents('ul').css({

             //ul->div로 표기하면 div 2개가 파란색이됨.

             //미기재하면 전체 부모가 모두 변경됨.

            color:'blue',

            border : '2px solid blue'            

        });

        $('span:eq(1)').parentsUntil('.wrap1').css({  //모든 부모모

            color:'green',

            border:'2px solid green'

        })

---------------------------------------------------------------------------

 <h3>후손 요소 선택 함수</h3>

    div.wrap2>div[style="width 500px;"] ch.div(chind)

    <div  class="wrap2">

        <div style="width:500px"> div(child)

            <ul> ul(grandchild)

                <li>(gerat-drandchiod)

                    <span>

                        span

                    </span>

                </li>

            </ul>

        </div>

        <div style="width:500px;"> div(child)

         <p> p(grandchild)  

            <span>

                span

            </span>

        </p>

    </div>

    </div>

    <script>

        $('.wrap2').children().css({

            //children()한번더 기재하면 자식자식

            color : 'blue',

            border : '2px solid blue'

        });

    </script>

    <script>

        $('.wrap2').find('ul').css({

            //특정자식찾기가 가능해짐  //자식은 너무 많아서 find로 직접 찾기

            color:'red',

            border : '2px solid red'

        });

     </script>

 

///////////////////////////////////////////////////////////////////////////////////////////

    <h3>동위요소() 탐색함수</h3>

    <!--div.wrap3[style='border:2px solid black;']>(p+span+h2+h3+p)-->

    <div class="wrap3" style="border:2px solid black;">

        div(parent)

        <p>1번 p태그</p>

        <span>2번 span태그</span>

        <h2>3번 h2태그</h2>

        <h3>4번 h3태그</h3>

        <p>5번 p태그</p>

    </div>

    <script>

        // side 옆에있는

        $('h2').siblings().css({

            color:'red',

            border :'2px solid red'

        });

        $('h2').siblings('p').css({

            color:'blue',

            border :'2px solid blue'

        });

        // prev 앞에

        $('h2').prev().css({

            background:'lightblue'

        });

        $('h2').prevAll().css({

            background : 'gold'

        });

        $('h2').prevUntil('p').css('color','black');

        // next 다음에

        $('h2').next().css({

            color:'plum',

            border:'2px solid plum'

        });

        $('h2').nextAll().css('background', 'wheat');

        $('h2').nextUntil('p').css('border','2px solid darkgreen');

    </script>