jQuery 관계기반 선택자

Suji Park·2022년 5월 22일
0
post-thumbnail

jQuery의 기본개념: <어떤요소를 선택하여 어떤작업을 수행하라>
관계 기반 선택자: 부모, 자식, 형제와 같은 관계를 기준으로 하는 선택자를 말함.

  1. .parent()
    : 선택한 요소의 부모 태그를 return합니다.
    (가장 많이 사용되는 아주 간단한 방법)
  2. .parents()
    : 선택한 요소의 부모를 포함한 선조 태그들을 모두 return합니다.
  3. .closest()
    : 선택한 요소의 선조 태그 중 가장 가까운 하나만 return합니다.

Parent

부모 태그가 없는 최상위 요소인 html태그를 제외한 모든 태그는 부모 태그가 하나.
그러니까 parent선택자는 하나의 태그만 return

  1. $( 선택자 ).parent( );
    : 선택한 요소의 부모 태그를 return합니다.

    ex ) $('p').parent( ); : p의 부모 태그를 return합니다.

  2. $(선택자1).parent( 선택자2 );
    : 선택자1 요소의 부모가 선택자2일 때만 return합니다.

ex) $( 'p' ).parent( 'div' ).css( 'color', 'green' );
: p 태그의 부모가 div일 때만 css의 color 값을 green으로 바꿉니다.

.Parents()

선택한 요소의 부모를 포함한 선조 태그들을 모두 return합니다.
parents함수: 요소 하나를 return하는 것이 아닌 요소 여러개를 담은 배열을 return

  1. $( 선택자 ).parents( );
    : 선택한 요소의 선조 태그들을 return합니다.
    ex ) $('p').parents( ); : p의 선조 태그들을 return합니다.
  2. $(선택자1).parents( 선택자2 );
    : 선택자1 요소의 선조가 선택자2일 때만 return합니다.
    ex) $( 'p' ).parents( 'div' ).css( 'color', 'green' );
    : p 태그의 선조가 div일 때만 css의 color 값을 green으로 바꿉니다.

.closest()

선택한 요소의 선조 태그 중 가장 가까운 태그 하나만 return합니다.

  1. $( 선택자 ).closest( );
    : 선택한 요소의 선조 태그 중 가장 가까운 태그를 return합니다.
    ex ) $('p').closest( );
    : p의 선조 태그중 가장 가까운 태그를 return합니다.
  2. $(선택자1).closest( 선택자2 );
    : 선택자1 요소의 선조이면서 선택자2인 태그 중 가장 가까운 태그만 return합니다.
    ex) $( 'p' ).closest( 'div' ).css( 'color', 'green' );
    : p 태그의 선조이면서 div인 태그 중 가장 가까운 태그만 css의 color 값을 green으로 바꿉니다.

.children()

: 선택한 요소의 자식 (자손 아님 주의)태그들을 배열로 return합니다.
선택한 요소의 바로 하위 태그들을 배열에 담아 return
손자,증손자등등을 제외하고 오로지 자식 태그들만 가져옴.
자식 태그는 여러 개일 가능성이 높으니 그것들로 이루어진 배열로 return하는 것


1. $( 선택자 ).children( );
: 선택한 요소의 자식 태그들을 배열로 return합니다.
ex ) $('p').children( );
: p의 자식 태그들을 배열로 return합니다.
2. $(선택자1).children( 선택자2 );
: 선택자1 요소의 자식이면서 선택자2인 태그들만 배열로 return합니다.
ex) $( 'p' ).children( 'div' ).css( 'color', 'green' );
: p 태그의 자식이면서 div인 태그들만 css의 color 값을 green으로 바꿉니다.

오늘 배운 선택자들은 모두 문자열이 아닌 객체(Object)를 return하는 함수
객체를 return하는 선택자를 alert와 같이 문자열을 사용하는 함수와 함께 써먹고 싶은 경우에는 return된 객체에서 원하는 정보만 빼오는 작업을 거쳐줘야 함.
안 그러면 그 객체가 가지고 있는 모든 정보를 출력

 <html>
<meta charset="utf-8">
 <head>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script>
   function a(){
    alert($('p').parent());
   }
  </script> 
 </head>
 <body>
  <button type="button" onclick="a();">버트은1</button>
  <button type="button" onclick="b();">버트은2</button>
  <div>
   <p>어쩌구저쩌구</p>
  </div>
 </body>
</html>


버트은1 을클릭했을때 alert가 발동한 화면

console.log($('p').parent());
console.log()는 console창에 괄호 안의 내용을 출력해주는 함수.
즉,위의 코드는 console에 p태그의 부모객체를 출력하라는 뜻

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
 
1. closest :
$("li.item-a").closest("ul").css("background-color", "red");
item-a요소와 가장 가까운 level-2의 배경색이 변경됩니다. 
 
2. parents
$("li.item-a").parents("ul").css("background-color", "red");
item-a 요소의 부모 중 ul 엘리멘트들의 배경색이 변경됩니다.

profile
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵

0개의 댓글