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

一、jQuery 中常用的 DOM 操作

使用 jQuery 庫(kù)一定不能忘了導(dǎo)入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.添加元素
通過(guò)和原生 js 的對(duì)比來(lái)進(jìn)行元素添加操作

// 原生方式
const h2 = document.createElement("h2");
h2.textContent = "原生js往頁(yè)面中添加dom元素之元素添加";
document.body.appendChild(h2);
document.body.insertAdjacentHTML(
  "afterbegin",
  "<h2>原生js往頁(yè)面添加dom元素之html字符串添加</h2>"
);
// jQuery方式
$("<h2>jQuery添加dom元素</h2>").appendTo(document.body);
$("<h2>").text("jQuery添加dom元素之子元素添加").appendTo(document.body);
// 子元素.appendTo(父元素)
$("body").append("<h2>jQuery添加dom元素之父元素添加</h2>");
// 父元素.append(子元素)
$("body").append("<ol></ol>");
$("ol").append(() => {
  let str = "";
  for (let i = 0; i < 5; i++) {
    str += `<li><a href="">通過(guò)append添加的列表:${i + 1}</a></li>`;
  }
  return str;
});

2.刪除元素
刪除元素的方法在 jQuery 中有很多，比較常用的有 empty()方法、remove()方法
empoty()方法
$("ol").empty():把 ol 下的的子元素包括文本節(jié)點(diǎn)全部刪除
可以通過(guò)兩張圖片來(lái)觀察 empty()方法的作用

這張圖是沒(méi)有使用 empty()方法時(shí)候的 html 文檔結(jié)構(gòu)

這張圖片是使用了 empty()方法之后的 html 文檔結(jié)構(gòu)

remove()方法: 從 dom 中把所有段落刪除,包括本身
$("ol").remove():將 ol 下的子元素包括文本節(jié)點(diǎn)全部刪除，包括 ol 本身也會(huì)刪掉
下面通過(guò)兩張圖片對(duì)比來(lái)看出 remove()的強(qiáng)大

這張圖是沒(méi)有使用 remove()方法時(shí)候的 html 文檔結(jié)構(gòu)

這張圖片是使用了 remove()方法之后的 html 文檔結(jié)構(gòu)

使用 jQuery 事件操作完成一個(gè)簡(jiǎn)單的留言板
留言板案例在以前的博客中有提到過(guò)，是用原生完成的一個(gè)簡(jiǎn)單的留言板，現(xiàn)在只不過(guò)是使用 jQuery 中的一些事件以及 dom 操作方法來(lái)將原生的一些東西替代掉

// 獲取元素
const msg = $("textarea");
const lists = $("#list");
// 創(chuàng)建事件，當(dāng)內(nèi)容輸入文本框時(shí)，將其打印到下邊
msg.keydown((ev) => {
  // 鍵盤事件中的key屬性，表示按下的鍵名
  // console.log(ev.key);
  if (ev.key === "Enter") {
    // 非空判斷
    //   console.log(ev.currentTarget.value);
    if (ev.currentTarget.value.length === 0) {
      alert("內(nèi)容為空");
      msg.focus();
    } else {
      // 將留言內(nèi)容添加到列表中
      // 創(chuàng)建留言
      let olStr = `<div><li>${ev.currentTarget.value}</li><button onclick="del(this)">刪除留言</button></div>`;
      // 應(yīng)該將最新的信息放在第一條
      lists.append(olStr);
      // 按下回車后，清空留言板
      ev.currentTarget.value = null;
    }
  }
});
// 刪除留言
function del(ele) {
  // DOM接口的outerHTML屬性獲取描述元素（包括其后代）的序列化HTML片段。它也可以設(shè)置為用從給定字符串解析的節(jié)點(diǎn)替換元素。
  // 返回時(shí)，內(nèi)容包含描述元素及其后代的序列化HTML片段。
  return confirm("是否刪除?") ? (ele.parentNode.outerHTML = null) : false;
}

二、jQuery 完成跨域請(qǐng)求操作

使用 jQuery 完成 ajax 異步請(qǐng)求操作和 jsonp 跨域操作是使用 jQuery 對(duì)象的$.get(),$.post()和$.ajax()方法完成的，其中$.get()和$.post()都是$.ajax()方法的快捷操作，他們的參數(shù)都是(url請(qǐng)求地址,qs查詢參數(shù),callback回調(diào)函數(shù)).

1.$.get(url 請(qǐng)求地址,qs 查詢參數(shù),callback 回調(diào)函數(shù))請(qǐng)求
在這里我使用的是 php 作為后端代碼，users.php 中是使用二維數(shù)組模擬數(shù)據(jù)表的查詢結(jié)果

$(".get").click(function (ev) {
  $.get("users.php", { id: 2 }, function (data) {
    // console.log(data);
    // console.log(ev.target);
    $(ev.target).after("<div></div>").next().html(data);
  });
});

查詢結(jié)果

2.$.post(url 請(qǐng)求地址,qs 查詢參數(shù),callback 回調(diào)函數(shù))請(qǐng)求
post 請(qǐng)求和 get 一樣，只不過(guò)是查詢參數(shù)設(shè)置不同

$(".post").click(function (ev) {
  $.post("users.php", { id: 3 }, function (data) {
    // console.log(data);
    // console.log(ev.target);
    $(ev.target).after("<div></div>").next().html(data);
  });
});

請(qǐng)求結(jié)果

使用$.ajax()方法同樣可以完成上邊兩個(gè)請(qǐng)求的操作

$(".post").click(function (ev) {
  $.ajax({
    type: "post",
    url: "users.php",
    data: { id: 1 },
    dataType: "html",
    success: function (data) {
      $(ev.target).after("<div></div>").next().html(data);
    },
  });
});

請(qǐng)求結(jié)果

3. $.ajax()實(shí)現(xiàn)jsonp跨域
$.ajax()方法實(shí)現(xiàn)的跨域操作其實(shí)也是利用的 jsonp 的原理，和原生js中的差不多。

$(".jsonp").click(function (ev) {
  $.ajax({
    type: "get",
    url: "http://world.io/text.php?id=2&jsonp=?",
    dataType: "jsonp",
    // 告訴跨域訪問(wèn)的服務(wù)器，前端需要返回的函數(shù)名
    jsonpCallback: "show",
  });
});
function show(data) {
  console.log(data);
  $(".jsonp").after("<div></div>").next().html(`${data.name}:(${data.email})`);
}

跨域查詢結(jié)果

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：