Jquery -如果输入值大于Balance，则显示警报和删除值

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 交互，使得 Web 开发更加便捷。

类型与应用场景

类型：jQuery 主要用于前端开发，特别是在需要处理复杂的 DOM 操作和交互时。
应用场景：网站的前端交互设计、表单验证、动态内容加载等。

示例代码

假设我们有一个输入框和一个显示余额的区域，当输入值大于余额时，显示警报并清空输入框的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="inputAmount">输入金额:</label>
    <input type="number" id="inputAmount">
    <button id="checkBalance">检查余额</button>
    <p>当前余额: <span id="balance">1000</span></p>

    <script>
        $(document).ready(function() {
            $('#checkBalance').click(function() {
                var inputAmount = parseFloat($('#inputAmount').val());
                var balance = parseFloat($('#balance').text());

                if (isNaN(inputAmount)) {
                    alert('请输入有效的数字');
                    return;
                }

                if (inputAmount > balance) {
                    alert('输入金额大于余额！');
                    $('#inputAmount').val(''); // 清空输入框
                } else {
                    alert('输入金额有效');
                }
            });
        });
    </script>
</body>
</html>