jQuery 탐색(순회)메소드 - 자손

	/*예제 스타일 지정*/
    <style>
        .wrap,.wrap * {
            border: 1px solid lightcoral;
            display : block;
            margin : 15px;
            padding : 5px;
            color: coral;    
        }
    </style>

탐색 순회 메소드

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

• $("선택자").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(){
            //스타일 적용할 객체 미리 선언해놓기
            var style1 = {color:"red",border:"2px solid red"};
            var style2 = {color:"orange",border:"2px solid orange"};
            var style3 = {color:"yellowgreen",border:"2px solid yellowgreen"};
            var style4 = {color:"green",border:"2px solid green"};
            var style5 = {color:"blue",border:"2px solid blue"};
            //children
            $(".wrap").children().css(style1); // .wrap 의 자손
            $(".wrap").children().children().css(style2); // .wrap의 자손의 자손 ul/p
            //children("선택자")
            $(".wrap").children().children("ul").css(style3); // .wrap의 자손의 자손중 ul만 선택
            //find("선택자")
            $(".wrap").find("li").css(style4); //.wrap의 모든 후손중 li만 선택
            $(".wrap").find("span").css(style5); //.wrap의 모든 후손중 span만 선택
        });
    </script>