表单事件、键盘事件、get

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

表单事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>事件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    * {
      background-color: #d4edda;
      text-align: center;
      font-size: 20px;
    }
    .form-control {
      width: 500px;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    button {
      width: 600px;
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .select {
      width: 265px;
      height: 47px;
    }
  </style>
</head>
<body>
  <h2 class="title">注册</h2>
  <form action="" onsubmit="return false;">
    <p>
      账户:
      <input type="text" class="form-control" id="account" />
      <div id="ac" style="color:red;font-size:12px;display: none;">请输入账户，账户必须大于8位</div>
      </p>
    <p>
      密码:
      <input type="password" class="form-control" id="password" />
      <div id="pw" style="color:red;font-size:12px;display: none;">请输入密码</div>
  </p>
    <p>
      省市:
      <select id="prov" class="form-control select">
        <option value="">请选择</option>
        <option value="1">安徽</option>
        <option value="2">江苏</option>
        <option value="3">河南</option>
      </select>
      <select id="city" class="form-control select">
      </select>
    </p>
    <button>注册</button>
    <div id="ac_input" style="margin-top:20px;color:red;font-size: 18px;display: none;"></div>
  </form>
</body>
<script>
    //表单事件
    //1、submit 当提交表单时，会触发的事件
  //   $("form").submit(function(){
  //       let account=$("#account").val();
  //       alert(account);
  //   });
  //   $("button").click(function(){
  //       let account=$("#account").val();
  //       alert(account);
  //   })
   //   2、change 当select元素的值发生变化时，触发的事件
   $("#prov").change(function(){
       let prov=$("#prov").val();
       let html='<option value="">请选择<option>';
       if(prov==1){
           html+='<option value="11">合肥</option>';
           html+='<option value="12">淮南</option>';
           html+='<option value="13">蛙埠</option>';
           html+='<option value="14">芜湖</option>';
       }
       $("#city").html(html);
   });
  //3、focus 当元素获得焦点时，触发事件
  $("#account").focus(function(){
      $("#ac").show();
  });
  $("#account").focus(function(){
      $("#pw").show();
  });
  //4、blur元素失去焦点的时候触发事件
  //
  $("#account").blur(function(){
      let account=$("#account").val();
      console.log(account);
      if(!account){
          $(this).focus();
      }else{
          $("#ac").hide();
      }
  })
  $("#account").blur(function(){
      $("#pw").show();
  });
</script>
</html>

演示键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>事件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    * {
      background-color: #d4edda;
      text-align: center;
      font-size: 20px;
    }
    .form-control {
      width: 500px;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    button {
      width: 600px;
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .select {
      width: 265px;
      height: 47px;
    }
  </style>
</head>
<body>
  <h2 class="title">注册</h2>
  <form action="" onsubmit="return false;">
    <p>
      账户:
      <input type="text" class="form-control" id="account" />
      <div id="ac" style="color:red;font-size:12px;display: none;">请输入账户，账户必须大于8位</div>
      </p>
    <p>
      密码:
      <input type="password" class="form-control" id="password" />
      <div id="pw" style="color:red;font-size:12px;display: none;">请输入密码</div>
  </p>
    <p>
      省市:
      <select id="prov" class="form-control select">
        <option value="">请选择</option>
        <option value="1">安徽</option>
        <option value="2">江苏</option>
        <option value="3">河南</option>
      </select>
      <select id="city" class="form-control select">
        <option value="">请选择</option>
      </select>
    </p>
    <button>注册</button>
    <div id="ac_input" style="margin-top:20px;color:red;font-size: 18px;display: none;"></div>
  </form>
</body>
<script>
    $("form").submit(function(){
        let account=$("#account").val();
        if(!account){
          msg('请输入账户');
            return false;
        }
        if(account=='admin' || account=='phpcn'){
          msg('账户已存在');
            return false;
        }
        let password=$("#password").val();
        if(!password){
         msg('请输入密码');
            return false;
        }
        if(password.length<6){
         msg('请输入大于6位的密码');
            return false;
        }
        alert("注册成功");
    })
    function msg(data){
        $("#ac_input").text(data);
        $("#ac_input").show();
    }
    $("#account").keydown(function(){
        $("#ac_input").hide();
    })
    $("#password").keydown(function(){
        $("#ac_input").hide();
    })
</script>
</html>

演示 get

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>事件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    * {
      text-align: center;
      font-size: 20px;
    }
    .title {
      text-align: center;
    }
    .width {
      width: 1200px;
    }
    tr {
      height: 50px;
    }
  </style>
</head>
<body>
  <h2 class="title">省份表</h2>
  <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>精度</th>
        <th>维度</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</body>
<script>
  // 请求服务器上的省列表
  // url：http://admin.ouyangke.cn/index.php/api/index/prov_list
  //参数:
  //page  当前页数，默认第一页
  //limit 一页有多少条，默认10条
  //fields
  //order
  $.get(
    "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    { limit: 5, page: 3 },
    function (data, status) {
      console.log(data.data);
      let data_html = " ";
      for (let i = 0; i < data.data.length; i++) {
        console.log("aaa");
        data_html += "<tr>";
        data_html += "<th>" + data.data[i].area_id + "</th>";
        data_html += "<td>" + data.data[i].area_name + "</td>";
        data_html += "<td>" + data.data[i].first_pinyin + "</td>";
        data_html += "<td>" + data.data[i].pinyin + "</td>";
        data_html += "<td>" + data.data[i].lng + "</td>";
        data_html += "<td>" + data.data[i].lat + "</td>";
        data_html += "</tr>";
      }
      $("tbody").append(data_html);
    },
    "json"
  );
</script>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0628第1节课

2021-06-28 22:48:00