JQuery day10

자식, 자손 요소 탐색

자식, 자손 요소의 탐색

특정 요소에서 자식, 자손요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자

종류	설명
children()	매개변수로 전달된 요소를 바로 하위 요소(자식 요소)에서 찾아줌
find()	선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있음

<div class="container">
    <div>div 요소
        <ul>ul 요소
            <li>li 요소</li>
            <li id="second">li 요소
                <p>p요소
                    <span>span 요소</span>
                </p>
            </li>
            <li>li 요소</li>
            <li>li 요소</li>
        </ul>
    </div>
</div>
<button id="childrenBtn">ul 요소의 모든 자식 요소</button>
<button id="findBtn">li 요소의 모든 자손 요소</button>

html 확인 )

<script>
$(function(){
    $('#childrenBtn').on('click', function(){
        $('ul').children().css({"border":"3px solid gold"}); // 모든 자식 요소만
    });
});
</script>

children() 적용 )

<script>
$(function(){
    $('#findBtn').on('click', function(){
        $('li').find('*').css({"border" : "3px solid pink"}); // 모든 자손 요소
    });
});
</script>

find(‘*’)적용 )