一、jQuery 的 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");

二、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>

三、jQuery-Ajax

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 $.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>

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>

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);
}