jquery 변경 버튼 배경

JavaScript 기술의 발전으로 JavaScript와 jQuery를 사용하여 다양한 기능을 구현하는 웹사이트가 점점 많아지고 있습니다. 오늘은 jQuery를 사용하여 버튼 배경을 변경하는 방법을 보여 드리겠습니다.

먼저 HTML 코드를 살펴보겠습니다.

<button id="btn1">按钮 1</button>
<button id="btn2">按钮 2</button>

변경해야 할 것은 버튼의 배경색입니다. 따라서 CSS 파일에서 버튼의 배경색을 정의해야 합니다.

button {
    background-color: #ccc;
}

이제 jQuery를 사용하여 버튼의 배경색을 변경해 보겠습니다. 먼저 버튼에 클릭 이벤트를 추가해야 합니다.

$("#btn1").click(function() {
    // TODO: 在这里添加代码
});

$("#btn2").click(function() {
    // TODO: 在这里添加代码
});

이제 버튼 1을 클릭하면 배경색을 주황색으로 변경하고 버튼 2를 클릭하면 배경색을 녹색으로 변경해야 합니다. . 이러한 기능을 구현하는 코드를 추가해 보겠습니다.

$("#btn1").click(function() {
    $(this).css("background-color", "orange");
});

$("#btn2").click(function() {
    $(this).css("background-color", "green");
});

이 코드의 기능은 무엇인가요?

먼저 jQuery의 click() 函数来捕捉按钮的点击事件。然后，我们使用 $(this) 来指代被点击的按钮。最后，我们使用 css() 함수를 사용하여 버튼의 배경색을 수정합니다.

이제 웹 페이지를 실행하고 버튼을 클릭하면 버튼의 배경색이 성공적으로 수정된 것을 확인할 수 있습니다.

위는 jQuery를 사용하여 버튼의 배경색을 변경하는 방법입니다. 물론 다른 jQuery 함수를 사용하여 더 복잡한 버튼 효과를 얻을 수도 있습니다. 이에 대해 더 알고 싶다면 jQuery의 공식 문서를 확인하세요.

위 내용은 jquery 변경 버튼 배경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!