jquery 点击按钮更换背景颜色

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 可以非常方便地实现点击按钮更换背景颜色的功能。

基础概念

jQuery: 一个 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax。
事件处理: 在 jQuery 中，可以通过 .click() 方法来绑定点击事件。
CSS 操作: 使用 .css() 方法可以直接操作元素的样式。

优势

简化代码: jQuery 提供了简洁的语法来处理常见的 DOM 操作和事件绑定。
跨浏览器兼容性: jQuery 内部处理了不同浏览器之间的兼容性问题。
丰富的插件生态: 有大量的第三方插件可以使用，扩展功能非常方便。

类型与应用场景

类型: 这是一个典型的 DOM 操作和事件处理的例子。
应用场景: 适用于任何需要通过用户交互来改变页面样式的情况，如动态主题切换、用户反馈提示等。

示例代码

以下是一个简单的示例，展示了如何使用 jQuery 实现点击按钮更换背景颜色的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Background Color</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #changeColorBtn {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <button id="changeColorBtn">Change Background Color</button>

    <script>
        $(document).ready(function() {
            var colors = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF3'];
            var currentColorIndex = 0;

            $('#changeColorBtn').click(function() {
                $('body').css('background-color', colors[currentColorIndex]);
                currentColorIndex = (currentColorIndex + 1) % colors.length;
            });
        });
    </script>
</body>
</html>