前端 - 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. 事件
    //當(dāng)元素失去焦點(diǎn)時觸發(fā)
    $("form input[type='email']").blur(function () {
      alert("hello");
    });
    //當(dāng)元素被點(diǎn)擊時觸發(fā)
    $("form input[type='email']").click(function () {
      alert("world");
    });
    //當(dāng)提交表單時觸發(fā)
    $("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 () {
      //序列表表格內(nèi)容為字符串
      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;

四、課程總結(jié)

今天進(jìn)行了 jQuery 的事件處理和Ajax操作，通過上課認(rèn)真聽講和認(rèn)真完成老師布置的作業(yè)，使得我對 jQuery的理解和運(yùn)用更加深入和熟悉。最主要的知識點(diǎn)是明白和掌握了事件處理和Ajax的特點(diǎn)以及基本用法。

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

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

2020-06-24 12:59:31

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

前端 - jQuery - 事件和Ajax

一、事件

二、Ajax

四、課程總結(jié)

一、事件

二、Ajax