search

博客列表 >表单事件、键盘事件、get

表单事件、键盘事件、get

橙絮圆
橙絮圆原创
2021年07月28日 10:33:11500浏览

表单事件、键盘事件、get

作业标题：0722作业
作业内容：1、演示表单事件 2、演示键盘事件 3、演示 get

  • 表单事件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>事件</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    10.   <style>
    11.     * {
    12.       background-color: #d4edda;
    13.       text-align: center;
    14.       font-size: 20px;
    15.     }
    16.     .form-control {
    17.       width: 500px;
    18.       padding: 0.375rem 0.75rem;
    19.       font-size: 1rem;
    20.       font-weight: 400;
    21.       line-height: 1.5;
    22.       color: #495057;
    23.       background-color: #fff;
    24.       background-clip: padding-box;
    25.       border: 1px solid #ced4da;
    26.       border-radius: 0.25rem;
    27.       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    28.     }
    29.     button {
    30.       width: 600px;
    31.       color: #fff;
    32.       background-color: #28a745;
    33.       border-color: #28a745;
    34.     }
    35.     .select {
    36.       width: 265px;
    37.       height: 47px;
    38.     }
    39.   </style>
    40. </head>
    41. <body>
    42.   <h2 class="title">注册</h2>
    43.   <form action="" onsubmit="return false;">
    44.     <p>
    45.       账户:
    46.       <input type="text" class="form-control" id="account" />
    47.       <div id="ac" style="color:red;font-size:12px;display: none;">请输入账户，账户必须大于8位</div>
    48.       </p>
    49.     <p>
    50.       密码:
    51.       <input type="password" class="form-control" id="password" />
    52.       <div id="pw" style="color:red;font-size:12px;display: none;">请输入密码</div>
    53.   </p>
    54.     <p>
    55.       省市:
    56.       <select id="prov" class="form-control select">
    57.         <option value="">请选择</option>
    58.         <option value="1">安徽</option>
    59.         <option value="2">江苏</option>
    60.         <option value="3">河南</option>
    61.       </select>
    62.       <select id="city" class="form-control select">
    63.       </select>
    64.     </p>
    65.     <button>注册</button>
    66.     <div id="ac_input" style="margin-top:20px;color:red;font-size: 18px;display: none;"></div>
    67.   </form>
    68. </body>
    69. <script>
    70.     //表单事件
    71.     //1、submit 当提交表单时，会触发的事件
    72.   //   $("form").submit(function(){
    73.   //       let account=$("#account").val();
    74.   //       alert(account);
    75.   //   });
    76.   //   $("button").click(function(){
    77.   //       let account=$("#account").val();
    78.   //       alert(account);
    79.   //   })
    80.    //   2、change 当select元素的值发生变化时，触发的事件
    81.    $("#prov").change(function(){
    82.        let prov=$("#prov").val();
    83.        let html='<option value="">请选择<option>';
    84.        if(prov==1){
    85.            html+='<option value="11">合肥</option>';
    86.            html+='<option value="12">淮南</option>';
    87.            html+='<option value="13">蛙埠</option>';
    88.            html+='<option value="14">芜湖</option>';
    89.        }
    90.        $("#city").html(html);
    91.    });
    92.   //3、focus 当元素获得焦点时，触发事件
    93.   $("#account").focus(function(){
    94.       $("#ac").show();
    95.   });
    96.   $("#account").focus(function(){
    97.       $("#pw").show();
    98.   });
    99.   //4、blur元素失去焦点的时候触发事件
    100.   //
    101.   $("#account").blur(function(){
    102.       let account=$("#account").val();
    103.       console.log(account);
    104.       if(!account){
    105.           $(this).focus();
    106.       }else{
    107.           $("#ac").hide();
    108.       }
    109.   })
    110.   $("#account").blur(function(){
    111.       $("#pw").show();
    112.   });
    113. </script>
    114. </html>

  • 演示键盘事件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>事件</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    10.   <style>
    11.     * {
    12.       background-color: #d4edda;
    13.       text-align: center;
    14.       font-size: 20px;
    15.     }
    16.     .form-control {
    17.       width: 500px;
    18.       padding: 0.375rem 0.75rem;
    19.       font-size: 1rem;
    20.       font-weight: 400;
    21.       line-height: 1.5;
    22.       color: #495057;
    23.       background-color: #fff;
    24.       background-clip: padding-box;
    25.       border: 1px solid #ced4da;
    26.       border-radius: 0.25rem;
    27.       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    28.     }
    29.     button {
    30.       width: 600px;
    31.       color: #fff;
    32.       background-color: #28a745;
    33.       border-color: #28a745;
    34.     }
    35.     .select {
    36.       width: 265px;
    37.       height: 47px;
    38.     }
    39.   </style>
    40. </head>
    41. <body>
    42.   <h2 class="title">注册</h2>
    43.   <form action="" onsubmit="return false;">
    44.     <p>
    45.       账户:
    46.       <input type="text" class="form-control" id="account" />
    47.       <div id="ac" style="color:red;font-size:12px;display: none;">请输入账户，账户必须大于8位</div>
    48.       </p>
    49.     <p>
    50.       密码:
    51.       <input type="password" class="form-control" id="password" />
    52.       <div id="pw" style="color:red;font-size:12px;display: none;">请输入密码</div>
    53.   </p>
    54.     <p>
    55.       省市:
    56.       <select id="prov" class="form-control select">
    57.         <option value="">请选择</option>
    58.         <option value="1">安徽</option>
    59.         <option value="2">江苏</option>
    60.         <option value="3">河南</option>
    61.       </select>
    62.       <select id="city" class="form-control select">
    63.         <option value="">请选择</option>
    64.       </select>
    65.     </p>
    66.     <button>注册</button>
    67.     <div id="ac_input" style="margin-top:20px;color:red;font-size: 18px;display: none;"></div>
    68.   </form>
    69. </body>
    70. <script>
    71.     $("form").submit(function(){
    72.         let account=$("#account").val();
    73.         if(!account){
    74.           msg('请输入账户');
    75.             return false;
    76.         }
    77.         if(account=='admin' || account=='phpcn'){
    78.           msg('账户已存在');
    79.             return false;
    80.         }
    81.         let password=$("#password").val();
    82.         if(!password){
    83.          msg('请输入密码');
    84.             return false;
    85.         }
    86.         if(password.length<6){
    87.          msg('请输入大于6位的密码');
    88.             return false;
    89.         }
    90.         alert("注册成功");
    91.     })
    92.     function msg(data){
    93.         $("#ac_input").text(data);
    94.         $("#ac_input").show();
    95.     }
    96.     $("#account").keydown(function(){
    97.         $("#ac_input").hide();
    98.     })
    99.     $("#password").keydown(function(){
    100.         $("#ac_input").hide();
    101.     })
    102. </script>
    103. </html>
  • 演示 get
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>事件</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9.   <style>
    10.     * {
    11.       text-align: center;
    12.       font-size: 20px;
    13.     }
    14.     .title {
    15.       text-align: center;
    16.     }
    17.     .width {
    18.       width: 1200px;
    19.     }
    20.     tr {
    21.       height: 50px;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26.   <h2 class="title">省份表</h2>
    27.   <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    28.     <thead>
    29.       <tr>
    30.         <th>编号</th>
    31.         <th>名称</th>
    32.         <th>首字母</th>
    33.         <th>拼音</th>
    34.         <th>精度</th>
    35.         <th>维度</th>
    36.       </tr>
    37.     </thead>
    38.     <tbody></tbody>
    39.   </table>
    40. </body>
    41. <script>
    42.   // 请求服务器上的省列表
    43.   // url：http://admin.ouyangke.cn/index.php/api/index/prov_list
    44.   //参数:
    45.   //page  当前页数，默认第一页
    46.   //limit 一页有多少条，默认10条
    47.   //fields
    48.   //order
    49.   $.get(
    50.     "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    51.     { limit: 5, page: 3 },
    52.     function (data, status) {
    53.       console.log(data.data);
    54.       let data_html = " ";
    55.       for (let i = 0; i < data.data.length; i++) {
    56.         console.log("aaa");
    57.         data_html += "<tr>";
    58.         data_html += "<th>" + data.data[i].area_id + "</th>";
    59.         data_html += "<td>" + data.data[i].area_name + "</td>";
    60.         data_html += "<td>" + data.data[i].first_pinyin + "</td>";
    61.         data_html += "<td>" + data.data[i].pinyin + "</td>";
    62.         data_html += "<td>" + data.data[i].lng + "</td>";
    63.         data_html += "<td>" + data.data[i].lat + "</td>";
    64.         data_html += "</tr>";
    65.       }
    66.       $("tbody").append(data_html);
    67.     },
    68.     "json"
    69.   );
    70. </script>
    71. </html>
上一条：gitignore的一些语法下一条：学习笔记：表格小知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多