[ JavaScript ] JS jQuery api 범위 제한 , .find()

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

 

 

- selector context

 

 

가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것입니다.

 

그 제한된 범위를 jQuery에서는 selector context라고 합니다.

 

 

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $( ".marked", "#active").css( "background-color", "skyblue" );
</script>

 

 

 

 

 

선택자를 아래와 같이 작성해도 결과는 동일합니다.

 

 

 $( ".marked", "#active").css( "background-color", "skyblue" );

 

 

 

 

- .find()

 

find는 jQuery 객체 내에서 엘리먼트를 조회하는 기능을 제공합니다.

 

아래의 코드는 위의 예제와 효과가 같습니다.

 

 

 

$( "#active").find('.marked').css( "background-color", "skyblue" );

 

 

 

find 는 체인을 끊지 않고 작업의 대상을 변경하고 싶을 때 사용합니다.

 

 

 

 

 

$('#active').css('color','blue').find('.marked').css( "background-color", "skyblue" );

기본예제를 위와같이 체이닝하여 사용가능합니다.

 

 

 

 

즉 li.item-li 엘리먼트에 해당하는 모든 엘리먼트의 배경색을

파란색으로 변경한 후에 li 엘리먼트만을 조회해서 배경색을 하늘색으로 지정하고 있습니다.

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.