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

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

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

1단계: jQuery 소개

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

2단계: HTML 및 CSS 코드 작성

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

 
子元素1
 
子元素2
 
子元素3
 

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!