薛乎乎~ 2024-04-26 17:20 采纳率: 87.5%
浏览 2
已结题

关于#javascript#的问题：利用就jquery修改下列代码

利用就jquery修改下列代码


```html
<!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="jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="form1"method="post"action="">
    <table width="400"border="1px"cellspacing="0"style="border-color: blue">
        <tr bgcolor="blue">
            <td colspan="2"align="center">取票系统</td>
        </tr>
        <tr>
            <td align="right">请输入兑换码:</td>
            <td><input type="text"id="dhm"></td>
        </tr>
        <tr>
            <td colspan="2"align="center">
                <input type="submit"value="取票"name="submit"onclick="qp()">
                <input type="button"value="重新输入"name="bottom"onclick="cxsr()">
            </td>
        </tr>
    </table>
    </form>
    <script>
        function qp(){
            //获取id=“dhm"的输入字段的值
            var x=form1.dhm.value;            
            if(x==""){
                alert("请输入兑换码");
            }else if(x=="99632570063166"){
                alert("取票成功！")
            }else{
                alert("兑换码不正确！")
            }
        }
        function cxsr(){
            form1.dhm.value=null; 
            alert("请重新输入！");
            
            }
            var o=document.getElementsByTagName("input");
            for(var i=0;i<o.length;i++){
                o[i].onfocus=function(){
                    this.style.borderStyle="outset";
                }
                o[i].blur=function(){
                    input.blur();
                }
            }
    </script>
</body>
</html>

```

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-26 17:20
    关注

    引自免费微信小程序：皆我百晓生

    为了使用jQuery来修改这段代码，我们首先需要将原生JavaScript事件处理函数替换为jQuery版本，并优化代码结构。以下是修改后的HTML和JavaScript代码：

    <!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.7.1.min.js"></script>
    <style>
        input:focus {
            border-style: outset;
        }
    </style>
</head>
<body>
    <form id="form1" method="post" action="">
        <table width="400" border="1px" cellspacing="0" style="border-color: blue;">
            <tr bgcolor="blue">
                <td colspan="2" align="center">取票系统</td>
            </tr>
            <tr>
                <td align="right">请输入兑换码:</td>
                <td><input type="text" id="dhm"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="取票" name="submit">
                    <input type="button" value="重新输入" name="bottom" onclick="cxsr()">
                </td>
            </tr>
        </table>
    </form>

    <script>
        $(document).ready(function () {
            $("#form1").on("submit", function (event) {
                event.preventDefault(); // 阻止表单默认提交行为

                var dhmValue = $("#dhm").val();

                if (dhmValue === "") {
                    alert("请输入兑换码");
                } else if (dhmValue === "99632570063166") {
                    alert("取票成功！");
                } else {
                    alert("兑换码不正确！");
                }
            });

            $("input").on("focus", function () {
                $(this).css("border-style", "outset");
            }).on("blur", function () {
                $(this).css("border-style", "");
            });
        });
    </script>
</body>
</html>

    这里主要做了以下几个修改：

    1. 引入了外部的jQuery库，通过CDN方式加载。
    2. 使用$(document).ready()确保在文档加载完成后执行相关脚本。
    3. 将原生JavaScript中的表单提交事件替换为jQuery的.on("submit", ...)方法，并添加了event.preventDefault()防止表单的默认提交行为。
    4. 使用jQuery选择器$("#dhm")来获取元素值，替代了原生的getElementById。
    5. 优化了CSS样式，将其放入<style>标签内，并通过:focus伪类实现焦点效果。
    6. 使用jQuery的`.on("focus", ...) 和 .on("blur", ...) 方法分别绑定焦点和失去焦点事件，简化了对所有输入框样式的管理。

    这样，我们就成功地将原生JavaScript代码转换成了使用jQuery的版本。

    </style>
本回答被题主选为最佳回答 , 对您是否有帮助呢?
评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

悬赏问题