Home > List of blog posts > 前端 - jQuery - 事件和Ajax

Blogger Information

Blog 33

fans 0

comment 0

visits 27667

Special Recommendation

More>

Related recommendations

前端 - 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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

前端 - jQuery - 事件和Ajax

一、事件

二、Ajax

四、课程总结