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

1. jQuery 常用操作

1.1jQuery 的 dom 操作

<ul class="list">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// dom元素新增,更新,删除
// 新增
// append(), prepend(),after(),before()
// instertAdjacentElement(),insertAdjacentHTML()
// 追加到尾部
let li = document.createElement("li");
li.textContent = "item4";
li.style.color = "red";
li.classList.add("item");
document.querySelector(".list").append(li);
// jQuery
// append(), 在父元素上调用
$(".list").append("<li>item5</li>").find(":last").addClass("item").css("color", "green");
// appendTo(), 在子元素上调用
$("<li>item6</li>").addClass("item").css("color", "blue").appendTo(".list");
// prepend(): 追加到头部
$(".list").prepend("<li>item0</li>").find(":first").addClass("item").css("color", "red");
// prependTo(), 在子元素上调用
$("<li>item-1</li>").addClass("item").css("color", "skyblue").prependTo(".list");
// eq(从0开始计数),next():下一个兄弟, prev():前一个兄弟
$(".list .item").eq(3).after('<li class="item">new li-1</li>').next().css("color", "violet");
$(".list .item").eq(3).before('<li class="item">new li-2</li>').prev().css("color", "green");
// insterAfter(), insertBefore()
// 不是追加子元素,而是添加兄弟节点
$("<h3>商品列表</h3>").insertBefore(".list");
$("<p>总计: 5万元</p>").insertAfter(".list");
// replaceWith(),原元素上操作
$("h3").replaceWith("<p>购物车</p>");
// replaceAll():新节点上操作
$("<em>购物清单</em>").replaceAll("p:first-of-type");
// remove(),在被删除的元素上操作
// $(".list .item:last-of-type").remove();
$(".list .item").last().remove();
$(".list .item").remove(".item:nth-of-type(3)");
// 如果新增的节点是已经在页面中存在的节点,那么执行的"移动"
// $(".list .item:last").prependTo(".list");
// 如果我只是想复制,不需要移动
$(".list .item:last").clone().prependTo(".list");

1.2 jQuery 的表单事件

<style>
  body {
    background-color: lightcyan;
  }
  form {
    background-color: #fff;
    display: grid;
    width: 15em;
    gap: 1em;
    box-shadow: 0 0 10px #888;
    padding: 1em;
    margin: 2em auto;
  }
  form input {
    border: none;
    border-bottom: 1px solid;
    outline: none;
  }
  form button:hover {
    cursor: pointer;
    font-weight: bolder;
  }
</style>
<!-- onsubmit="return false" 禁止默认表单事件 -->
<!-- <form action="check.php" onsubmit="return false"> -->
<form action="check.php">
  <label>LOGIN:</label>
  <input type="text" name="username" placeholder="UserName" autofocus />
  <input type="password" name="password" placeholder="Password" />
  <button>Submit</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
  // 原生禁用
  //   document.forms[0].onsubmit = (ev) => ev.preventDefault();
  // jquery
  $("form").submit((ev) => ev.preventDefault());
  // 表单验证用户名,为空提示不能为空
  // 如果用户名已存在,提示用户重新注册一个
  const user = $('input[name="username"]');
  // 在失去焦点时立即验证
  user.blur(function () {
    // 提示信息
    let tips = "";
    // 用户列表
    const users = ["admin", "peter", "zhu"];
    // 非空验证
    if ($(this).val().length === 0) {
      tips = "用户名不能为空";
      $(this).focus();
    } else if (users.indexOf($(this).val()) === -1) {
      tips = `用户名不存在, <a href="register.php" style="text-decoration:none">请注册</a>`;
    } else {
      tips = `<i style="color:green">用户名正确</i>`;
    }
    if ($(this).next()[0].tagName !== "SPAN") {
      // 显示提示信息到页面中
      $("<span></span>")
        .html(tips)
        .css({
          color: "red",
          fontSize: "12px",
        })
        .insertAfter($(this));
    }
  });
  // 添加事件方式,更通用, on('事件类型', '事件回调'),
  // addEventListener('eventType', callback) : on()
  user.on("input", function () {
    if ($(this).next()[0].tagName === "SPAN") $(this).next().remove();
  });
</script>

2. jQuery 中的$.ajax 方法

2.1 $.get(url, data, callback)

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

2.2 $.post(url, data, callback)

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

2.3 $.ajax(url, data, callback)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<button class="get">$.get(): 请求数据</button>
<button class="post">$.post(): 请求数据</button>
<script>
  // 3. $.ajax({...})
  $.ajax({
    type: "get",
    url: "users.php",
    data: { id: 2 },
    dataType: "html",
    success: (data) => console.log(data),
  });
  $(".post").click(() => {
    $.ajax({
      type: "post",
      url: "users.php",
      data: { id: 2 },
      dataType: "text",
      success: (data) => console.log(data),
    });
  });
</script>

2.4 jsonp 跨域请求

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

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

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

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

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

<div class="app">
  <!-- <p>用户名: {{username}}</p> -->
  <!-- vue中的指令以v-为前缀 -->
  <!-- v-text : textContent -->
  <p>用户名: <span v-text="username"></span></p>
  <!-- v-html : innerHTML -->
  <p>用户名: <span v-html="username"></span></p>
  <!-- <p>用户名: <span v-once="username"></span></p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: ".app",
    data: {
      username: "小张老师",
    },
  });
  vm.username = '<em style="color:red">西门老师</em>';
</script>