前端 - jQuery - 事件和Ajax

一、事件

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <ul>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
    </ul>
    <form action="">
      <input type="email" name="" id="" />
      <input type="password" name="" id="" />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    // 3. 事件委派
    $("ul").delegate("li", "click", function () {
      alert("hello");
    });
    // 4. 事件切换
    $("ul li:first-child").hover(
      function () {
        $(this).prop("style", "color: red;");
      },
      function () {
        $(this).prop("style", "color: blue;");
      }
    );
    // 5. 事件
    //当元素失去焦点时触发
    $("form input[type='email']").blur(function () {
      alert("hello");
    });
    //当元素被点击时触发
    $("form input[type='email']").click(function () {
      alert("world");
    });
    //当提交表单时触发
    $("form").submit(function () {
      alert("已提交");
    });
  </script>
</html>

二、Ajax

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <form>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="button">提交</button>
    </form>
    <div></div>
  </body>
  <script>
    // Ajax操作
    $("form button").click(function () {
      //序列表表格内容为字符串
      var data = $("form").serialize();
      console.log(data);
      $.ajax({
        url: "login.php",
        type: "POST",
        data: data,
        dataType: "json",
        success: function (res) {
          console.log(res);
          var str = res.email + res.password;
          $("div").html(str);
        },
      });
    });
  </script>
</html>

<?php
$email = $_POST['email'];
$password = $_POST['password'];
$arr = array("email"=>$email, "password"=>$password);
$json_obj = json_encode($arr);
echo $json_obj;

四、课程总结

今天进行了 jQuery 的事件处理和Ajax操作，通过上课认真听讲和认真完成老师布置的作业，使得我对 jQuery的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了事件处理和Ajax的特点以及基本用法。

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端 - JS - DOM操作和事件处理

2020-06-24 12:59:31