博客列表 >前端 - jQuery - 事件和Ajax

前端 - jQuery - 事件和Ajax

郴
原创
2020年06月24日 14:04:39720浏览

前端 - jQuery - 事件和Ajax

一、事件

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  8. </head>
  9. <body>
  10. <ul>
  11. <li>01</li>
  12. <li>02</li>
  13. <li>03</li>
  14. <li>04</li>
  15. </ul>
  16. <form action="">
  17. <input type="email" name="" id="" />
  18. <input type="password" name="" id="" />
  19. <button type="submit">提交</button>
  20. </form>
  21. </body>
  22. <script>
  23. // 3. 事件委派
  24. $("ul").delegate("li", "click", function () {
  25. alert("hello");
  26. });
  27. // 4. 事件切换
  28. $("ul li:first-child").hover(
  29. function () {
  30. $(this).prop("style", "color: red;");
  31. },
  32. function () {
  33. $(this).prop("style", "color: blue;");
  34. }
  35. );
  36. // 5. 事件
  37. //当元素失去焦点时触发
  38. $("form input[type='email']").blur(function () {
  39. alert("hello");
  40. });
  41. //当元素被点击时触发
  42. $("form input[type='email']").click(function () {
  43. alert("world");
  44. });
  45. //当提交表单时触发
  46. $("form").submit(function () {
  47. alert("已提交");
  48. });
  49. </script>
  50. </html>

二、Ajax

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  8. </head>
  9. <body>
  10. <form>
  11. <input type="email" name="email" />
  12. <input type="password" name="password" />
  13. <button type="button">提交</button>
  14. </form>
  15. <div></div>
  16. </body>
  17. <script>
  18. // Ajax操作
  19. $("form button").click(function () {
  20. //序列表表格内容为字符串
  21. var data = $("form").serialize();
  22. console.log(data);
  23. $.ajax({
  24. url: "login.php",
  25. type: "POST",
  26. data: data,
  27. dataType: "json",
  28. success: function (res) {
  29. console.log(res);
  30. var str = res.email + res.password;
  31. $("div").html(str);
  32. },
  33. });
  34. });
  35. </script>
  36. </html>
  1. <?php
  2. $email = $_POST['email'];
  3. $password = $_POST['password'];
  4. $arr = array("email"=>$email, "password"=>$password);
  5. $json_obj = json_encode($arr);
  6. echo $json_obj;

四、课程总结

  • 今天进行了 jQuery 的事件处理和Ajax操作,通过上课认真听讲和认真完成老师布置的作业,使得我对 jQuery的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了事件处理和Ajax的特点以及基本用法。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议