JavaScript_part6—JQuery.md

什么是jQurey

简介

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

使用 jQuery 库

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

1
2
3

<head>
	<script type="text/javascript" src="jquery.js"></script>
</head>

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQuery.com 下载。

Google 和 Microsoft 对 jQuery 的支持都很好。

如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jQuery 语法

jQuery 的核心：`$` 符号

jQuery 最显著的标志是全局变量 $，也可使用 jQuery 替代，两者完全等价，但是肯定还是用方便的

$是 jQuery 的核心函数，用于选择 DOM 元素、创建元素或执行其他操作。

// 两种写法等价
$ === jQuery; // true

// 通常使用 $ 简化代码
$(selector); // 选择元素
jQuery(selector); // 效果相同

选择器：获取 DOM 元素

jQuery 选择器语法与 CSS 选择器基本一致，用于快速定位 DOM 元素，返回一个jQuery 对象（包含匹配的 DOM 元素集合）。

基础选择器

选择器	说明	示例
`#id`	通过 ID 选择元素	`$("#box")` 选择 ID 为 `box` 的元素
`.class`	通过类名选择元素	`$(".item")` 选择所有类为 `item` 的元素
`element`	通过标签名选择元素	`$("div")` 选择所有 `<div>` 元素
`*`	选择所有元素	`$("*")` 选择页面中所有元素
`selector1, selector2`	多选择器（并列）	`$("div, p")` 选择所有 `<div>` 和 `<p>`

层级选择器

选择器	说明	示例
`parent child`	选择父元素下的所有子元素（后代）	`$("ul li")` 选择 `<ul>` 下所有 `<li>`
`parent > child`	选择父元素的直接子元素	`$("ul > li")` 选择 `<ul>` 的直接子 `<li>`
`prev + next`	选择紧邻前一个元素的后一个元素	`$("h2 + p")` 选择 `<h2>` 后的第一个 `<p>`
`prev ~ siblings`	选择前一个元素后的所有兄弟元素	`$("h2 ~ p")` 选择 `<h2>` 后的所有 `<p>`

过滤选择器（以 `:` 开头）

选择器	说明	示例
`:first`	选择第一个元素	`$("li:first")` 选择第一个 `<li>`
`:last`	选择最后一个元素	`$("li:last")` 选择最后一个 `<li>`
`:eq(index)`	选择索引为 `index` 的元素（从 0 开始）	`$("li:eq(2)")` 选择索引为 2 的 `<li>`
`:gt(index)`	选择索引大于 `index` 的元素	`$("li:gt(1)")` 选择索引 >1 的 `<li>`
`:lt(index)`	选择索引小于 `index` 的元素	`$("li:lt(3)")` 选择索引 <3 的 `<li>`
`:not(selector)`	排除符合 `selector` 的元素	`$("li:not(.active)")` 选择不含 `active` 类的 `<li>`
`:odd`	选择索引为奇数的元素	`$("tr:odd")` 选择表格中索引为奇数的行
`:even`	选择索引为偶数的元素	`$("tr:even")` 选择表格中索引为偶数的行

选择器使用

演示一下选择器的使用

<ul>
  <li class="item">Item 1</li>
  <li class="item active">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  // 选择所有类为 item 的 li
  const $items = $("li.item"); 
  console.log($items.length); // 输出 2

  // 选择 active 类的 li
  const $active = $("li.active"); 
  console.log($active.text()); // 输出 "Item 2"

  // 选择最后一个 li
  const $lastLi = $("li:last"); 
  console.log($lastLi.text()); // 输出 "Item 3"
</script>

jQuery 对象：通过 $() 选择的元素集合，是 jQuery 包装后的对象，只能调用 jQuery 方法（如 text()、css()）。
DOM 对象：原生 JavaScript 获取的元素（如 document.getElementById()），只能调用原生方法（如 innerText、style）。

他们互相也能转换

jQuery 对象 → DOM 对象：通过索引或 get(index) 方法

const $div = $("div"); // jQuery 对象
const domDiv1 = $div[0]; // 索引法（推荐）
const domDiv2 = $div.get(0); // get() 方法
domDiv1.innerText = "Hello"; // 调用原生方法

DOM 对象 → jQuery 对象：用 $() 包装

1
2
3

const domP = document.querySelector("p"); // DOM 对象
const $p = $(domP); // 转为 jQuery 对象
$p.text("World"); // 调用 jQuery 方法

常用 DOM 操作方法

jQuery 提供了简洁的方法操作元素内容、属性、样式等内容

内容操作

方法	说明	示例
`text()`	获取 / 设置元素的文本内容（纯文本，忽略 HTML）	`$("p").text()` 获取文本；`$("p").text("新文本")` 设置文本
`html()`	获取 / 设置元素的 HTML 内容（包含标签）	`$("div").html()` 获取 HTML；`$("div").html("<b>粗体</b>")` 设置 HTML
`val()`	获取 / 设置表单元素的值（如 input、select）	`$("input").val()` 获取值；`$("input").val("用户名")` 设置值

属性操作

方法	说明	示例
`attr(name, value)`	获取 / 设置元素的属性（如 src、href）	`$("img").attr("src")` 获取 src；`$("img").attr("src", "pic.jpg")` 设置 src
`removeAttr(name)`	移除元素的属性	`$("a").removeAttr("target")` 移除 target 属性
`prop(name, value)`	获取 / 设置元素的布尔属性（如 checked、disabled）	`$("input:checkbox").prop("checked")` 判断是否勾选；`$("input").prop("disabled", true)` 禁用输入框

注意：布尔属性（如 checked、disabled）推荐用 prop()，普通属性用 attr()。

样式操作

方法	说明	示例
`css(property, value)`	获取 / 设置元素的 CSS 样式	`$("div").css("color")` 获取颜色；`$("div").css("color", "red")` 设置颜色为红色
`addClass(className)`	为元素添加类名	`$("li").addClass("active")` 给 `<li>` 添加 `active` 类
`removeClass(className)`	移除元素的类名	`$("li").removeClass("active")` 移除 `active` 类
`toggleClass(className)`	切换类名（存在则移除，不存在则添加）	`$("li").toggleClass("active")` 切换 `active` 类
`hasClass(className)`	判断元素是否包含指定类名（返回布尔值）	`$("li").hasClass("active")` 检查是否有 `active` 类

操作示例

<div id="box">初始文本</div>
<input type="text" id="username" value="默认值">
<img src="old.jpg" alt="图片">

<script>
  // 内容操作
  $("#box").html("<span>新的 HTML 内容</span>"); // 设置 HTML
  console.log($("#username").val()); // 输出 "默认值"
  $("#username").val("张三"); // 设置输入框值

  // 属性操作
  $("img").attr("src", "new.jpg"); // 更换图片
  console.log($("img").attr("alt")); // 输出 "图片"

  // 样式操作
  $("#box").css({ 
    "color": "blue", 
    "font-size": "20px" 
  }); // 批量设置样式
  $("#box").addClass("highlight"); // 添加类
</script>

jQuery添加/删除元素

添加元素（插入新元素到页面中）

添加元素通常分为两步：

创建元素：用 $() 语法创建新的 jQuery 元素（如 $("<div>新元素</div>")）。
插入元素：通过特定方法将创建的元素插入到页面的指定位置（如父元素内部、兄弟元素前后等）。

内部插入（将新元素添加到目标元素的内部）

方法	说明	示例（假设已有 `<ul id="list"><li>原元素</li></ul>`）
`append(content)`	向目标元素内部末尾添加内容（作为最后一个子元素）	`$("#list").append("<li>新元素1</li>")` → `<ul><li>原元素</li><li>新元素1</li></ul>`
`prepend(content)`	向目标元素内部开头添加内容（作为第一个子元素）	`$("#list").prepend("<li>新元素0</li>")` → `<ul><li>新元素0</li><li>原元素</li></ul>`
`appendTo(target)`	把当前元素添加到 `target` 元素的内部末尾（与 `append` 方向相反）	$(“

外部插入（将新元素添加到目标元素的外部，作为兄弟元素）

方法	说明	示例（假设已有 `<div id="box">原元素</div>`）
`after(content)`	在目标元素后面添加内容（作为下一个兄弟元素）	`$("#box").after("<p>后面的元素</p>")` → `<div>原元素</div><p>后面的元素</p>`
`before(content)`	在目标元素前面添加内容（作为上一个兄弟元素）	`$("#box").before("<p>前面的元素</p>")` → `<p>前面的元素</p><div>原元素</div>`
`insertAfter(target)`	把当前元素添加到 `target` 元素的后面（与 `after` 方向相反）	$(“

<div id="container">
  <p>原有内容</p>
</div>

<script>
  // 1. 创建元素（两种方式）
  const $newDiv = $("<div class='new'>动态创建的div</div>"); // 直接创建
  const $newLi = $("<li>").text("动态列表项").css("color", "blue"); // 链式创建

  // 2. 内部插入（添加到 container 内部）
  $("#container")
    .append($newDiv) // 内部末尾添加新div
    .prepend("<span>开头的内容</span>"); // 内部开头添加span

  // 3. 外部插入（添加到 container 外部）
  $("#container")
    .after("<hr>") // 后面添加水平线
    .before($newLi); // 前面添加列表项

  /* 最终结构：
  <li style="color: blue;">动态列表项</li>
  <div id="container">
    <span>开头的内容</span>
    <p>原有内容</p>
    <div class="new">动态创建的div</div>
  </div>
  <hr>
  */
</script>

删除元素（移除页面中的已有元素）

删除元素的方法主要用于移除不需要的 DOM 元素，包括移除自身、清空内容等。

方法	说明	示例（假设已有 `<ul id="list"><li>1</li><li>2</li><li>3</li></ul>`）
`remove(selector)`	移除匹配的元素自身及所有子元素（可选参数 `selector` 用于筛选要删除的元素）	`$("#list li:eq(1)").remove()` → 移除索引为 1 的 li（即第二个 li）
`empty()`	清空元素的所有子元素，但保留元素自身	`$("#list").empty()` → `<ul id="list"></ul>`（ul 保留，子元素被删除）
`detach(selector)`	移除匹配的元素（与 `remove` 类似），但保留元素的事件和数据（可重新插入使用）	`const $li = $("#list li").detach();` → 后续可通过 `$("#list").append($li)` 重新添加

删除元素综合用法

<ul id="fruitList">
  <li>苹果</li>
  <li class="delete">香蕉</li>
  <li>橙子</li>
  <li class="delete">西瓜</li>
</ul>

<script>
  // 1. 移除所有带 delete 类的 li（自身及内容）
  $("#fruitList li.delete").remove(); 
  // 结果：<ul><li>苹果</li><li>橙子</li></ul>

  // 2. 清空列表（保留 ul 自身）
  $("#fruitList").empty(); 
  // 结果：<ul id="fruitList"></ul>

  // 3. 用 detach 移除元素（保留事件）
  // 先给 li 绑定事件
  $("li").click(function() {
    console.log($(this).text());
  });
  // 移除所有 li 并保存
  const $removedLis = $("li").detach(); 
  // 重新插入，事件仍然有效
  $("#fruitList").append($removedLis); 
</script>

克隆元素

clone() 方法用于复制元素，常配合添加方法使用（如复制一个按钮并插入到其他位置）。

方法	说明	示例
`clone(deep)`	克隆元素，`deep` 为布尔值（默认 `false`）：- `false`：仅克隆元素本身，不克隆事件和子元素的事件- `true`：克隆元素、子元素及所有绑定的事件	`$(".btn").clone(true).appendTo("body")` → 复制按钮并添加到页面，且保留点击事件

<button class="btn">点击我</button>

<script>
  // 给按钮绑定点击事件
  $(".btn").click(function() {
    alert("原按钮被点击");
  });

  // 克隆按钮（带事件）并添加到页面
  const $cloneBtn = $(".btn").clone(true); // true 表示克隆事件
  $cloneBtn.text("克隆的按钮").appendTo("body");

  // 点击克隆的按钮，会触发相同的 alert（事件被保留）
</script>

事件处理

jQuery 简化了事件绑定，提供了统一的事件处理方法，支持多种事件（点击、鼠标移动、表单提交等）。

基础事件绑定

方法	说明	示例
`click(fn)`	绑定点击事件	`$("button").click(function() { ... })`
`dblclick(fn)`	绑定双击事件	`$("div").dblclick(function() { ... })`
`mouseenter(fn)`	鼠标进入事件	`$("li").mouseenter(function() { ... })`
`mouseleave(fn)`	鼠标离开事件	`$("li").mouseleave(function() { ... })`
`mousedown(fn)`	鼠标按下时触发
`mouseup(fn)`	鼠标松开时触发
`mouseout(fn)`	鼠标离开元素或其子元素时触发（会冒泡）
`mouseover(fn)`	鼠标进入元素或其子元素时触发（会冒泡）
`submit(fn)`	表单提交事件	`$("form").submit(function() { ... })`
`select(fn)`	文本被选中时触发
`input(fn)`	元素值实时变化时触发
`keydown(fn)`	键盘按键按下时触发（包括功能键，如 Ctrl、Shift，持续按住会重复触发）
`keyup(fn)`	键盘按键松开时触发
`keypress(fn)`	键盘按键按下并释放时触发（仅支持字符键，不支持功能键，如 Ctrl、Alt）
`on(event, fn)`	通用事件绑定（推荐）	`$("button").on("click", function() { ... })`

<input type="text" id="search" placeholder="输入搜索内容...">

<script>
  $("#search")
    // 按键按下（支持功能键）
    .keydown(function(e) {
      if (e.ctrlKey && e.key === "s") { // 监听 Ctrl+S
        e.preventDefault(); // 阻止浏览器默认保存行为
        console.log("执行自定义保存逻辑");
      }
    })
    // 字符键输入（实时监听）
    .keypress(function() {
      console.log("当前输入：", $(this).val());
    })
    // 按键松开
    .keyup(function() {
      console.log("输入完成，准备验证");
    });
</script>

事件解绑

off(event)：移除指定事件的绑定

// 绑定点击事件
function handleClick() {
  console.log("点击了按钮");
}
$("button").on("click", handleClick);

// 解绑点击事件
$("button").off("click", handleClick);

事件对象

事件处理函数中可接收一个事件对象 e，类似Java异常，包含事件相关信息（如点击位置、触发元素等）：

$("button").click(function(e) {
  console.log("触发元素：", e.target); // 事件源 DOM 元素
  console.log("点击位置：", e.pageX, e.pageY); // 相对于文档的坐标
  e.preventDefault(); // 阻止默认行为（如链接跳转）
  e.stopPropagation(); // 阻止事件冒泡
});

文档就绪事件

事实上，我们应该把 jQuery 函数写到一个 document ready 函数中：

1
2
3

$(document).ready(function(){
   // 代码...
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

但是这个写法可以被简化

$(function(){
 
   // 开始写 jQuery 代码...
 
});

事件处理示例

<button id="btn">点击我</button>
<a href="https://baidu.com" id="link">百度</a>

<script>
  // 点击按钮弹出提示
  $("#btn").click(function() {
    alert("按钮被点击了");
  });

  // 阻止链接默认跳转，改为弹出提示
  $("#link").click(function(e) {
    e.preventDefault(); // 阻止默认跳转
    alert("链接被点击，但不跳转");
  });

  // 鼠标进入/离开按钮时改变样式
  $("#btn").on({
    mouseenter: function() {
      $(this).css("background", "lightblue");
    },
    mouseleave: function() {
      $(this).css("background", ""); // 恢复默认
    }
  });
</script>

动画效果

jQuery 内置了多种动画方法，可快速实现元素的显示、隐藏、滑动、淡入淡出等效果。

方法	说明	示例
`show(speed)`	显示元素（可指定速度，如 “slow”、“fast” 或毫秒）	`$("div").show(1000)` 1 秒内显示元素
`hide(speed)`	隐藏元素	`$("div").hide("slow")` 缓慢隐藏元素
`toggle(speed)`	切换元素显示 / 隐藏状态	`$("div").toggle(500)` 500 毫秒内切换
`slideDown(speed)`	向下滑动显示元素	`$("ul").slideDown("fast")` 快速下滑显示
`slideUp(speed)`	向上滑动隐藏元素	`$("ul").slideUp(800)` 800 毫秒上滑隐藏
`slideToggle(speed)`	切换滑动状态	`$("ul").slideToggle()` 切换滑动
`fadeIn(speed)`	淡入显示元素	`$("img").fadeIn(1000)` 1 秒淡入
`fadeOut(speed)`	淡出隐藏元素	`$("img").fadeOut("slow")` 缓慢淡出
`animate(properties, speed)`	自定义动画（修改 CSS 属性）	`$("div").animate({ left: "200px" }, 1000)` 1 秒内移动到 left:200px

<div id="box" style="width: 100px; height: 100px; background: red; display: none;"></div>
<button id="showBtn">显示</button>
<button id="moveBtn">移动</button>

<script>
  // 点击显示按钮，淡入显示元素
  $("#showBtn").click(function() {
    $("#box").fadeIn(1000); // 1秒内淡入
  });

  // 点击移动按钮，自定义动画移动元素
  $("#moveBtn").click(function() {
    $("#box").animate({
      left: "300px",
      top: "200px",
      width: "200px",
      height: "200px"
    }, 1500); // 1.5秒内完成动画
  });
</script>

隐藏和显示非常有用,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
	background-color:#e5eecc;
	padding:7px;
	border:solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Google</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>站点名: Google<br> 
站点 URL：https://www.google.com</p>
</div>

<h3>菜鸟教程</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>站点名: 菜鸟教程<br> 
站点 URL：https://www.runoob.com</p>

</div>

</body>
</html>

jQuery链

jQuery 方法执行后通常会返回当前 jQuery 对象，因此可链式调用多个方法，允许我们在相同的元素上运行多条 jQuery 命令，简化代码：

这样的话，浏览器就不必多次查找相同的元素。

// 链式编程：选择元素 → 添加类 → 设置文本 → 淡入显示
$("#box")
  .addClass("active")
  .text("链式编程")
  .css("color", "white")
  .fadeIn(1000);

jQuery 尺寸

元素尺寸（宽高）相关方法

jQuery 提供了 4 个核心方法用于获取元素的宽高，它们的区别主要在于是否包含内边距（padding）、边框（border） 和外边距（margin）。

方法	说明	计算公式（以宽度为例）
`width()`	获取 / 设置元素的内容宽度（不包含 padding、border、margin）	宽度 = 内容区宽度
`height()`	获取 / 设置元素的内容高度（同上）	高度 = 内容区高度
`innerWidth()`	获取元素的内容宽度 + 内边距（padding）（不包含 border、margin）	宽度 = 内容区宽度 + padding-left + padding-right
`innerHeight()`	获取元素的内容高度 + 内边距（padding）（同上）	高度 = 内容区高度 + padding-top + padding-bottom
`outerWidth(includeMargin)`	获取元素的内容宽度 + padding + border（可选参数 `includeMargin=true` 时再加上 margin）	宽度 = 内容区宽度 + padding + border +（margin 可选）
`outerHeight(includeMargin)`	获取元素的内容高度 + padding + border（同上）	高度 = 内容区高度 + padding + border +（margin 可选）

假设 HTML 元素样式如下：

<div id="box" style="
  width: 100px;       /* 内容宽度 */
  height: 100px;      /* 内容高度 */
  padding: 10px;      /* 内边距（上下左右各10px） */
  border: 5px solid;  /* 边框（上下左右各5px） */
  margin: 20px;       /* 外边距（上下左右各20px） */
"></div>

通过 jQuery 方法获取的尺寸如下：

const $box = $("#box");

console.log($box.width());        // 100px（仅内容宽度）
console.log($box.height());       // 100px（仅内容高度）

console.log($box.innerWidth());   // 120px（100 + 10*2，内容+padding）
console.log($box.innerHeight());  // 120px（同上）

console.log($box.outerWidth());   // 130px（100 + 10*2 + 5*2，内容+padding+border）
console.log($box.outerHeight());  // 130px（同上）

console.log($box.outerWidth(true)); // 170px（130 + 20*2，加上margin）
console.log($box.outerHeight(true)); // 170px（同上）

而且width() 和 height() 方法不仅能获取尺寸，还能设置元素的宽高（设置时仅影响内容区尺寸）：

// 设置宽度为 200px
$box.width(200);
// 设置高度为 150px（支持字符串形式，如 "150px" 或 "50%"）
$box.height("150px");

// 此时内容区宽高变为 200px × 150px，inner/outer 尺寸会相应变化
console.log($box.innerWidth()); // 200 + 10*2 = 220px

窗口 / 文档尺寸

除了元素尺寸，jQuery 还提供了获取浏览器窗口和文档（页面） 尺寸的方法，常用于响应式布局或全屏效果。

方法 / 属性	说明	示例
`$(window).width()`	浏览器窗口的可视区域宽度（不含浏览器边框、工具栏，包含滚动条）	`$(window).width()` → 如 1366px
`$(window).height()`	浏览器窗口的可视区域高度（同上）	`$(window).height()` → 如 768px
`$(document).width()`	整个文档（页面）的实际宽度（内容的总宽度，可能超过窗口宽度）	`$(document).width()` → 如 1920px
`$(document).height()`	整个文档（页面）的实际高度（内容的总高度，可能超过窗口高度）	`$(document).height()` → 如 3000px

监听窗口尺寸变化

// 初始获取窗口尺寸
function logWindowSize() {
  console.log("窗口宽度：", $(window).width());
  console.log("窗口高度：", $(window).height());
}
logWindowSize();

// 窗口大小改变时重新获取（如用户缩放窗口）
$(window).resize(function() {
  logWindowSize();
});

滚动尺寸（滚动距离）

用于获取元素或页面的滚动距离（如页面滚动了多少像素，滚动条位置等）。

方法	说明	示例场景
`scrollTop()`	获取 / 设置元素或文档的垂直滚动距离（向上滚动的像素数）	页面滚动到顶部：`$(window).scrollTop(0)`
`scrollLeft()`	获取 / 设置元素或文档的水平滚动距离（向左滚动的像素数）	滚动到页面最左侧：`$(window).scrollLeft(0)`

// 1. 获取页面滚动距离（文档的滚动距离需通过 $(window) 或 $(document) 获取）
$(window).scroll(function() {
  // 垂直滚动距离（页面顶部到可视区域顶部的距离）
  const scrollTop = $(window).scrollTop();
  // 水平滚动距离
  const scrollLeft = $(window).scrollLeft();
  console.log(`滚动距离：上 ${scrollTop}px，左 ${scrollLeft}px`);
});

// 2. 设置滚动距离（如点击按钮回到顶部）
$("#backToTop").click(function() {
  $(window).scrollTop(0); // 垂直滚动到顶部
});

// 3. 获取元素内部的滚动距离（如滚动容器）
const $scrollBox = $(".scroll-box"); // 假设是一个带滚动条的容器
console.log("容器内部滚动距离：", $scrollBox.scrollTop());

位置相关方法（元素坐标）

除了尺寸，jQuery 还提供了获取元素位置的方法，用于定位元素（如弹窗居中、拖拽等）。

方法	说明	示例（假设元素距离文档顶部 100px，左侧 200px）
`offset()`	获取元素相对于文档（页面）左上角的坐标（返回 `{ top: 数值, left: 数值 }`），与父元素无关	`$box.offset()` → `{ top: 100, left: 200 }`
`position()`	获取元素相对于最近的已定位祖先元素（position≠static）的坐标（无定位祖先则相对于文档）	若父元素是定位元素且距离文档顶部 50px，则 `$box.position().top` 为 50px（100-50）

位置方法对比

1
2
3

<div class="parent" style="position: relative; top: 50px; left: 50px;">
  <div class="child" style="position: absolute; top: 30px; left: 40px;"></div>
</div>

const $child = $(".child");

// offset()：相对于文档左上角的坐标
console.log($child.offset().top); // 50（父元素top） + 30（子元素top） = 80px
console.log($child.offset().left); // 50（父元素left） + 40（子元素left） = 90px

// position()：相对于最近的定位祖先（.parent）的坐标
console.log($child.position().top); // 30px（子元素自身的top）
console.log($child.position().left); // 40px（子元素自身的left）

应用：弹窗居中显示

利用 offset() 和窗口尺寸实现弹窗在可视区域居中：

function centerDialog() {
  const $dialog = $("#dialog");
  const dialogWidth = $dialog.outerWidth(); // 弹窗总宽度（含padding+border）
  const dialogHeight = $dialog.outerHeight(); // 弹窗总高度

  // 窗口可视区域尺寸
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();

  // 计算居中坐标（窗口中心 - 弹窗一半尺寸）
  const left = (windowWidth - dialogWidth) / 2;
  const top = (windowHeight - dialogHeight) / 2;

  // 设置弹窗位置
  $dialog.offset({ top: top, left: left });
}

// 初始化时居中
centerDialog();
// 窗口大小改变时重新居中
$(window).resize(centerDialog);

jQuery遍历

和我们之前讲的 DOM 树的遍历一样，jQuery也可以进行遍历，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

起点：通过选择器选中的初始元素（jQuery 对象），如 $("ul")。
方向：向上（祖先）、向下（后代）、同级（兄弟）。
结果：返回新的 jQuery 对象（可链式调用其他方法）。

向下遍历（查找后代元素）

从当前元素出发，查找其内部的子元素、孙元素等后代节点。

方法	说明	示例（HTML 结构见下方）
`children(selector)`	只查找直接子元素（不包含孙元素），可选 `selector` 筛选。	`$("ul").children("li.active")` → 找 ul 直接子元素中类为 active 的 li
`find(selector)`	查找所有后代元素（包含子、孙、曾孙等），必须传 `selector`。	`$("ul").find("span")` → 找 ul 中所有后代 span 元素

基础 HTML 结构（用于后续示例）

<div class="container">
  <ul id="list">
    <li class="item">Item 1
      <span>子元素</span>
    </li>
    <li class="item active">Item 2
      <div>
        <span>孙元素</span>
      </div>
    </li>
    <li class="item">Item 3</li>
  </ul>
  <p class="desc">描述文本</p>
</div>

向下遍历

// 1. children()：只找直接子元素
const $ulChildren = $("#list").children(); // 所有 li（ul 的直接子元素）
console.log($ulChildren.length); // 3（3个 li）

// 带筛选：ul 的直接子元素中类为 active 的 li
const $activeLi = $("#list").children("li.active");
console.log($activeLi.text().trim()); // "Item 2"

// 2. find()：找所有后代（无论层级）
const $allSpans = $("#list").find("span"); // 所有 span（包含子、孙层级）
console.log($allSpans.length); // 2（Item1 的 span 和 Item2 的 span）

向上遍历（查找祖先元素）

从当前元素出发，查找其父元素、祖父元素等祖先节点。

方法	说明	示例
`parent(selector)`	只查找直接父元素（上一级），可选 `selector` 筛选。	`$("li.active").parent()` → 找 active 类 li 的直接父元素（ul）
`parents(selector)`	查找所有祖先元素（父、祖父、根元素），可选 `selector` 筛选。	`$("span").parents("div")` → 找 span 的所有 div 祖先（container 类的 div）
`parentsUntil(selector)`	查找两个元素之间的所有祖先（不包含终点）。	`$("span").parentsUntil("body")` → 找 span 到 body 之间的所有祖先（div、ul、li 等）
`closest(selector)`	查找最近的匹配祖先（包括自身），从当前元素向上找，找到第一个匹配的就停止。	`$("span").closest("li")` → 找 span 最近的 li 祖先（Item1 或 Item2 的 li）

向上遍历示例，例子还是上面那个

// 1. parent()：直接父元素
const $liParent = $("li.active").parent(); // li 的直接父元素是 ul
console.log($liParent.attr("id")); // "list"

// 2. parents()：所有祖先
const $spanParents = $("span").parents(); // span 的所有祖先（li、ul、div、body、html）
console.log($spanParents.length); // 5（视 HTML 结构而定）

// 带筛选：span 的所有 div 祖先
const $spanDivParents = $("span").parents("div");
console.log($spanDivParents.attr("class")); // "container"

// 3. closest()：最近的匹配祖先（常用）
const $closestLi = $("span").closest("li"); // 离 span 最近的 li
console.log($closestLi.text().trim()); // "Item 1 子元素"（第一个 span 的 closest li）

同级遍历（查找兄弟元素）

在同一层级中，查找当前元素的前序或后序兄弟元素

方法	说明	示例
`siblings(selector)`	查找所有兄弟元素（不包含自身），可选 `selector` 筛选。	`$("li.active").siblings()` → active 类 li 的所有兄弟 li（Item1、Item3）
`next(selector)`	查找下一个兄弟元素，可选 `selector` 筛选。	`$("li:first").next()` → 第一个 li 的下一个兄弟（Item2）
`nextAll(selector)`	查找当前元素之后的所有兄弟元素，可选 `selector` 筛选。	`$("li:first").nextAll()` → 第一个 li 之后的所有兄弟（Item2、Item3）
`nextUntil(selector)`	查找当前元素到目标元素之间的所有兄弟（不包含终点）。	`$("li:first").nextUntil("li:last")` → 第一个 li 到最后一个 li 之间的兄弟（Item2）
`prev(selector)`	查找上一个兄弟元素，可选 `selector` 筛选。	`$("li:last").prev()` → 最后一个 li 的上一个兄弟（Item2）
`prevAll(selector)`	查找当前元素之前的所有兄弟元素，可选 `selector` 筛选。	`$("li:last").prevAll()` → 最后一个 li 之前的所有兄弟（Item1、Item2）
`prevUntil(selector)`	查找当前元素到目标元素之间的所有前序兄弟（不包含终点）。	`$("li:last").prevUntil("li:first")` → 最后一个 li 到第一个 li 之间的兄弟（Item2）

// 1. siblings()：所有兄弟
const $activeSiblings = $("li.active").siblings(); // Item2 的兄弟（Item1、Item3）
console.log($activeSiblings.length); // 2

// 带筛选：active 类 li 的兄弟中带 item 类的元素
const $filteredSiblings = $("li.active").siblings(".item");
console.log($filteredSiblings.length); // 2（Item1 和 Item3 都有 item 类）

// 2. next() / prev()：相邻兄弟
const $nextLi = $("li:first").next(); // 第一个 li 的下一个兄弟（Item2）
console.log($nextLi.text().trim()); // "Item 2 孙元素"

const $prevLi = $("li:last").prev(); // 最后一个 li 的上一个兄弟（Item2）
console.log($prevLi.hasClass("active")); // true（Item2 有 active 类）

// 3. nextAll()：之后的所有兄弟
const $nextAll = $("li:first").nextAll(); // Item1 之后的所有兄弟（Item2、Item3）
console.log($nextAll.length); // 2

筛选遍历（从匹配集中筛选元素）

对已选中的元素集合进行二次筛选，缩小范围。

方法	说明	示例
`first()`	选取集合中的第一个元素。	`$("li").first()` → 第一个 li（Item1）
`last()`	选取集合中的最后一个元素。	`$("li").last()` → 最后一个 li（Item3）
`eq(index)`	选取集合中索引为 index 的元素（从 0 开始）。	`$("li").eq(1)` → 索引为 1 的 li（Item2）
`filter(selector)`	筛选出符合 selector 条件的元素（或通过函数返回 true 的元素）。	`$("li").filter(".active")` → 类为 active 的 li（Item2）
`not(selector)`	筛选出不符合 selector 条件的元素（与 filter 相反）。	`$("li").not(".active")` → 不含 active 类的 li（Item1、Item3）
`slice(start, end)`	选取集合中从 start 到 end（不包含 end）的元素（支持负索引）。	`$("li").slice(0, 2)` → 索引 0 到 1 的 li（Item1、Item2）

遍历也支持链式调用

jQuery 遍历方法返回的是新的 jQuery 对象，因此可以链式调用，快速实现复杂的查找逻辑。

// 需求：找到 ul 中，类为 active 的 li 的下一个兄弟元素中的 span
const $targetSpan = $("#list")
  .children("li.active") // 找 ul 的直接子元素中 active 的 li
  .next() // 找该 li 的下一个兄弟
  .find("span"); // 在兄弟中找 span

console.log($targetSpan.length); // 0（Item2 的下一个兄弟是 Item3，Item3 中没有 span）

jQuery Ajax

jQuery 封装了原生 XMLHttpRequest，提供了简洁的 Ajax 方法用于异步请求数据，支持 GET、POST 等请求方式，以及请求前 / 后的回调处理。

说实话，jQuery Ajax 现在没啥人用了， fetch API 或 axios 太王朝了

jQuery Ajax 核心方法：`$.ajax()`

$.ajax() 是最基础、最灵活的 Ajax 方法，几乎能配置所有请求参数。语法结构：

$.ajax({
  url: "请求地址",    // 必需，接口 URL（如 context7 下的 "/api/data"）
  type: "请求方式",   // 可选，默认 "GET"，常用 "POST"、"PUT"、"DELETE"
  data: "请求数据",   // 可选，发送到服务器的数据（对象或字符串）
  dataType: "预期响应格式", // 可选，指定服务器返回数据的格式（如 "json"、"html"）
  contentType: "请求头类型", // 可选，默认 "application/x-www-form-urlencoded"
  beforeSend: function(xhr) {}, // 可选，请求发送前执行（如设置请求头）
  success: function(response) {}, // 可选，请求成功时执行（response 为服务器返回数据）
  error: function(xhr, status, error) {}, // 可选，请求失败时执行
  complete: function(xhr, status) {} // 可选，请求完成后执行（无论成功/失败）
});

参数名	说明	示例（基于 context7 接口）
`url`	接口地址（相对路径或绝对路径，需与当前页面同源，或后端配置跨域）	`"/context7/api/user"` 或 `"https://api.context7.com/data"`
`type`	请求方法（HTTP 动词），大小写不敏感	`"GET"`（默认）、`"POST"`、`"PUT"`、`"DELETE"`
`data`	发送的数据：- GET 请求：自动拼接为 URL 参数（`?key=value`）- POST 请求：作为请求体发送	`{ id: 1, name: "张三" }` 或 `"id=1&name=张三"`
`dataType`	预期服务器返回的数据格式，jQuery 会自动解析：- `"json"`：解析为 JSON 对象- `"html"`：作为字符串返回- `"text"`：纯文本	`"json"`（最常用，后端返回 JSON 时）
`contentType`	请求体的 MIME 类型：- 默认 `application/x-www-form-urlencoded`（表单格式）- 发送 JSON 时用 `application/json`	`contentType: "application/json"`
`success`	成功回调函数，参数为解析后的响应数据	`success: function(res) { console.log(res.data); }`
`error`	失败回调函数，参数：- `xhr`：XMLHttpRequest 对象- `status`：错误类型（如 “error”）- `error`：错误信息	`error: function(xhr) { console.log(xhr.status); }`

假设 ergoutreegal 有一个获取用户列表的接口 "/api/users"，返回 JSON 数据：

// 发送 GET 请求获取用户列表
$.ajax({
  url: "/ergoutreegal/api/users", // context7 下的接口地址
  type: "GET",
  dataType: "json", // 预期返回 JSON
  data: { page: 1, size: 10 }, // 传递分页参数（自动拼接到 URL：?page=1&size=10）
  success: function(response) {
    // 假设后端返回 { code: 200, data: [用户1, 用户2...], msg: "success" }
    if (response.code === 200) {
      console.log("用户列表：", response.data);
      renderUsers(response.data); // 渲染用户列表到页面
    } else {
      alert("获取失败：" + response.msg);
    }
  },
  error: function(xhr) {
    console.log("请求失败，状态码：", xhr.status); // 如 404（接口不存在）、500（服务器错误）
  }
});

假设我们需要向 ergoutreegal的 "/api/user" 接口提交用户信息

// 准备提交的数据
const userData = {
  name: "李四",
  age: 25,
  email: "lisi@context7.com"
};

// 发送 POST 请求
$.ajax({
  url: "/context7/api/user",
  type: "POST",
  dataType: "json",
  contentType: "application/json", // 告诉后端请求体是 JSON 格式
  data: JSON.stringify(userData), // 将对象转为 JSON 字符串（必须）
  success: function(response) {
    if (response.code === 200) {
      alert("新增成功，用户ID：" + response.data.id);
    } else {
      alert("新增失败：" + response.msg);
    }
  },
  error: function() {
    alert("网络错误，请重试");
  }
});

POST 发送 JSON 数据时，需设置 contentType: "application/json"，并通过 JSON.stringify() 转换数据格式；若发送表单数据（默认格式），可直接传对象 data: userData，无需转换。

可通过 xhr.abort() 中断请求（如用户点击取消按钮）：

const xhr = $.ajax({ url: "/api/data", success: function() {} });
// 中断请求
$("#cancelBtn").click(function() {
  xhr.abort();
});

简化的 Ajax 方法

jQuery 基于 $.ajax() 封装了几个常用快捷方法，减少配置代码

`$.get(url, [data], [success], [dataType])`

快速发送 GET 请求：

// 语法：$.get(接口地址, 参数, 成功回调, 数据类型)
$.get(
  "/context7/api/users",
  { page: 1, size: 10 }, // 请求参数
  function(response) { // 成功回调
    console.log("GET 成功：", response);
  },
  "json" // 预期数据类型
);

`$.post(url, [data], [success], [dataType])`

快速发送 POST 请求：

// 语法：$.post(接口地址, 参数, 成功回调, 数据类型)
$.post(
  "/context7/api/user",
  JSON.stringify(userData), // 数据（JSON 字符串）
  function(response) {
    console.log("POST 成功：", response);
  },
  "json"
).fail(function() { // 链式调用失败处理（等价于 error 回调）
  alert("请求失败");
});

POST 发送 JSON 时，必须用 JSON.stringify() 转换数据，并设置 contentType: "application/json"。
若后端返回 JSON 格式错误（如语法错误），dataType: "json" 会导致 error 回调触发。

`$.getJSON(url, [data], [success])`

专门用于获取 JSON 数据的 GET 请求（等价于 $.get(..., "json")）：

// 直接获取 JSON 数据，无需指定 dataType
$.getJSON("/context7/api/config", function(config) {
  console.log("配置信息：", config);
});

全局 Ajax 事件（监听所有请求）

通过 $(document).on() 绑定全局事件，可统一处理所有 Ajax 请求的状态（如加载中显示动画）：

全局事件名	说明
`ajaxStart`	当第一个 Ajax 请求开始时触发（可显示加载动画）
`ajaxStop`	当所有 Ajax 请求完成时触发（可隐藏加载动画）
`ajaxSuccess`	任何一个 Ajax 请求成功时触发
`ajaxError`	任何一个 Ajax 请求失败时触发

全局加载动画示例

// 显示加载动画
$(document).on("ajaxStart", function() {
  $("#loading").show(); // 假设 #loading 是加载动画元素
});

// 隐藏加载动画
$(document).on("ajaxStop", function() {
  $("#loading").hide();
});

// 所有请求成功时的统一处理
$(document).on("ajaxSuccess", function(event, xhr, options, response) {
  console.log("请求成功：", options.url, response);
});

跨域请求（CORS）

若请求的接口与当前页面不同源（协议、域名、端口不同），需后端配置 CORS（跨域资源共享）。jQuery 中无需额外配置，只需确保后端响应头包含：

1	Access-Control-Allow-Origin: * // 允许所有域名访问（生产环境需指定具体域名）

示例：请求跨域的 context7 接口

1
2
3

$.get("https://api.context7.com/cross/data", function(data) {
  console.log("跨域数据：", data);
});