jQuery常用操作; jQuery中的$.ajax方法; Vue基本术语与插值语法----0414

1. jQuery 常用操作

1.1jQuery 的 dom 操作

  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. </ul>
  6. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  7. <script>
  8. // dom元素新增,更新,删除
  9. // 新增
  10. // append(), prepend(),after(),before()
  11. // instertAdjacentElement(),insertAdjacentHTML()
  12. // 追加到尾部
  13. let li = document.createElement("li");
  14. li.textContent = "item4";
  15. li.style.color = "red";
  16. li.classList.add("item");
  17. document.querySelector(".list").append(li);
  18. // jQuery
  19. // append(), 在父元素上调用
  20. $(".list").append("<li>item5</li>").find(":last").addClass("item").css("color", "green");
  21. // appendTo(), 在子元素上调用
  22. $("<li>item6</li>").addClass("item").css("color", "blue").appendTo(".list");
  23. // prepend(): 追加到头部
  24. $(".list").prepend("<li>item0</li>").find(":first").addClass("item").css("color", "red");
  25. // prependTo(), 在子元素上调用
  26. $("<li>item-1</li>").addClass("item").css("color", "skyblue").prependTo(".list");
  27. // eq(从0开始计数),next():下一个兄弟, prev():前一个兄弟
  28. $(".list .item").eq(3).after('<li class="item">new li-1</li>').next().css("color", "violet");
  29. $(".list .item").eq(3).before('<li class="item">new li-2</li>').prev().css("color", "green");
  30. // insterAfter(), insertBefore()
  31. // 不是追加子元素,而是添加兄弟节点
  32. $("<h3>商品列表</h3>").insertBefore(".list");
  33. $("<p>总计: 5万元</p>").insertAfter(".list");
  34. // replaceWith(),原元素上操作
  35. $("h3").replaceWith("<p>购物车</p>");
  36. // replaceAll():新节点上操作
  37. $("<em>购物清单</em>").replaceAll("p:first-of-type");
  38. // remove(),在被删除的元素上操作
  39. // $(".list .item:last-of-type").remove();
  40. $(".list .item").last().remove();
  41. $(".list .item").remove(".item:nth-of-type(3)");
  42. // 如果新增的节点是已经在页面中存在的节点,那么执行的"移动"
  43. // $(".list .item:last").prependTo(".list");
  44. // 如果我只是想复制,不需要移动
  45. $(".list .item:last").clone().prependTo(".list");

1.2 jQuery 的表单事件

  1. <style>
  2. body {
  3. background-color: lightcyan;
  4. }
  5. form {
  6. background-color: #fff;
  7. display: grid;
  8. width: 15em;
  9. gap: 1em;
  10. box-shadow: 0 0 10px #888;
  11. padding: 1em;
  12. margin: 2em auto;
  13. }
  14. form input {
  15. border: none;
  16. border-bottom: 1px solid;
  17. outline: none;
  18. }
  19. form button:hover {
  20. cursor: pointer;
  21. font-weight: bolder;
  22. }
  23. </style>
  24. <!-- onsubmit="return false" 禁止默认表单事件 -->
  25. <!-- <form action="check.php" onsubmit="return false"> -->
  26. <form action="check.php">
  27. <label>LOGIN:</label>
  28. <input type="text" name="username" placeholder="UserName" autofocus />
  29. <input type="password" name="password" placeholder="Password" />
  30. <button>Submit</button>
  31. </form>
  32. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  33. <script>
  34. // 原生禁用
  35. // document.forms[0].onsubmit = (ev) => ev.preventDefault();
  36. // jquery
  37. $("form").submit((ev) => ev.preventDefault());
  38. // 表单验证用户名,为空提示不能为空
  39. // 如果用户名已存在,提示用户重新注册一个
  40. const user = $('input[name="username"]');
  41. // 在失去焦点时立即验证
  42. user.blur(function () {
  43. // 提示信息
  44. let tips = "";
  45. // 用户列表
  46. const users = ["admin", "peter", "zhu"];
  47. // 非空验证
  48. if ($(this).val().length === 0) {
  49. tips = "用户名不能为空";
  50. $(this).focus();
  51. } else if (users.indexOf($(this).val()) === -1) {
  52. tips = `用户名不存在, <a href="register.php" style="text-decoration:none">请注册</a>`;
  53. } else {
  54. tips = `<i style="color:green">用户名正确</i>`;
  55. }
  56. if ($(this).next()[0].tagName !== "SPAN") {
  57. // 显示提示信息到页面中
  58. $("<span></span>")
  59. .html(tips)
  60. .css({
  61. color: "red",
  62. fontSize: "12px",
  63. })
  64. .insertAfter($(this));
  65. }
  66. });
  67. // 添加事件方式,更通用, on('事件类型', '事件回调'),
  68. // addEventListener('eventType', callback) : on()
  69. user.on("input", function () {
  70. if ($(this).next()[0].tagName === "SPAN") $(this).next().remove();
  71. });
  72. </script>

2. jQuery 中的$.ajax 方法

2.1 $.get(url, data, callback)

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  2. <button class="get"> $.get(): 请求数据</button>
  3. <script>
  4. // 1. $.get(url, data, callback)
  5. $(".get").click((ev) => {
  6. // $.get("users.php?id=1", (data) => {
  7. $.get("users.php", { id: 2 }, (data) => {
  8. // console.log(data);
  9. // console.log(ev.target);
  10. $(ev.target).after("<div></div>").next().html(data);
  11. });
  12. });
  13. </script>

2.2 $.post(url, data, callback)

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  2. <button class="post"> $.post(): 请求数据</button>
  3. <script>
  4. // 2. $.post(url, data, callback)
  5. $(".post").click(ev => {
  6. $.post("users.php", { id: 3 }, data => {
  7. $(ev.target).after("<div></div>").next().html(data);
  8. });
  9. });
  10. </script>

2.3 $.ajax(url, data, callback)

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  2. <button class="get">$.get(): 请求数据</button>
  3. <button class="post">$.post(): 请求数据</button>
  4. <script>
  5. // 3. $.ajax({...})
  6. $.ajax({
  7. type: "get",
  8. url: "users.php",
  9. data: { id: 2 },
  10. dataType: "html",
  11. success: (data) => console.log(data),
  12. });
  13. $(".post").click(() => {
  14. $.ajax({
  15. type: "post",
  16. url: "users.php",
  17. data: { id: 2 },
  18. dataType: "text",
  19. success: (data) => console.log(data),
  20. });
  21. });
  22. </script>

2.4 jsonp 跨域请求

  1. // jsonp: 跨域, 回调函数的调用语句在服务器端动态成生即可
  2. $(".jsonp").click((ev) => {
  3. $.ajax({
  4. type: "get",
  5. url: "http://world.io/test.php?id=2&callback=?",
  6. dataType: "jsonp",
  7. // jsonpCallback: "show",
  8. success: function (data) {
  9. console.log(data);
  10. let user = `${data.name} : ( ${data.email})`;
  11. $("button:last-of-type").after("<div></div>").next().html(user);
  12. },
  13. });
  14. });
  15. function show(data) {
  16. console.log(data);
  17. let user = `${data.name} : ( ${data.email})`;
  18. $("button:last-of-type").after("<div></div>").next().html(user);
  19. }

3. Vue 基本术语与插值语法

3.1 挂载点/数据注入/响应式

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. <!-- 创建一个Vue的根节点,Vue实例的作用域 -->
  3. <div class="app">
  4. <p>用户名: {{username}}</p>
  5. <p>{{username + ', php中文网讲师'}}</p>
  6. <p>37 + 43 = {{37 + 43}}</p>
  7. <p>{{flag ? '高兴' : '睡觉'}}</p>
  8. </div>
  9. <script>
  10. // 创建Vue实例
  11. const vm = new Vue({
  12. // 当前vue实例的配置
  13. // 1. 挂载点
  14. // el: document.querySelector('.app'),
  15. el: ".app",
  16. // 2. 数据注入/绑定,注入到了当前vue实例中
  17. data: {
  18. username: "天蓬老师",
  19. flag: false,
  20. },
  21. });
  22. console.log(vm.$el);
  23. // 既然$data已注入到vue实例中, 那么就可能当成vue的属性输出
  24. console.log(vm.$data.username);
  25. console.log(vm.username);
  26. // 3. 响应式
  27. vm.username = "灭绝师妹";
  28. </script>

3.2 v-text/v-once/v-html

  1. <div class="app">
  2. <!-- <p>用户名: {{username}}</p> -->
  3. <!-- vue中的指令以v-为前缀 -->
  4. <!-- v-text : textContent -->
  5. <p>用户名: <span v-text="username"></span></p>
  6. <!-- v-html : innerHTML -->
  7. <p>用户名: <span v-html="username"></span></p>
  8. <!-- <p>用户名: <span v-once="username"></span></p> -->
  9. </div>
  10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11. <script>
  12. const vm = new Vue({
  13. el: ".app",
  14. data: {
  15. username: "小张老师",
  16. },
  17. });
  18. vm.username = '<em style="color:red">西门老师</em>';
  19. </script>