SeouliteLab

jQuery .andSelf() 메서드 본문

프로그래밍

jQuery .andSelf() 메서드

Seoulite Lab 2024. 4. 9. 08:46

예제 1: .andSelf() 메서드의 기본 사용법

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .andSelf() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".child").andSelf().addClass("highlight");
    });
  </script>
  <style>
    .parent {
      border: 2px solid #333;
      padding: 10px;
    }
    .child {
      color: blue;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">이 문장은 자식 요소입니다.</p>
    <p class="child">이 문장도 자식 요소입니다.</p>
  </div>
</body>
</html>

설명:

이 예제는 .andSelf() 메서드를 사용하여 현재 선택한 요소와 그 이전에 선택했던 요소를 모두 선택한 후에 클래스를 추가하는 방법을 보여줍니다.

  • $(".child").andSelf()는 자식 요소와 그 부모인 .parent 요소를 모두 선택합니다.
  • .addClass("highlight")는 선택된 모든 요소에 highlight 클래스를 추가하여 배경색을 노란색으로 변경합니다.

예제 2: .andSelf() 메서드와 체인 메서드 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .andSelf() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".child").addClass("highlight").andSelf().css("font-weight", "bold");
    });
  </script>
  <style>
    .parent {
      border: 2px solid #333;
      padding: 10px;
    }
    .child {
      color: blue;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">이 문장은 자식 요소입니다.</p>
    <p class="child">이 문장도 자식 요소입니다.</p>
  </div>
</body>
</html>

설명:

이 예제는 .andSelf() 메서드를 사용하여 체인 메서드로 여러 작업을 수행하는 방법을 보여줍니다.

  • $(".child").addClass("highlight")는 자식 요소에 highlight 클래스를 추가하여 배경색을 노란색으로 변경합니다.
  • .andSelf()는 현재 선택한 요소와 그 이전에 선택했던 요소를 모두 선택합니다.
  • .css("font-weight", "bold")는 선택된 모든 요소에 대해 글꼴을 굵게 변경합니다.

.andSelf() 메서드는 jQuery에서 현재 선택한 요소와 그 이전에 선택한 요소를 모두 선택하여 작업할 때 유용합니다. 이를 통해 코드를 간결하게 유지하면서도 다양한 요소를 효과적으로 조작할 수 있습니다. 여러 예제를 통해 .andSelf() 메서드의 활용법을 익혀보세요.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery All Selector (“*”)를 이용한 요소 선택  (0) 2024.04.09
jQuery.boxModel  (0) 2024.04.09
jQuery.selector: jQuery 선택자 사용법과 예제  (0) 2024.04.09
jQuery.support: 브라우저 기능 지원 여부 확인하기  (0) 2024.04.09
jQuery.browser: 브라우저 정보 확인하기  (0) 2024.04.09
'프로그래밍' Related Articles more