jQuery 속성 범위 제한

Element 객체에서 getElementsBy* 메소드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한됨 jQuery에서는 어떻게 하는지 학습

selector context

jQuery에서 조회 범위를 제한하는 방법중 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것임. 그 제한된 범위를 jQuery에서는 selector context라고 함
$(css선택자, selector context) 이렇게 jQuery 함수는 2번째 인자로 seleotr context를 받아 조회 범위를 제한할 수 있음 (예시 - $('.marked', '#active') : marked 클래스를 가진 요소들을 조회하는데 조상요소 중에서 active라는 아이디값을 가진 요소들만을 검색)
$('.marked', '#active') = $('#active .marked')

.find()

find는 jQuery 객체 내에서 엘리먼트를 조회는 기능을 제
$('#active').find(.marked) == $('.marked', '#active') = $('#active .marked')

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>
      <ul id="front">
        <li class="checked">HTML</li>
        <li>CSS</li>
        <li class="checked">JavaScript</li>
      </ul>
    </li>  
    <li>
      <ul id="back">
        <li class="checked">JAVA</li>
        <li class="checked">Python</li>
        <li>PHP</li>
      </ul>
    </li>
    <li>
      <ul id="etc">
        <li class="checked">git</li>
        <li>docker</li>
        <li>notion</li>
      </ul>
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    // selector context를 이용해 id값이 front인 요소를 조회 범위로 제한하고,
    // 그 하위의 checked 클래스를 가진 요소를 조회함
    $('.checked', '#front').css('color', 'blue');
    // CSS 선택자만 사용하여 위와 같은 기능을 수행
    $('#back .checked').css('color', 'red');
    // find 메소드를 사용하여 위와 같은 기능을 수행,
    // 체이닝하며 변경하고 조회하기 편리함(etc id값을 가진 요소의 하위 객체의 색상을 전부
    //yellowgreen으로 변경후 하위 요소들중 checked 클래스를 가진 요소만 찾아서 색상을 green으로 변경)
    $('#etc').css('color', 'yellowgreen').find('.checked').css('color', 'green');
    
  </script>
</body>
</html>

PreviousElement 속성 API NextNode 객체

Last updated 3 years ago

Was this helpful?

selector context

jQuery에서 조회 범위를 제한하는 방법중 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것임. 그 제한된 범위를 jQuery에서는 selector context라고 함

$(css선택자, selector context) 이렇게 jQuery 함수는 2번째 인자로 seleotr context를 받아 조회 범위를 제한할 수 있음 (예시 - $('.marked', '#active') : marked 클래스를 가진 요소들을 조회하는데 조상요소 중에서 active라는 아이디값을 가진 요소들만을 검색)

$('.marked', '#active') = $('#active .marked')

.find()

find는 jQuery 객체 내에서 엘리먼트를 조회는 기능을 제

$('#active').find(.marked) == $('.marked', '#active') = $('#active .marked')

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>
      <ul id="front">
        <li class="checked">HTML</li>
        <li>CSS</li>
        <li class="checked">JavaScript</li>
      </ul>
    </li>  
    <li>
      <ul id="back">
        <li class="checked">JAVA</li>
        <li class="checked">Python</li>
        <li>PHP</li>
      </ul>
    </li>
    <li>
      <ul id="etc">
        <li class="checked">git</li>
        <li>docker</li>
        <li>notion</li>
      </ul>
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    // selector context를 이용해 id값이 front인 요소를 조회 범위로 제한하고,
    // 그 하위의 checked 클래스를 가진 요소를 조회함
    $('.checked', '#front').css('color', 'blue');
    // CSS 선택자만 사용하여 위와 같은 기능을 수행
    $('#back .checked').css('color', 'red');
    // find 메소드를 사용하여 위와 같은 기능을 수행,
    // 체이닝하며 변경하고 조회하기 편리함(etc id값을 가진 요소의 하위 객체의 색상을 전부
    //yellowgreen으로 변경후 하위 요소들중 checked 클래스를 가진 요소만 찾아서 색상을 green으로 변경)
    $('#etc').css('color', 'yellowgreen').find('.checked').css('color', 'green');
    
  </script>
</body>
</html>