Chap 3. jQuery 객체 탐색

김승현·2021년 11월 18일
0

jQuery Traversing

  • jQuery의 탐색(순회)
  • 1차적으로 선택자에 의해 찾은 요소들을 다시 2차 필터링 하거나 새로운 요소를 추가할때에는 traverse관련 메소드를 사용




filtering

  • 선택자로 지정한 객체 그룹에서 위치를 기준으로 객체 선택을 하는 메소드



first()

  • 선택된 요소중 가장 첫번째 요소 리턴

last()

  • 선택된 요소 중 가장 마지막 요소를 리턴

eq(index)

  • 인덱스 번호와 일치하는 요소를 리턴 (0부터 시작)

filter()

  • 인자값과 일치하는 요소만 리턴
  • filter 메소드는 2가지 형태로 사용
    • $(selector).filter(selector);
    • $(selector).filter(function( [index] ){ });
      • 1차에 선택된 수만큼 함수를 반복하여 호출(각 요소를 가지고 호출)
      • 함수 정의 시 매개 변수를 작성하면 index번호를 매개변수로 넘겨줌

not()

  • 인자값과 일치하진 않는 요소만 리턴



EX) first, last, eq, filter, not

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>

    <p class="test1">1. 테스트</p>
    <p class="test2">2. 테스트</p>
    <p class="test1">3. 테스트</p>
    <p class="test2">4. 테스트</p>
    <p class="test1">5. 테스트</p>
    <p class="test2">6. 테스트</p>
    <div class="test1">7. 테스트</div>
    <button id="btn">확인</button>


    <script>
        $('#btn').click(function() {

            var $test2 = $('.test2');
            $test2.first().css('color', 'red');
            $test2.last().css('color', 'blue');
            $test2.eq(1).css('color', 'yellow');

            var $p = $('p');
            $p.filter(':even').css('color', 'purple');

            $p.filter(function(index) {
                if ((index % 2) == 0) {
                    $(this).css('color', 'blue');
                } else {
                    $(this).css('color', 'red');
                }
            });


            $p.not('.test1').css('color', 'skyblue');

        });
    </script>

</body></html>




Ancestors

  • 선택된 요소의 상위 요소들을 선택할 수 있는 메소드
    • 자식 요소가 부모 요소를 선택



parent()

  • 선택된 요소의 바로 위(상위요소)만 리턴

parents( [인자] )

  • 선택된 요소의 모든 상위 요소 리턴
  • 매개변수가 있으면 매개변수와 일치하는 부모들만 리턴

preaentsUntil( [인자] )

  • 선택된 요소부터 인자 요소까지 범위의 모든 상위요소 리턴
    (선택된 요소 인자 요소 제외)



EX) parent, parents, preaentsUntil

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parent, parents, parentuntil</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="ancestors">
        <div style="width:500px;" id="div1">
            i'm div (great-grandparent)
            <ul>
                i'm ul (grandparent)
                <li>
                    i'm li (direct parent)
                    <span id="span1">span</span>
                </li>
            </ul>
        </div>
        <div style="width:500px;" id="div2">
            div (grandparent)
            <p>
                p(direct parent)
                <span id="span2">span</span>
            </p>
        </div>
    </div>
    <button id="btn">확인</button>

    <script>
        $('#btn').click(function() {
            var $selector = $('span');

            // 자기꺼가 없는 경우 부모에 속성값 상속
            // 있으면 유지
            $selector.css('color', 'red');
            $selector.parent().css('color', 'blue');
            $selector.parent().parent().css('color', 'pink');

            var $span2 = $('#span2');
            $span2.parents('#div2').css('border', '1px solid red');
            console.log($span2.parents('#div2'));

            var $span1 = $('#span1')
            $span1.parentsUntil('#div1').css('border', '1px solid red');
            console.log($span1.parentsUntil('#div1'));
        });
    </script>
</body></html>




Descendants

  • 선택된 요소의 하위 요소들을 선택할 수 있는 메소드



children([인자])

  • 선택된 요소의 모든 자손(다음레벨) 객체를 리턴
  • 선택된 요소의 인자와 일치하는 자손(다음레벨) 객체 리턴

find(인자)

  • 선택된 요소의 인자와 일치하는 모든 후손 (모든 레벨) 객체 리턴

siblings([인자])

  • 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
    • 인자값을 넣지 않으면 모든 형제를 의미
  • 같은 레벨에 있는 요소(형제) 중 인자와 일치하는 요소 리턴

next()

  • 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 한 개 요소를 리턴

nextAll()

  • 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 다음의 모든 요소를 리턴

nextUntil(인자)

  • 선택된 요소부터 같은 레벨(형제) 들 중 인자까지 범위의 모든 요소를 리턴
    (인자값 제외)

prev()

  • 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 한 개 요소를 리턴

prevAll()

  • 선택된 요소의 같은 레벨(형제)들 중 선택된 요소 이전의 모든 요소를 리턴

prevUntil(인자)

  • 선택된 요소의 같은 레벨(형제)들 중 이전 요소들 중에서 인자값 전까지의 요소를 선택
    (인자값 제외)

is(인자)

  • 선택된 요소의 범위내에 인자와 동일한 요소가 있는지 찾음
    (있으면 true, 없으면 false)



EX) is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>
    <h3>test1</h3>
    <h3>test2</h3>
    <h3>test3</h3>
    <h3>test4</h3>
    <h3>test5</h3>
    <h3>test6</h3>

    <button id="btn">확인</button>

    <script>
        $('#btn').click(function() {
            var $selector = $('h3');
            if ($selector.is('.hh')) {
                $selector.css('color', 'red');
                $selector.removeClass('hh');
            } else {
                $selector.css('color', 'blue');
                $selector.addClass('hh');
            }
        });
    </script>
</body></html>
profile
개발자로 매일 한 걸음

0개의 댓글