오봉이와 함께하는 개발 블로그

jQuery - 조상/부모/형제 요소 선택자 본문

FE/jQuery

jQuery - 조상/부모/형제 요소 선택자

오봉봉이 2021. 12. 14. 09:47
728x90

jQuery 선택자

  • jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
  • 중간에 자바스크립트 코드 같이 작성
  • HTML 태그를 쉽게 선택하기 위해 선택자 사용
  • 선택자 구조
    • $(‘선택자’).메소드(매개변수, 함수 등)
    • $(‘span’).hide();
    • 큰 따옴표 / 작은 따옴표 다 사용 가능
  • 선택자 종류
    • 직접 선택자
      • 전체 : $("*")
      • 태그 : $("태그명")
      • 아이디 : $("#id 명")
      • 클래스 : $(".class 명")
      • 그룹 선택자
    • 인접 관계 선택자
      • 상위 요소(조상/부모) 선택자
      • 하위 요소 (자식/자손) 선택자
      • 형제 선택자
    • 필터 선택자
    • 속성 선택자
    • 컨텐츠 탐색 선택자

조상/부모/형제 요소 선택자

  • 부모 요소 선택 : parent()
  • 조상 : parents()
  • 형제 : next() / nextAll() / nextUntil() / prev() / prevAll() / prevUntil()
  • parentNext.html
    <style type="text/css">
          div {
              border:1px solid #000000;
              padding:10px;
              display:inline-block;
          }
      </style>
  <script src="jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function() {
          $('p').parents().css('backgroundColor', 'Yellow'); // 모든 조상
          $('p').parents('#area').css('backgroundColor', 'white'); // 원하는 것만 넣어줌 (조상 area)
          $('p').parents('#c1, #c2').css('backgroundColor', 'brown'); // 원하는 조상 (c1, c2)
          $('p').parent().css('backgroundColor', 'green'); // parent(s 빠짐)는 $('p').parent()에서 p의 부모만
          $('#c1').next().css('backgroundColor', 'pink'); // c1을 기준으로 다음 요소
          $('#c2').nextAll().css('backgroundColor', 'orange'); // c2를 기준으로 다음에 오는 모든요소
          $('#c4').prevAll().css('color', 'blue'); // c4를 기준으로 전에 있는 모든 요소 글자색 변경
          // c1다음,c4 이전까지(c2, c3)
          $('#c1').nextUntil('#c4').css('borderRadius', '20px');
          // c3이전, c1 다음 c2)
          $('#c3').prevUntil('#c1').css('border', 'solid 5px red');
     });
  </script>            
  </head>
  <body>        
      <h3>조상/부모/형제 요소 선택자</h3>      
      <div id="area">  
          area 영역 
          <div id="c1">
              c1영역
              <div id="s1">
                  s1 영역
                  <p>p</p>
              </div>
          </div>     
          <div id="c2">
              c2영역
              <div id="s2">
                  s2 영역
                  <p>p</p>
              </div>
          </div>
          <div id="c3">
              c3영역
              <div id="s3">
                  s3 영역
                  <p>p</p>
              </div>
          </div>
          <div id="c4">
              c4영역
              <div id="s4">
                  s4 영역
                  <p>p</p>
              </div>
          </div>
       </div>       
  </body>
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - 변수  (0) 2021.12.14
jQuery - 속성 선택자  (0) 2021.12.14
jQuery - 필터 선택자  (0) 2021.12.14
jQuery - 코드 형태, 선택자 예제  (0) 2021.12.13
jQuery - 기본  (0) 2021.12.13
'FE/jQuery' Related Articles more
Comments