jquery가 하위 요소를 클릭하여 스타일을 추가합니다.

jQuery를 사용하여 하위 요소를 클릭하고 스타일을 추가하는 방법

jQuery는 코드 단순성과 가독성을 향상시키는 방식으로 JavaScript 코드를 작성할 수 있는 인기 있는 JavaScript 라이브러리입니다. jQuery에는 페이지의 요소를 더 쉽게 조작할 수 있는 일련의 편리한 DOM 조작 기능이 있습니다. 이 기사에서는 jQuery를 사용하여 하위 요소를 클릭하고 스타일을 추가하는 방법을 보여 드리겠습니다.

1단계: jQuery 소개

HTML 파일에 jQuery 라이브러리를 추가합니다. 공식 웹사이트에서 다운로드하거나 HTML 파일에서 jQuery의 CDN에 직접 연결할 수 있습니다. 다음은 CDN의 예입니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2단계: HTML 및 CSS 코드 작성

클릭할 여러 하위 요소가 있는 HTML 페이지를 준비합니다. 동시에 클릭 후 스타일 변경을 구별하기 위해 CSS에서 스타일을 설정합니다. 예:

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

여기에서는 클릭하면 배경색이 변경되는 세 개의 하위 요소를 설정합니다.

3단계: jQuery 코드 작성

하위 요소를 클릭할 때 발생하는 작업을 처리하는 코드를 작성해야 합니다. 먼저 모든 하위 요소를 선택해야 합니다. jQuery의 하위 요소 선택기를 사용하면 상위 요소 아래의 모든 하위 요소를 쉽게 선택할 수 있습니다.

var children = $('#parent > .child');

다음으로, 각 하위 요소에 대한 클릭 이벤트 리스너를 추가해야 합니다. jQuery의 Each() 함수를 사용하여 이를 수행할 수 있습니다. 이 함수는 각 요소에 적용될 콜백 함수를 허용합니다. 이 콜백 함수에서는 클릭 이벤트 리스너를 추가하여 하위 요소의 스타일을 높입니다.

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

여기서는 jQuery의 on() 함수를 사용하여 클릭 이벤트 리스너를 추가합니다. 이 함수는 두 개의 매개변수를 허용합니다. 첫 번째는 이벤트 유형으로 "클릭"을 사용했습니다. 두 번째 매개변수는 클릭이 응답할 때 실행되는 콜백 함수입니다. 이 콜백 함수에서는 하위 요소에 addClass() 함수를 호출하여 "클릭된" 클래스를 하위 요소에 추가합니다. 하위 요소의 배경색을 변경하는 "clicked" 클래스를 정의합니다.

전체 jQuery 코드는 다음과 같습니다.

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

마지막으로 모든 코드를 $(document).ready() 함수에 넣고 DOM이 완전히 로드된 후 실행합니다.

결론

이 기사에서는 jQuery를 사용하여 하위 요소를 클릭하고 스타일을 추가하는 방법을 배웠습니다. 모든 하위 요소를 선택한 다음 각 하위 요소에 대한 클릭 이벤트 리스너를 추가해야 합니다. 콜백 함수에서는 addClass() 함수를 사용하여 자식 요소에 클래스를 추가함으로써 자식 요소에 다양한 스타일을 추가할 수 있습니다. 하위 요소의 다른 속성을 추가하려는 경우 클릭 이벤트 리스너를 학습하고 연습할 수도 있습니다.

위 내용은 jquery가 하위 요소를 클릭하여 스타일을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!