jquery 模仿手机充值

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，开发者可以轻松地实现复杂的 JavaScript 功能。

类型

jQuery 主要有以下几种类型：

核心：提供基本的工具函数和选择器。
选择器：用于选择和操作 DOM 元素。
事件：处理各种事件，如点击、滚动等。
动画：实现各种动画效果。
Ajax：简化与服务器的异步通信。

应用场景

jQuery 可以应用于各种前端开发场景，包括但不限于：

DOM 操作：选择、添加、删除或修改 DOM 元素。
事件处理：绑定和处理各种用户交互事件。
动画效果：实现平滑的页面过渡和动画效果。
Ajax 交互：与服务器进行异步数据交换。

示例代码：模仿手机充值

假设我们要实现一个简单的手机充值界面，用户可以选择充值金额并提交订单。以下是一个使用 jQuery 实现的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机充值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .selected {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>手机充值</h1>
    <select id="amount">
        <option value="50">50 元</option>
        <option value="100">100 元</option>
        <option value="200">200 元</option>
    </select>
    <button id="submit">提交订单</button>
    <div id="message"></div>

    <script>
        $(document).ready(function() {
            $('#amount').change(function() {
                $('option').removeClass('selected');
                $(this).addClass('selected');
            });

            $('#submit').click(function() {
                var amount = $('#amount').val();
                $.ajax({
                    url: 'https://api.example.com/recharge',
                    method: 'POST',
                    data: { amount: amount },
                    success: function(response) {
                        $('#message').text('充值成功！充值金额：' + amount + ' 元');
                    },
                    error: function(xhr, status, error) {
                        $('#message').text('充值失败！错误信息：' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：包含一个下拉菜单用于选择充值金额，一个提交按钮和一个显示消息的 div。
CSS 样式：定义了一个 .selected 类，用于高亮显示选中的充值金额。
jQuery 代码：
- 当用户选择充值金额时，使用 change 事件高亮显示选中的选项。
- 当用户点击提交按钮时，使用 click 事件触发 Ajax 请求，将选中的充值金额发送到服务器。
- 根据服务器的响应，显示充值成功或失败的消息。