jQuery

[TOC]

索引

~~构造方法~~：

jQuery()：(多态)，工厂函数，是 jQuery 库的基石，几乎所有 jQuery 功能都始于对这个函数的调用。

~~静态方法~~：

$.ready()：(handler)，jQuery 中用来指定一个在 DOM 文档对象模型完全加载并解析后执行的函数。无需等待所有图像、视频等外部资源完全加载。
$.noConflict()：(removeAll?)，用于放弃 jQuery 对 $ 变量的控制权，并将其归还给先前拥有的库。用于解决和第三方库之间 $和jQuery变量的命名冲突。
$.ajax()：(url?, settings?)，用于执行异步 HTTP 请求（Ajax）的底层接口。所有其他 jQuery Ajax 方法在内部都是调用此方法。
$.isArray()：(obj)，工具方法，用于确定传入的参数是否是一个真正的 JS 数组对象。
$.map()：(array, fn)，遍历方法，用于将一个数组或类数组对象中的每个元素通过一个处理函数进行转换，并返回一个包含所有转换后结果的新数组。
$.trim()：(str)，工具方法，用于移除字符串开头和结尾的所有空白字符。
jQuery.each()：(collection, callback)，遍历方法，用于遍历任何集合，无论是数组、类数组对象还是普通对象。是一种通用遍历方法。

方法：

过滤器：

$els.eq()：(index|indexFromEnd)，过滤器，用于从当前匹配的元素集合中根据索引筛选出指定位置的元素，并将其封装为一个新的 jQuery 对象。
$els.first()：()，等价：.eq(0)，过滤器，用于从当前匹配的元素集合中筛选出第一个元素，并将其封装为一个新的 jQuery 对象。
$els.last()：()，等价：.eq(-1)，过滤器，用于从当前匹配的元素集合中筛选出最后一个元素，并将其封装为一个新的 jQuery 对象。
$els.not()：(selector)，过滤器，用于从当前匹配的元素集合中筛选出不符合指定条件的元素，返回一个新的 jQuery 对象。
$els.filter()：(selector)，过滤器，用于从当前匹配的元素集合中筛选出符合指定条件的元素，返回一个新的 jQuery 对象。
$els.find()：(selector)，遍历方法，用于在当前匹配元素集合的后代元素中查找与指定选择器匹配的元素。
$els.is()：(selector)，过滤器，用于检查当前匹配的元素集合中是否有至少一个元素与指定的选择器、元素、jQuery 对象或判断函数相匹配。
$els.odd()：()，过滤器，用于从当前匹配的元素集合中筛选出索引值为奇数的元素。是 .filter() 方法的一个便捷替代。
$els.even()：()，过滤器，用于从当前匹配的元素集合中筛选出索引值为偶数的元素。是 .filter() 方法的一个便捷替代。

文本操作：

$els.text()：()，文本操作，用于获取或设置匹配元素的文本内容。
$els.html()：()，文本操作，用于获取或设置匹配元素的 HTML 内容。
$els.val()：()，文本操作，用于获取或设置表单元素的值。

属性操作：

类名操作:
$els.addClass()：(className|fn)，类名操作，用于向匹配元素集合中的每个元素添加一个或多个 CSS 类。
$els.hasClass()：(className)，类名操作，只读，用于检查匹配元素集合中的任何一个元素是否包含指定 CSS 类。
$els.removeClass()：(className?|fn)，类名操作，用于从匹配元素集合中的每个元素移除一个或多个 CSS 类。
$els.toggleClass()：(className|fn,state?,switch?)，类名操作，用于动态操作 CSS 类的重要方法，允许在元素上切换（添加或移除）一个或多个 CSS 类。
属性操作：
$els.attr()：(attributeName|attributes,value?)，HTML 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。
$els.removeAttr()：(attributeName)，HTML 属性操作，用于从匹配元素集合中的每个元素移除一个或多个指定的 HTML 属性。
$els.prop()：(propertyName|properties, value?)，DOM 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。
$els.removeProp()：(propertyName)，DOM 属性操作，用于从匹配元素集合中的每个元素移除通过 .prop() 方法设置的 DOM 属性。
$els.data()：(obj|key,value)，数据属性，用于在匹配的元素上存储或检索数据的方法。
$els.removeData()：(name|names)，数据属性，用于移除通过 .data() 方法存储在元素上的数据。

CSS 操作：

$els.css()：(propertyName|properties,value?)，样式操作，用于获取或设置一个或多个 CSS 属性值。
$els.width()：(value?)，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域宽度（不包含内边距、边框和外边距）。
$els.height()：(value?)，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域高度（不包含内边距、边框和外边距）。
$els.innerWidth()：(value?)，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域宽度加上内边距的宽度（不包含边框和外边距）。
$els.innerHeight()：(value?)，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域高度加上内边距的高度（不包含边框和外边距）。
$els.outerWidth()：(includeMargin?|value)，元素尺寸，用于获取匹配元素集合中第一个元素的内容宽度加上内边距和边框的宽度。通过可选参数，还可以包含外边距。
$els.outerHeight()：(includeMargin?|value)，元素尺寸，用于获取匹配元素集合中第一个元素的内容高度加上内边距和边框的高度。通过可选参数，还可以包含外边距。
$els.offset()：(coordinates?|fn?)，元素位置，用于获取或设置匹配元素集合中第一个元素相对于文档（document）的当前坐标。
$els.position()：()，元素位置，只读，用于获取匹配元素集合中第一个元素相对于偏移父元素（offset parent）的当前坐标。
$els.scrollTop()：(value?)，元素位置，用于获取或设置匹配元素集合中第一个元素的垂直滚动条位置。

DOM 操作：

插入：
$els.append()：(content|fn,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部末尾插入指定的内容。
$els.prepend()：(content|fn,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部开头插入指定的内容。
$els.after()：(content|fn,...content?)，DOM 插入，用于在匹配元素集合中的每个元素后面插入指定的内容。
$els.before()：(content|fn,...content?)，DOM 插入，用于在匹配元素集合中的每个元素前面插入指定的内容。
$els.appendTo()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的内部末尾。
$els.prependTo()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的内部开头。
$els.insertAfter()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的后面。
$els.insertBefore()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的前面。
移除：
$els.remove()：(selector?)，DOM 移除，用于从 DOM 中移除匹配元素集合中的所有元素，包括这些元素上的所有事件处理程序和 jQuery 数据。
$els.empty()：()，DOM 移除，用于移除匹配元素集合中每个元素的所有子节点（包括文本节点和元素节点），但保留元素本身。
替换：
$els.replaceAll()：(target)，DOM 替换，使用当前选中的元素来替换所有指定的目标元素。
$els.replaceWith()：(newContent|fn)，DOM 替换，用指定的内容替换匹配的元素集合中的每个元素。返回被移除的元素集合。
克隆：
$els.clone()：(withDataAndEvents?, deepWithDataAndEvents?)，DOM 克隆，用于创建匹配元素集合的深度副本（包括所有后代元素和文本节点）。

事件处理：

$els.on()：(events|eventsMap,selector?,data?,handler)，事件处理，用于将一个或多个事件处理函数绑定到匹配的元素上。提供了统一的事件绑定接口。
$els.off()：(events?|eventsMap?,selector?,handler?)，事件处理，用于移除一个或多个通过 .on() 方法附加的事件处理程序。
$els.trigger()：(eventType, extraParameters?)，事件处理，用于手动触发元素上绑定的事件处理程序。不会模拟浏览器默认行为。
$els.click()：(eventData?, handler?)，事件处理，用于绑定点击事件处理程序和触发元素的点击事件。
$els.hover()：(handlerInOut|handlerIn, handlerOut?)，事件处理，用于处理鼠标悬停事件的便捷方法，可同时处理 mouseenter 和 mouseleave 事件。
$els.mouseenter()：(eventData?, handler?)，事件处理，不会冒泡，用于处理鼠标进入事件。
$els.mouseleave()：(eventData?, handler?)，事件处理，不会冒泡，用于处理鼠标离开事件。
$els.keydown()：(eventData?, handler?)，事件处理，用于处理键盘按键按下事件。

动画：

$els.animate()：()，动画，通过平滑地改变元素的 CSS 属性值来创建自定义动画效果。
$els.hide()：(options|duration,easing?,complete?)，动画，用于隐藏匹配的元素集合。
$els.show()：(options|duration,easing?,complete?)，动画，用于显示匹配的元素集合。
$els.toggle()：(showOrHide|options|duration,easing?,complete?)，动画，用于切换元素的可见性。
$els.fadeIn()：(options|duration,easing?,complete?)，动画，用于创建淡入动画效果的方法，通过平滑地增加元素的不透明度来显示匹配的元素。
$els.fadeOut()：()，动画，用于创建淡出动画效果的方法。通过逐渐改变匹配元素的不透明度来实现。
$els.fadeToggle()：()，动画，通过动态调整元素的不透明度来切换元素的显示状态。
$els.fadeTo()：()，动画，用于将匹配元素的不透明度逐渐调整到一个指定的目标值。
$els.queue()：(queueName?, newQueue|callback)，动画队列，用于获取或设置附加在元素上的动画队列。
$els.stop()：(queue?,clearQueue?,jumpToEnd?)，动画队列，用于立即停止当前正在匹配元素上运行的动画，并可选择性的清空队列或跳转到结束状态。
$els.delay()：(duration, queueName?)，动画队列，用于在动画队列中设置一个定时器，延迟后续队列项目的执行。
$els.dequeue()：(queueName?)，动画队列，用于手动执行匹配元素队列中的下一个函数。常用于手动执行自定义队列。
$els.clearQueue()：(queueName?)，动画队列，用于移除匹配元素队列中所有尚未执行的函数，但不会停止当前正在执行的函数。

链式调用：

$els.addBack()：(selector?)，链式调用，用于将堆栈中的前一个元素集合添加到当前集合中，创建一个新的组合元素集合。
$els.end()：()，链式调用，用于结束当前链中最近的一次过滤操作，并将匹配元素集合还原为之前的状态。

其他：

$els.get()：(index?)，工具方法，用于从 jQuery 对象中获取底层的 DOM 元素。可以将 jQuery 对象转换回原生 DOM 元素。
$els.toArray()：()，工具方法，用于将匹配元素集合中的所有 DOM 元素转换为一个纯 JS 数组。
$els.each()：(callback)，遍历方法，用于遍历一个 jQuery 对象中的所有 DOM 元素，并对每个元素执行一个指定的回调函数。

jQuery

构造方法

jQuery()@

jQuery()：(多态)，工厂函数，是 jQuery 库的基石，几乎所有 jQuery 功能都始于对这个函数的调用。

jQuery()：(selector, context?)，用于选择 DOM 元素。
- selector：string，包含 CSS 选择器的字符串，用于查找匹配的 DOM 元素。
- context?：DOM|Document|jQuery，默认：document，搜索的上下文（起点）。
  js
```
// 1. 在整个文档中选择所有 <p> 元素
$('p');

// 2. 在 #container 元素内选择所有 .item 元素
$('.item', '#container');
// 等价于：
$('#container').find('.item');
```
  1
  2
  3
  4
  5
  6
  7
jQuery()：(html, ownerDocument?)，用于创建新的 DOM 元素。
- html：string，一个描述单个独立元素的 HTML 字符串（例如，<div>、<span>等）。
  关键点：如果 HTML 字符串的开头有空格，它会被解释为选择器；如果没有空格，则被解释为创建新元素。
  - $(' <div>') → 选择元素（注意开头的空格）
  - $('<div>') → 创建元素
  - $('div') → 选择所有现有的 <div> 元素
- ownerDocument?：DOM|Document|jQuery，默认：document，用于创建新元素的文档对象。
  js
```
// 1. 创建一个新的 div 元素
$('<div>');

// 2. 创建一个带有内容和属性的 li 元素
$('<li>', {
  text: 'New List Item',
  class: 'new',
  id: 'list-item-1'
});

// 3. 创建更复杂的嵌套结构
$('<div><p>Hello <strong>World</strong></p></div>');
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
jQuery()：(callback)，当传入一个函数时，该函数会被注册为 DOM 准备就绪后的执行函数。
- callback：()=>void，当 DOM 完全加载并解析后要执行的函数。
  js
```
// 1. 标准写法
$(document).ready(function() {
  // DOM 已就绪，可以安全操作
});

// 2. 简写写法（功能完全相同）
$(function() {
  // DOM 已就绪
});
```
  1
  2
  3
  4
  5
  6
  7
  8
  9

jQuery()：(el | els | obj)，用于将原生 DOM 元素或元素数组包装成一个 jQuery 对象，以便使用 jQuery 的方法。

el：Element，一个原生的 DOM 元素。
els：array，一个包含 DOM 元素的数组（或类数组对象，如 NodeList）。

obj：object，一个普通的 JS 对象（不常用）。

// 1. 包装一个原生 DOM 元素
var nativeElement = document.getElementById('myId');
var $jqueryElement = $(nativeElement); // 现在可以使用 .css(), .hide() 等方法

// 2. 包装一个元素数组
var nativeElements = document.getElementsByTagName('div');
var $jqueryCollection = $(nativeElements); // 将 HTMLCollection 转换为 jQuery 对象

// 3. 包装一个普通对象（不常用，主要用于附加数据等特殊操作）
var myObject = { name: 'John', age: 30 };
$(myObject).on('customEvent', function() { ... });

jQuery()：($el)，当传入一个 jQuery 对象时，会返回该对象的副本。
- $el：jQuery，一个现有的 jQuery 对象。
  js
```
// 创建一个新的、独立的 jQuery 对象
var $original = $('div');
var $copy = $( $original );
```
  1
  2
  3
返回：
$els：jQuery，几乎总是返回一个新的 jQuery 对象。

~~核心特性~~：

多态性：一个函数，多种行为，根据参数类型自适应。
jQuery 对象特性：
1. 链式调用（Chaining）：因为几乎所有 jQuery 方法在执行后都返回一个 jQuery 对象，所以可以将多个操作链接在一起。
  js
```
$('#myElement')
  .css('color', 'red')
  .addClass('highlight')
  .fadeOut(1000)
  .fadeIn(1000);
```
  1
  2
  3
  4
  5
2. 零匹配保护：jQuery 对象是一个包含零个、一个或多个 DOM 元素的集合。即使没有找到匹配的元素，它也会返回一个空的 jQuery 对象（而不是 null 或 undefined），这避免了许多错误。
  js
```
var $nothing = $('.non-existent');
console.log($nothing.length); // 输出: 0
$nothing.css('color', 'red'); // 不会报错，只是静默失败
```
  1
  2
  3
内部工作原理浅析：
当调用 $(selector) 时，jQuery 内部大致会做以下几件事：
1. 分析参数：判断传入参数的类型。
2. 执行对应操作：
  - 如果是选择器字符串，则使用 document.querySelectorAll() 或类似方法查找元素，并将结果存储在内部数组中。
  - 如果是HTML字符串，则使用 document.createElement() 等方法创建新节点。
  - 如果是函数，则将其添加到 DOM 就绪的回调队列中。
3. 返回 jQuery 对象：创建一个新的 jQuery 对象，将其原型指向 jQuery.fn（这样它就能访问所有 jQuery 方法），并将找到或创建的元素存入其中。

~~最佳实践~~：

使用 $ 别名：更简洁，是社区标准。

缓存 jQuery 对象：如果多次使用同一个选择器结果，将其保存在变量中。

var $myElements = $('.my-class'); // 缓存
$myElements.doSomething();
$myElements.doSomethingElse();

理解创建与选择的区别：确保 HTML 字符串没有意外的前导空格。
优先使用 DOMReady 简写：$(function() { ... }) 是 $(document).ready(...) 的推荐替代。
在现代项目中审慎使用：对于新项目，优先考虑使用原生 document.querySelector 和现代框架（如 React, Vue）。jQuery 的选择器引擎在当今已非必需。

静态方法

ready()@

$.ready()：(handler)，jQuery 中用来指定一个在 DOM 文档对象模型完全加载并解析后执行的函数。无需等待所有图像、视频等外部资源完全加载。

handler：function，当 DOM 准备就绪后要执行的函数。
返回：
jq：jQuery，返回一个 jQuery 对象（具体来说是调用 .ready() 的那个 jQuery 对象，即 $(document)）。

语法：

语法一：标准形式：
将原生的 document 对象包装成一个 jQuery 对象。
js
```
$(document).ready(function() {
  // 处理程序代码
});
```
1
2
3
语法二：简写形式（最常用）
将 handler 直接传递给 $() 函数，功能与标准形式完全相同，但更简洁。jQuery 会隐式地将其与 document 关联。
js
```
$(function() {
  // 处理程序代码
});
```
1
2
3

~~核心特性~~：

参数类型详解：

参数 handler 必须是一个 函数（Function）。

可以是一个已定义的函数名（注意是传递函数引用，而不是调用函数）：

function init() {
  console.log("DOM 准备好了！");
}
$(document).ready(init); // 正确：传递函数名 init
// $(document).ready(init()); // 错误：init() 会立即执行，并将返回值传递给 ready()

更常见的是使用一个匿名函数：

$(document).ready(function() {
  console.log("DOM 准备好了！");
  // 这里可以安全地操作 DOM
  $("#myButton").click(function() { ... });
});

使用 ES6 的箭头函数（注意箭头函数没有自己的 this，其 this 值继承自外围作用域）：
js
```
$(document).ready(() => {
  console.log("使用箭头函数");
});
```
1
2
3

对比 window.onload：

特性	`$(document).ready()`	`window.onload` / `onload` 属性
触发时机	DOM 树构建完成之后（HTML 解析完毕，形成 DOM 树）	整个页面完全加载完成之后（包括图片、iframe、样式表等所有外部资源）
执行顺序	更快，用户能更早地看到交互绑定	更慢，会等到所有资源加载完毕
多次使用	可以多次调用，注册的处理程序会按顺序依次执行	只能绑定一个，后赋值的会覆盖前面的
简化写法	`$(function() { ... })`	无

// 假设页面有一个很大的图片
$(document).ready(function() {
  // 会在 HTML 解析完，但大图片还在加载时，就立刻执行
  console.log('DOM Ready - 图片可能还没加载完');
});

$(window).on('load', function() {
  // 会等到所有内容（包括那张大图片）都加载完毕后才执行
  console.log('Window Load - 所有资源已加载完毕');
});

多次使用：
可以在一个页面中多次使用 $(document).ready()。jQuery 会按照它们声明的顺序依次执行所有处理函数。
允许在不同的代码模块或脚本文件中独立地注册自己的就绪函数，而不会互相覆盖。
js
```
// script1.js
$(function() {
  console.log("第一个 ready 函数");
});

// script2.js
$(function() {
  console.log("第二个 ready 函数");
});

// 输出顺序：
// "第一个 ready 函数"
// "第二个 ready 函数"
```
1
2
3
4
5
6
7
8
9
10
11
12
13

放置位置：

虽然你可以将 <script> 标签放在 <head> 中，但最常见的现代最佳实践是将脚本放在 HTML 文档的末尾，</body> 标签之前。

放在 </body> 前的好处：

不会阻塞页面渲染：浏览器会先加载和渲染页面内容，最后再加载和执行脚本，用户体验更好。
保证 DOM 已就绪：当脚本执行时，它之前的 DOM 元素肯定已经解析完成，此时即使不使用 $(document).ready()，你的代码也能安全操作 DOM。但使用它依然是一个好习惯，因为它使代码意图更清晰，并且如果你将来移动了脚本位置，代码也不会出错。

html

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <button id="myBtn">Click Me</button>

    <!-- 将脚本放在 body 最后 -->
    <script src="jquery.js"></script>
    <script>
        // 即使不用 ready()，这里的代码也能安全运行，因为 DOM 元素已在上面定义
        // 但使用 ready() 是更规范的做法
        $(function() {
            $("#myBtn").click(function() {
                alert("Button clicked!");
            });
        });
    </script>
</body>
</html>

~~进阶示例~~：

现代替代方案（原生 JavaScript）：
随着现代浏览器的发展，jQuery 的 ready 功能已经有了非常好的原生替代品。
1. DOMContentLoaded 事件：
  处理函数中的代码与 $(document).ready() 同时执行
  js
```
document.addEventListener('DOMContentLoaded', function() {
  // 这里的代码与 $(document).ready() 同时执行
  console.log('DOM 已就绪！');
});
```
  1
  2
  3
  4
2. defer 属性：
  为 <script> 标签添加 defer 属性，浏览器会异步下载脚本，并在 DOM 解析完成后、DOMContentLoaded 事件触发前按顺序执行它们。
  js
```
<script src="your-script.js" defer></script>
```
  1
  在 your-script.js 中，你可以直接写操作 DOM 的代码，无需任何包装。

noConflict()

$.noConflict()：(removeAll?)，用于放弃 jQuery 对 $ 变量的控制权，并将其归还给先前拥有的库。用于解决和第三方库之间 $和jQuery变量的命名冲突。

removeAll?：boolean，默认：false，用于指示是否同时放弃对 jQuery 变量的控制。
- false：仅放弃 $ 变量的控制权。
- true：同时放弃 $ 和 jQuery 两个变量的控制权（极端情况使用）。
返回：
$jq：jQuery，返回 jQuery 对象本身（即 jQuery 这个函数/对象）。

~~基本示例~~：

基本使用：

var $jq = jQuery.noConflict(); // $jq 现在就是 jQuery 的新简称
$jq(document).ready(function() {
  $jq("button").click(function() { ... });
});

~~核心特性~~：

工作原理与使用场景：
- 为什么会发生冲突？
  许多 JavaScript 库为了代码简洁，都喜欢使用 $ 作为其主要函数或对象的快捷方式。例如：
  - jQuery: $ === jQuery
  - Prototype.js: $ 是 document.getElementById() 的快捷方式
  - MooTools: 同样使用 $
  当你在同一个页面中引入多个这样的库时，最后被引入的库会覆盖 $ 变量的定义，导致先引入的库功能失效。
- $.noConflict() 如何解决？
  jQuery 在设计时就已经考虑到了这个问题。它在初始化时会做一件事：
  1. 将之前 window.$ 的值保存到一个内部变量中（例如 _$）。
  2. 然后将 window.$ 指向自身（jQuery）。
  当调用 jQuery.noConflict() 时，它会：
  1. 将 window.$ 恢复为之前保存的值（即另一个库的 $）。
  2. 返回 jQuery 对象，让你可以用其他变量来引用它。

~~典型使用场景~~：

场景一：将 $ 归还并改用全称 jQuery

这是最简单直接的方法。

html

<!-- 1. 先引入 Prototype.js -->
<script src="prototype.js"></script>
<!-- 2. 后引入 jQuery -->
<script src="jquery.js"></script>

<script>
  // 3. 此时，$ 被 jQuery 占用，Prototype 的 $ 失效
  // 4. 调用 noConflict()，将 $ 的使用权归还给 Prototype
  jQuery.noConflict();

  // 5. 从现在开始，$ 指向 Prototype.js 的功能
  var divs = $('myDiv'); // 使用 Prototype 的 $ 选择元素

  // 6. 使用 jQuery 的全称 ‘jQuery‘ 调用 jQuery 的方法
  jQuery(document).ready(function() {
    jQuery('button').doSomething(); // 使用 jQuery
  });
</script>

场景二：创建自定义别名（最常用、最推荐）

为了避免书写冗长的 jQuery，可以定义一个自定义变量（如 $j, jq）来作为 jQuery 的快捷方式。

html

<script src="prototype.js"></script>
<script src="jquery.js"></script>

<script>
  // 1. 定义 $j 作为 jQuery 的新快捷方式，并立即归还 $
  var $j = jQuery.noConflict();

  // $ 是 Prototype 的
  // $j 是 jQuery 的

  // 3. 使用 $j 作为 jQuery 的快捷方式
  $j(function() { // 相当于 $(document).ready()
    $j('#my-element').hide();
  });
</script>

场景三：在立即执行函数表达式（IIFE）中使用 $

这是现代 jQuery 开发中的最佳实践。它通过创建一个函数作用域来隔离 $ 变量，确保在外部 $ 可能被其他库占用的情况下，在函数内部 $ 仍然安全地指向 jQuery。

这种方式非常适合编写 jQuery 插件或独立的代码模块，无需担心页面环境。

html

<script src="prototype.js"></script>
<script src="jquery.js"></script>

<script>
jQuery.noConflict(); // 1. 先将 $ 控制权归还

// 3. 使用 IIFE 并接收 jQuery 作为参数 $
(function($) {
  // 在这个函数内部，$ 参数毫无疑问地指向 jQuery
  $(document).ready(function() {
    // 所有代码都可以安全地使用 $
    $('p').css('color', 'red');
  });
})(jQuery); // 2. 将 jQuery 对象传入函数

// 4. 在 IIFE 外部，$ 仍然属于其他库
</script>

场景四：极端情况 - 放弃 jQuery 变量本身（极少使用）
如果需要在某种特殊环境下（例如，将 jQuery 嵌入另一个命名空间），可以彻底放弃 jQuery 对全局命名空间的占用。
注意： 这样做会导致所有依赖 window.jQuery 的插件或代码失效，除非像上面一样手动处理，因此请谨慎使用。
html
```
<script>
  var j = jQuery.noConflict(true); // 放弃 $ 和 jQuery

  // 现在，window.$ 和 window.jQuery 都是 undefined
  // j 是访问 jQuery 的唯一方式

  j(document).ready(function() {
    j('div').hide();
  });
</script>
```
1
2
3
4
5
6
7
8
9
10

ajax()@

$.ajax()：(url?, settings?)，用于执行异步 HTTP 请求（Ajax）的底层接口。所有其他 jQuery Ajax 方法在内部都是调用此方法。

$.ajax()：(url, settings?)，传入一个 URL 和配置对象（较少用）。
- url：string，请求发送的目标 URL。
- settings?：object，配置对象。如果提供了 url 参数，则 settings 对象中的 url 属性会被覆盖。
$.ajax()：(settings)，传入一个配置对象（最常用、最强大）。
- settings：object，一个用于配置 Ajax 请求的键值对集合。
  - 核心参数：
  - url：string，默认：window.location，发送请求的地址。
  - type/method：string，默认：GET，请求方式。method 是 jQuery 1.9.0+ 的别名。
  - data：object|string|array，默认：undefined，发送到服务器的数据。
    - 如果是对象，jQuery 会将其转换为查询字符串（对于 GET 请求）或请求体（对于 POST 请求）。
    - 如果是数组或字符串，则直接使用。
  - dataType：text|xml|json|script|html，默认：智能推导，期望服务器返回的数据类型。jQuery 会根据此类型来解析返回的数据。
  - contentType：string，默认：application/x-www-form-urlencoded; charset=UTF-8，发送信息至服务器时内容编码类型。告诉服务器请求体的格式。设置 false 跳过默认设置。
  - headers：object，默认：{}，一个额外的 {键: 值} 对对象，随请求一起发送。常用于设置认证令牌等请求头（如 Authorization: Bearer ...）。
  - timeout：number，默认：0，设置请求超时时间（毫秒）。超过该时间后，请求会自动终止并触发 error 回调。
  - 回调函数：
  - success：(data,textStatus,$xhr)=>void，请求成功后的回调函数。
  - error：($xhr,textStatus,errorThrown)=>void，请求失败时的回调函数。
  - complete：($xhr,textStatus)=>void，请求完成后的回调函数（无论成功或失败都会执行）。
  - beforeSend：($xhr,settins)=>boolean，发送请求之前的回调函数。可用于修改 $xhr 对象或添加自定义头信息。如果此函数返回 false，将取消本次请求。
  - 其他参数：
  - async：boolean，默认：true，是否为异步请求。
    - 默认情况下，所有请求均为异步。
    - 如果需要发送同步请求，请将此选项设置为 false（强烈不推荐，会导致浏览器界面锁定）。
  - cache：boolean，默认：true (对于 dataType 为 'script' 和 'jsonp' 时，为 false)，是否强制浏览器缓存请求页面。
    - 如果设置为 false，它将强制浏览器不缓存请求页面。对于 GET 请求，通过在 URL 后附加时间戳参数实现。
  - context：object，指定所有回调函数（如 success, error）中 this 的指向。
  - crossDomain：boolean，默认：false，是否强制将请求视为跨域请求（即使在同一域下）。服务器重定向到其他域的情况下设为 true。
  - jsonp：string，在一个 JSONP 请求中重写回调函数的名字。
返回：
$xhr：jQuery XMLHttpRequest，返回一个 jQuery XMLHttpRequest（jqXHR）对象。

~~基本示例~~：

基础 GET 请求（获取 JSON 数据）：

// 使用配置对象和回调函数
$.ajax({
  url: '/api/users',
  type: 'GET',
  dataType: 'json',
  success: function(data, textStatus, jqXHR) {
    console.log('请求成功！获取的数据：', data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('请求失败：', textStatus, errorThrown);
  }
});

// 更现代的写法：使用返回的 jqXHR 对象的 Promise 方法（推荐）
$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json'
})
.done(function(data) {
  console.log('请求成功！', data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
  console.error('请求失败：', textStatus, errorThrown);
})
.always(function() {
  console.log('请求已完成（无论成功与否）。');
});

发送 POST 请求（提交表单数据）

var formData = {
  username: 'john_doe',
  email: 'john@example.com'
};

$.ajax({
  url: '/api/submit',
  type: 'POST',
  contentType: 'application/json', // 发送 JSON 数据
  data: JSON.stringify(formData), // 将对象转换为 JSON 字符串
  dataType: 'json' // 期望服务器返回 JSON
})
.done(function(response) {
  console.log('提交成功！', response);
});

~~核心特性~~：

$xhr：
$xhr 对象是浏览器原生 XMLHttpRequest 对象的超集。它最重要的特性是：
1. 实现了 Promise 接口：这意味着你可以使用 .done(), .fail(), .always(), .then(), .catch() 等现代方法来替代 success, error, complete 回调函数。这是当前推荐的使用方式。
2. 提供更多功能：如 .abort() 方法来中止请求。

~~进阶示例~~：

带错误处理和超时设置的请求：

$.ajax({
  url: '/api/slow-data',
  method: 'GET',
  timeout: 5000, // 5秒超时
  dataType: 'json'
})
.done(function(data) {
  // 处理数据
})
.fail(function(jqXHR, textStatus) {
  if (textStatus === 'timeout') {
    alert('请求超时，请重试！');
  } else {
    alert('发生错误：' + textStatus);
  }
});

使用 beforeSend 设置请求头（如 JWT Token）：

var token = 'your_jwt_token_here';

$.ajax({
  url: '/api/protected-data',
  type: 'GET',
  beforeSend: function($xhr) {
    $xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  },
  success: function(data) {
    // ...
  }
});

Promise 链式调用：

// 使用 .then() 进行链式操作
$.ajax({
  url: '/api/getUser',
  method: 'GET'
})
.then(function(userData) {
  // 第一个请求成功，用拿到的数据发起第二个请求
  return $.ajax({
    url: '/api/getPosts/' + userData.id,
    method: 'GET'
  });
})
.then(function(postsData) {
  // 处理第二个请求返回的数据
  console.log('用户的文章：', postsData);
})
.catch(function(error) {
  // 捕获链式中任何一个请求发生的错误
  console.error('操作失败：', error);
});

isArray()

$.isArray()：(obj)，工具方法，用于确定传入的参数是否是一个真正的 JS 数组对象。

obj：any，需要被检测的任意类型的变量、表达式或对象。
返回：
isArray：boolean，返回参数是否是一个数组对象。

~~基本示例~~：

检测基本类型（返回 false）：

$.isArray(123);          // false - 数字
$.isArray("hello");      // false - 字符串
$.isArray(true);         // false - 布尔值
$.isArray({});           // false - 对象
$.isArray(function(){}); // false - 函数
$.isArray(null);         // false - null
$.isArray(undefined);    // false - undefined

检测类数组对象（返回 false）

JS 中有一些对象看起来像数组（有 length 属性，可以用索引访问），但它们不是真正的数组。

// arguments 对象
function test() {
  console.log($.isArray(arguments)); // false
}
test(1, 2, 3);

// DOM 节点列表
var nodeList = document.getElementsByTagName('div');
console.log($.isArray(nodeList)); // false

// 拥有 length 属性的普通对象
var arrayLike = { 0: 'a', 1: 'b', length: 2 };
console.log($.isArray(arrayLike)); // false

检测真正的数组（返回 true）

// 数组字面量
$.isArray([]);           // true
$.isArray([1, 2, 3]);    // true

// 使用 Array 构造函数创建的数组
$.isArray(new Array());    // true
$.isArray(new Array(5));   // true
$.isArray(new Array('a', 'b', 'c')); // true

// 即使是空数组或稀疏数组，也是数组
$.isArray([, ,]);        // true (这是一个稀疏数组，但仍然是一个数组对象)

~~核心特性~~：

为什么需要：
在 ECMAScript 5 (ES5) 标准之前，没有一种完全可靠的方法来检测一个对象是否为数组。常用的 instanceof Array 和 typeof 操作符在某些情况下（例如跨框架或iframe）会失败。jQuery 的 $.isArray() 方法封装了最佳的实现方式，提供了完美的跨浏览器兼容性。
内部实现原理：
1. 优先使用浏览器原生的 Array.isArray() 方法（如果存在的话），因为这是最快、最标准的方法。
2. 如果原生方法不存在（例如在 IE8 等旧浏览器中），它会回退到使用 Object.prototype.toString.call() 方法，这是检测内置类型最可靠的方式。
js
```
jQuery.isArray = function(obj) {
  // 1. 优先使用浏览器原生方法
  if (Array.isArray) {
    return Array.isArray(obj);
  }
  // 2. 降级方案：使用 Object.prototype.toString
  return Object.prototype.toString.call(obj) === "[object Array]";
};
```
1
2
3
4
5
6
7
8

现代替代方案：Array.isArray()

随着现代浏览器对 ES5 标准的全面支持，jQuery 的 $.isArray() 方法现在基本上已被原生 JS 方法 Array.isArray() 所取代。

特性	`$.isArray(obj)`	`Array.isArray(obj)`
来源	jQuery 库	ES5 标准
兼容性	极佳，兼容所有浏览器（包括IE6+）	良好，兼容 IE9+ 及所有现代浏览器
性能	稍慢（需要函数调用和内部判断）	更快（浏览器原生实现）
推荐度	不推荐在新项目中使用	推荐为首选方法

// 现代开发中的正确做法
if (Array.isArray(myVariable)) {
  // 安全地执行数组操作，如 forEach, map, push, pop 等
  myVariable.forEach(function(item) {
    console.log(item);
  });
}

map()

$.map()：(array, fn)，遍历方法，用于将一个数组或类数组对象中的每个元素通过一个处理函数进行转换，并返回一个包含所有转换后结果的新数组。

array：array|Array-Like Object，需要被遍历转换的数组或类数组对象。
fn：(el, index?)=>any|null|undefined，用于处理每个元素的函数。这个函数的返回值会被添加到最终的结果数组中。
- el：any，数组中当前被处理的元素。
- index?：number，当前元素在数组中的索引。
- 返回：
- res：any|null|undefined，回调函数的返回值：
  - 如果返回值是 非 null 且非 undefined，则该值会被添加到结果数组中。
  - 如果返回值是 null 或 undefined，则不会有任何元素被添加到结果数组中。这是 $.map() 的一个强大特性，可以同时实现 “转换” 和 “过滤” 的功能。
返回：
results：array，返回一个新的数组，其中的每个元素都是原数组元素经过回调函数处理后的结果。原始数组不会被修改。

~~基本示例~~：

简单的数值转换（放大两倍）：

var numbers = [1, 2, 3, 4, 5];

var doubled = $.map(numbers, function(value, index) {
  return value * 2;
});

console.log(doubled); // 输出: [2, 4, 6, 8, 10]
console.log(numbers); // 输出: [1, 2, 3, 4, 5] (原数组未改变)

转换和过滤结合（只取偶数）

var numbers = [1, 2, 3, 4, 5, 6];

var evenNumbers = $.map(numbers, function(value) {
  // 如果是偶数，返回它；如果是奇数，返回 null（即过滤掉）
  return (value % 2 === 0) ? value : null;
});

console.log(evenNumbers); // 输出: [2, 4, 6]

处理对象数组（提取特定属性）

var people = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 35 }
];

var names = $.map(people, function(person) {
  return person.name; // 只返回 name 属性
});

console.log(names); // 输出: ["Alice", "Bob", "Charlie"]

~~核心特性~~：

遍历和转换：对原数组的每个元素执行回调函数，并将其返回值组合成一个新数组。
过滤功能：如果回调函数返回 null 或 undefined，则该元素被“过滤掉”，不会出现在新数组中。
处理类数组对象：它可以处理任何拥有 .length 属性和通过索引访问的元素的对象（如 arguments, NodeList, jQuery 对象等），而不仅仅是原生数组。
扁平化处理（历史特性）：在 jQuery 1.5.2 之前，如果回调函数返回一个数组，$.map() 会将该数组“展开”（扁平化）并将其元素逐个推入结果中。从 jQuery 1.6 开始，这个行为被移除了，返回的数组会作为一个整体元素被添加到结果中。这是一个重要的兼容性变化。

对比 $els.map()：

特性	`$.map(array, callback)`	`$(selector).map(callback)`
调用对象	全局工具函数 (`jQuery`/`$` 对象)	jQuery 对象实例的方法
处理目标	通用的数组或类数组对象	当前 jQuery 对象封装的 DOM 元素集合
返回值	标准的 JavaScript 数组	一个新的 jQuery 对象，包含回调返回的非 `null/undefined` 值

var numbers = [1, 2, 3];

// 使用 $.map (返回数组)
var result1 = $.map(numbers, func);
console.log(Array.isArray(result1)); // true

// 使用 .map() on a jQuery object (返回jQuery对象)
// 首先需要将数组包装成jQuery对象，但这并非其典型用法
var $result2 = $(numbers).map(func);
console.log($result2 instanceof jQuery); // true
// 通常用 .get() 将 jQuery 对象转回数组
var result2Array = $result2.get();

对比 arr.map()：

现代 JavaScript 提供了原生 map 方法。

特性	`$.map()`	`Array.prototype.map()`
来源	jQuery 库	ECMAScript 5 (ES5) 标准
过滤能力	有。回调返回 `null/undefined` 会过滤掉该元素。	无。总是返回一个与原数组等长的新数组，`undefined` 也会被保留。
处理目标	数组和类数组对象	主要处理真正的数组。对类数组对象需要先转换（如 `Array.from()`）或使用 `call`（如 `[].map.call(arguments, ...)`）。
兼容性	极佳，兼容旧浏览器 (IE6+)	良好，兼容 IE9+ 及所有现代浏览器

var arr = [1, 2, 3, 4];

// $.map - 可以同时转换和过滤
var jQueryResult = $.map(arr, function(n) {
  return n % 2 === 0 ? n * 10 : null; // 只处理偶数，奇数返回null
});
console.log(jQueryResult); // [20, 40]

// Array.prototype.map - 无法过滤，返回等长数组
var nativeResult = arr.map(function(n) {
  return n % 2 === 0 ? n * 10 : null; // 奇数返回null，但null仍在数组中
});
console.log(nativeResult); // [null, 20, null, 40]
// 需要后续用 .filter() 才能实现同样效果
var nativeResultFiltered = arr.map(...).filter(item => item !== null);

~~进阶示例~~：

处理类数组对象（如 arguments）：

function exampleFunction() {
  // arguments 是一个类数组对象，不是真正的数组
  var argsUpperCase = $.map(arguments, function(arg) {
    return String(arg).toUpperCase();
  });
  console.log(argsUpperCase);
}

exampleFunction('hello', 'world'); // 输出: ["HELLO", "WORLD"]

处理 DOM 元素集合（如 jQuery 获取的元素）：

// 获取所有 <div> 元素的 id 数组
var divIds = $.map($('div'), function(divElement) {
  return divElement.id; // 返回每个 div 的 id
});

console.log(divIds); // 输出: ["header", "content", "footer"] (假设这些id存在)

trim()

$.trim()：(str)，工具方法，用于移除字符串开头和结尾的所有空白字符。

str：string，需要被去除首尾空白的字符串。
返回：
newStr：string，返回一个新的字符串，该字符串是移除了原字符串开头和结尾所有空白字符后的结果。原始字符串不会被修改。

~~基本示例~~：

基本用法：

var stringWithSpaces = "   Hello World!   ";
var trimmedString = $.trim(stringWithSpaces);

console.log(trimmedString);        // 输出: "Hello World!"
console.log(stringWithSpaces);     // 输出: "   Hello World!   " (原字符串未改变)

处理各种空白字符

// 包含制表符(\t)和换行符(\n)
var messyString = "\t \n  Trim me!\n\t ";
console.log($.trim(messyString)); // 输出: "Trim me!"

// 处理非断空格(&nbsp;)
var stringWithNBSP = "\u00A0No-breaking space\u00A0";
console.log($.trim(stringWithNBSP)); // 输出: "No-breaking space"

~~核心特性~~：

什么是“空白字符”：
$.trim() 会移除字符串两端的以下字符（以及它们的组合）：
- 空格 ()
- 制表符 (\t)
- 换行符 (\n)
- 回车符 (\r)
- 换页符 (\f)
- 垂直制表符 (\v)
- 非断空格 (\u00A0) — 这是 $.trim() 相较于一些简单实现的一个优势
- 以及所有其他在正则表达式中被视为空白的字符（Unicode 中的 Zs 类别等）
不处理字符串中间的空白：它只移除开头和结尾的空白，字符串内部的任何空白都会保留。
处理所有空白字符：其实现基于正则表达式，能识别并移除所有类型的空白，而不仅仅是空格。

内部实现原理：

jQuery 的 $.trim() 内部使用一个预编译的正则表达式来匹配字符串开头和结尾的空白字符，然后用空字符串替换它们。

// 类似于 jQuery 内部的实现方式

// \s：匹配任何空白字符（等价于 [ \t\n\r\f\v]）。
// \uFEFF：字节顺序标记（BOM）。
// \xA0：非断空格的十六进制表示。
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
jQuery.trim = function( text ) {
  return text == null ?
    "" : // 处理 null 和 undefined
    ( text + "" ).replace( rtrim, "" ); // 强制转为字符串后执行替换
};

现代替代方案：jQuery 的 $.trim() 方法现在基本上已被原生 JS 方法 String.prototype.trim() 所取代。

var str = "   hello   ";

// jQuery 方式 (已过时)
var resultOld = $.trim(str);

// 现代原生方式 (推荐)
var resultNew = str.trim();

console.log(resultOld, resultNew); // 两者都输出 "hello"

~~进阶示例~~：

不会处理中间的空白：

var internalSpaces = "   This  has  internal  spaces.   ";
console.log($.trim(internalSpaces)); // 输出: "This  has  internal  spaces."
// 注意：单词之间的多个空格被保留了

处理非字符串输入（类型转换）$.trim() 在处理非字符串参数时，会先将其转换为字符串。

console.log($.trim(123));         // 输出: "123" (数字被转为字符串后修剪)
console.log($.trim(null));        // 输出: "null" (null被转为字符串"null")
console.log($.trim(undefined));   // 输出: "undefined"
console.log($.trim({}));          // 输出: "[object Object]" (对象被转为字符串后修剪)

// 空字符串和纯空白字符串
console.log($.trim(""));          // 输出: ""
console.log($.trim("   "));       // 输出: ""

实际应用 - 表单验证 这是 $.trim() 最经典的用途，确保用户无意中输入的首尾空格不会影响数据有效性。

// 假设我们从输入框获取值
var username = "  admin  ";

// 没有修剪的比较
if (username === "admin") {
  console.log("Match without trim"); // 这不会执行
}

// 修剪后的比较
if ($.trim(username) === "admin") {
  console.log("Match with trim!"); // 这会执行
}

each()

jQuery.each()：(collection, callback)，遍历方法，用于遍历任何集合，无论是数组、类数组对象还是普通对象。是一种通用遍历方法。

collection：array|object|ArrayLike，要迭代的集合。可以是数组、类数组对象或普通对象。
callback：(index,value)=>void|false，为每个元素执行的回调函数。
- index/key：number|string|Symbol，当前迭代的索引（对于数组）或键（对于对象）。
- value：any，当前迭代的值。
- 回调函数可以返回 false 来提前终止循环（类似于使用 break 语句）。
返回：
$collection：array|object|ArrayLike，返回被遍历的集合，支持了链式调用。

示例：

遍历数组：

var arr = ["apple", "banana", "cherry"];

$.each(arr, function(index, value) {
  console.log(index + ": " + value);
});

// 输出:
// 0: apple
// 1: banana
// 2: cherry

遍历对象：

var obj = {
  name: "John",
  age: 30,
  city: "New York"
};

$.each(obj, function(key, value) {
  console.log(key + ": " + value);
});

// 输出:
// name: John
// age: 30
// city: New York

提前终止循环：

var numbers = [1, 2, 3, 4, 5];

$.each(numbers, function(index, value) {
  console.log(value);
  if (value === 3) {
    return false; // 相当于 break
  }
});

// 输出:
// 1
// 2
// 3

处理 DOM 元素集合

// 遍历所有段落元素并添加类名
$.each($("p"), function(index, element) {
  $(element).addClass("paragraph-" + index);
});

~~核心特性~~：

对比 .each()：

特性	`$('selector').each()`	`$.each(collection, callback)`
调用方式	实例方法	静态方法
调用对象	jQuery 对象（DOM 元素集合）	任何数组或类数组对象、普通对象
回调参数	`index, element`	`index, value` 或 `key, value`
内部 `this`	当前原生 DOM 元素	当前迭代的值（value）
主要用途	遍历和操作 DOM 元素	遍历数组或对象的数据

// $.each() 遍历数组
var myArray = ['a', 'b', 'c'];
$.each(myArray, function(index, value) {
  console.log('索引：' + index + ', 值：' + value);
});

// $.each() 遍历对象
var myObject = { name: 'John', age: 30, city: 'New York' };
$.each(myObject, function(key, value) {
  console.log('属性：' + key + ', 值：' + value);
});

~~注意事项~~：

回调函数中的 this:
在 jQuery.each() 的回调函数中，this 关键字指向当前迭代的值（与第二个参数相同）。
性能考虑:
对于大型数组，原生 JavaScript 方法（如 for 循环）可能性能更好。但在大多数情况下，差异可以忽略不计。
不可迭代对象:
如果尝试遍历不可迭代的对象（如数字或字符串），jQuery 会静默失败而不抛出错误。
修改集合:
在迭代过程中修改集合（添加或删除元素）可能会导致意外行为，应避免这样做。

方法

过滤器

eq()

$els.eq()：(index|indexFromEnd)，过滤器，用于从当前匹配的元素集合中根据索引筛选出指定位置的元素，并将其封装为一个新的 jQuery 对象。

index：number，一个从 0 开始计数的整数，指示要选择的元素的位置。
indexFromEnd：number，一个从 -1 开始计数的负整数，指示从集合末尾开始计算的位置。
返回：
$els：jQuery，返回一个新的 jQuery 对象，原始 jQuery 对象不会被修改。
- 如果索引有效：jQuery 对象包含原始集合中位于指定索引位置上的单个元素。
- 如果提供的索引值超出范围（例如，集合只有 5 个元素，却使用了 .eq(10) 或 .eq(-10)），该方法会返回一个空的 jQuery 对象（length 为 0），而不会抛出错误。

~~基本示例~~：

假设我们有以下的 HTML 结构：

html

<ul>
  <li>List item 0</li>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

使用正数索引（从 0 开始）：

// 获取所有 <li> 元素
var $allListItems = $('li');
console.log($allListItems.length); // 输出: 5

// 选择第一个 li (索引 0)
var $firstItem = $allListItems.eq(0);
$firstItem.css('color', 'red'); // 将第一个列表项的文字变为红色

// 选择第三个 li (索引 2)
var $thirdItem = $allListItems.eq(2);
$thirdItem.css('font-weight', 'bold'); // 将第三个列表项加粗

// 因为 .eq() 返回 jQuery 对象，所以可以链式调用
$allListItems.eq(1).css('text-decoration', 'underline'); // 给第二个列表项加下划线

// 尝试超出范围的索引
var $nonexistent = $allListItems.eq(10);
console.log($nonexistent.length); // 输出: 0 (空的jQuery对象)
// $nonexistent.css(...) 不会做任何事，也不会报错

使用负数索引（从末尾计数）

// 选择最后一个 li (索引 -1)
$('li').eq(-1).css('background-color', 'yellow');

// 选择倒数第二个 li (索引 -2)
$('li').eq(-2).css('border', '1px solid blue');

~~核心特性~~：

减少匹配集合的大小：
.eq() 的核心目的是缩小集合，而不是获取原始 DOM 元素。

对比 :eq 选择器：

重要提示： jQuery 已废弃（deprecate） 了像 :eq(), :first, :last 这样的位置选择器，建议使用 .eq(), .first(), .last() 等方法来替代，因为后者性能更优且更符合现代编程思维。

特性	`.eq( index )`	`$('selector:eq(n)')`
性质	jQuery 对象的方法	jQuery 选择器表达式的一部分
性能	通常更好。先获取集合，再用 `.eq()` 筛选。	稍差。将索引判断直接交给 Sizzle 选择器引擎处理。
灵活性	更高。可以在已经过滤的集合上再次进行筛选。	较低。只能在初始选择时使用。
推荐度	推荐	不推荐（已废弃）

// :eq() 选择器 - 一次性选择
$('li:eq(2)').css('color', 'green');

// .eq() 方法 - 先选择，后过滤（更清晰，更灵活）
$('li').eq(2).css('color', 'green');

// .eq() 的灵活性示例：先找有特定类的li，再取第一个
$('li').filter('.important').eq(0).css('color', 'red');

// 用选择器实现上述逻辑会更复杂且低效：
$('li.important:eq(0)').css('color', 'red');

~~进阶示例~~：

在事件处理中动态确定索引：

.eq() 经常在事件处理程序中使用，用于找出当前操作的元素在集合中的位置。

// 为所有按钮绑定点击事件
$('button').on('click', function() {
  // 1. 找出当前点击的按钮在所有按钮集合中的索引
  var index = $('button').index(this);
  
  // 2. 根据该索引操作另一个对应的元素（例如一个div）
  $('div').eq(index).toggle(); // 显示/隐藏对应的div
});

first()

$els.first()：()，等价：.eq(0)，过滤器，用于从当前匹配的元素集合中筛选出第一个元素，并将其封装为一个新的 jQuery 对象。

返回：
$els：jQuery，返回一个新的 jQuery 对象，原始 jQuery 对象不会被修改。
- 如果原始集合不为空：它包含原始集合中的第一个元素。
- 如果原始集合为空（$els.length === 0）：返回的也是一个空的 jQuery 对象。

~~基本示例~~：

基本用法：

假设我们有以下的 HTML 结构：

html

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<div class="content">First div</div>
<div class="content">Second div</div>

// 获取所有 <li> 元素并选择第一个
$('li').first().css('color', 'red'); // 只有 "List item 1" 会变红

// 获取所有 .content div 并选择第一个
$('div.content').first().css('font-weight', 'bold'); // 只有 "First div" 会加粗

// 因为 .first() 返回 jQuery 对象，所以可以链式调用
$('li').first().addClass('first-item').fadeOut(1000).fadeIn(1000);

~~核心特性~~：

核心功能：获取集合中的第一个元素：
.first() 的唯一目的就是从当前集合中获取第一个元素，其功能等价于 .eq(0)，但语法更简洁、意图更明确。

对比 :first 选择器：

特性	`.first()`	`$('selector:first')`
性质	jQuery 对象的方法	jQuery 选择器表达式的一部分
性能	通常更好。先获取集合，再用 `.first()` 筛选。	稍差。将“第一个”的判断直接交给 Sizzle 选择器引擎处理。
灵活性	更高。可以在已经过滤的集合上再次进行筛选。	较低。只能在初始选择时使用。
推荐度	推荐	不推荐（已废弃）

// :first 选择器 - 一次性选择（已废弃，不推荐）
$('li:first').css('color', 'green');

// .first() 方法 - 先选择，后过滤（推荐方式）
$('li').first().css('color', 'green');

// .first() 灵活性的完美体现：先找有特定类的li，再取其中第一个
$('li').filter('.important').first().css('color', 'red');
// 用选择器实现上述逻辑几乎不可能，或者非常低效

~~进阶示例~~：

处理空集合：

.first() 在处理空集合时是安全的，不会抛出错误。

// 尝试从一个空集合中获取第一个元素
var $emptyCollection = $('.non-existent-class');
var $firstElement = $emptyCollection.first();

console.log($emptyCollection.length); // 输出: 0
console.log($firstElement.length);    // 输出: 0 (也是一个空集合)

// 下面的操作不会产生任何效果，也不会报错
$firstElement.css('color', 'red');

与 .last() 对比使用：

// 高亮列表中的第一项和最后一项
$('li').first().css('background-color', '#ffffee'); // 浅黄色背景给第一个
$('li').last().css('background-color', '#efffef');  // 浅绿色背景给最后一个

与 .eq(0) 对比使用：

这两个方法在功能上完全等价，但表达意图不同。

// 这两种写法效果完全相同
$('li').first().css('color', 'red');
$('li').eq(0).css('color', 'red'); // .first() 是这种写法的语法糖

last()

$els.last()：()，等价：.eq(-1)，过滤器，用于从当前匹配的元素集合中筛选出最后一个元素，并将其封装为一个新的 jQuery 对象。

返回：
$els：jQuery，返回一个新的 jQuery 对象，原始 jQuery 对象不会被修改。
- 如果原始集合不为空：它包含原始集合中的最后一个元素。
- 如果原始集合为空（$els.length === 0）：返回的也是一个空的 jQuery 对象。

~~基本示例~~：

基本用法：

假设我们有以下的 HTML 结构：

html

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<div class="content">First div</div>
<div class="content">Second div</div>
<div class="content">Third div</div>

// 获取所有 <li> 元素并选择最后一个
$('li').last().css('color', 'blue'); // 只有 "List item 3" 会变蓝

// 获取所有 .content div 并选择最后一个
$('div.content').last().css('font-style', 'italic'); // 只有 "Third div" 会变为斜体

// 链式调用示例
$('li').last().addClass('last-item').slideUp(1000).slideDown(1000);

~~核心特性~~：

核心功能：获取集合中的最后一个元素：
.last() 的唯一目的就是从当前集合中获取最后一个元素，其功能等价于 .eq(-1)，但语法更简洁、意图更明确。

对比 :last 选择器：

特性	`.last()`	`$('selector:last')`
性质	jQuery 对象的方法	jQuery 选择器表达式的一部分
性能	通常更好。先获取集合，再用 `.last()` 筛选。	稍差。将“最后一个”的判断直接交给 Sizzle 选择器引擎处理。
灵活性	更高。可以在已经过滤的集合上再次进行筛选。	较低。只能在初始选择时使用。
推荐度	推荐	不推荐（已废弃）

// :last 选择器 - 一次性选择（已废弃，不推荐）
$('li:last').css('color', 'green');

// .last() 方法 - 先选择，后过滤（推荐方式）
$('li').last().css('color', 'green');

// .last() 灵活性的完美体现：先找有特定类的li，再取其中最后一个
$('li').filter('.important').last().css('color', 'red');
// 用选择器实现上述逻辑几乎不可能，或者非常低效

~~进阶示例~~：

处理空集合：

.last() 在处理空集合时是安全的，不会抛出错误。

// 尝试从一个空集合中获取最后一个元素
var $emptyCollection = $('.non-existent-class');
var $lastElement = $emptyCollection.last();

console.log($emptyCollection.length); // 输出: 0
console.log($lastElement.length);     // 输出: 0 (也是一个空集合)

// 下面的操作不会产生任何效果，也不会报错
$lastElement.css('color', 'blue');

与 .first() 配合使用：

一个常见的模式是同时操作集合的第一个和最后一个元素。

$els.addBack()：(selector?)，链式调用，用于将堆栈中的前一个元素集合添加到当前集合中，创建一个新的组合元素集合。

// 为列表的第一项和最后一项添加特殊样式
$('li').first().addClass('list-boundary');
$('li').last().addClass('list-boundary');

// 或者在一条链中操作（虽然不常见，但展示了可能性）
$('li').first().addBack().last().css('border', '2px solid red');
// 注意：.addBack() 会将第一个元素和原始集合都加入新集合，然后 .last() 会从中选最后一个

与 .eq(-1) 对比使用：

这两个方法在功能上完全等价，但表达意图不同。

// 这两种写法效果完全相同
$('li').last().css('color', 'blue');
$('li').eq(-1).css('color', 'blue'); // .last() 是这种写法的语法糖

not()

$els.not()：(selector)，过滤器，用于从当前匹配的元素集合中筛选出不符合指定条件的元素，返回一个新的 jQuery 对象。

selector：selector|elements|function|selection，从集合中排除匹配的该元素。它接受多种类型的参数：
- selector：string，一个 jQuery 选择器。从集合中排除与该选择器匹配的元素。
- elements：DOMElement，一个或多个 DOM 元素。从集合中排除这些特定的元素。
- function：(index,element)=>boolean，函数。为集合中的每个元素执行该函数，排除函数返回 true 的元素。
  - index：当前元素在集合中的索引。
  - element：当前正在处理的 DOM 元素（通常是原生元素，而非 jQuery 对象）。
- selection：jQuery，另一个 jQuery 对象。从原始集合中排除新 jQuery 对象中包含的元素。
返回：
$els：jQuery，返回一个新的 jQuery 对象，其中包含原始集合中所有不匹配传入参数条件的元素。原始 jQuery 对象不会被修改。

~~基本示例~~：

使用选择器参数：

这是最常见的用法，通过 CSS 选择器来排除元素。

html

<div class="item">Item 1</div>
<div class="item special">Item 2 (Special)</div>
<div class="item">Item 3</div>
<div class="item excluded">Item 4 (Excluded)</div>

// 排除具有 .excluded 类的元素
var $filtered = $('.item').not('.excluded');
$filtered.css('border', '2px solid green'); // Item 4 不会有边框

// 排除多个类型的元素
$('div').not('.special, .excluded').css('color', 'blue');

// 更复杂的选择器
$('div').not(':first, :last').css('font-weight', 'bold'); // 排除第一个和最后一个div标签

使用 DOM 元素参数：

当你已经有一个或多个需要排除的特定 DOM 元素引用时使用。

// 获取一个要排除的特定元素的引用
var elementToExclude = document.getElementById('must-remove');

// 从所有 div 中排除这个特定元素
$('div').not(elementToExclude).addClass('kept');

// 也可以排除多个元素（放入数组中）
var elementsToExclude = [element1, element2];
$('div').not(elementsToExclude).hide();

使用函数参数

这是最强大的方式，允许你根据复杂的逻辑或元素属性来动态决定排除哪些元素。

// 排除索引为偶数的元素
$('li').not(function(index) {
  return index % 2 === 0; // 返回 true 的索引(0,2,4...)将被排除
}).css('background-color', '#eee');

// 排除内容文本长度小于10个字符的元素
$('p').not(function() {
  // 这里的 'this' 是当前的 DOM 元素
  return $(this).text().length < 10;
}).addClass('long-text');

// 结合索引和元素属性
$('tr').not(function(index, element) {
  // 排除第一行(通常是表头)和具有 .subtotal 类的行
  return index === 0 || $(element).hasClass('subtotal');
});

使用 jQuery 对象参数

从一个 jQuery 集合中排除另一个集合中的所有元素。

// 创建一个要排除的元素集合
var $elementsToRemove = $('.unwanted, .obsolete');

// 从所有元素中排除 $elementsToRemove 集合中的元素
var $cleanList = $('div').not($elementsToRemove);

// 等效于使用选择器，但有时这样更清晰，特别是当 $elementsToRemove 是动态计算得来时

~~核心特性~~：

核心功能：从集合中排除元素：
.not() 的目的是精简集合，移除不需要的元素。

对比 .filter()：

这两个方法是 jQuery 过滤系统的核心，但逻辑完全相反。

特性	`.not()`	`.filter()`
核心逻辑	排除匹配条件的元素	保留匹配条件的元素
返回值	包含不匹配条件的元素的新集合	包含匹配条件的元素的新集合
函数返回值	函数返回 `true` 时排除元素	函数返回 `true` 时保留元素

var $items = $('.item');

// 这两种写法效果完全相反
var $withoutSpecial = $items.not('.special'); // 排除 .special
var $onlySpecial = $items.filter('.special');  // 只保留 .special

filter()

$els.filter()：(selector)，过滤器，用于从当前匹配的元素集合中筛选出符合指定条件的元素，返回一个新的 jQuery 对象。

selector：selector|elements|function|selection，从集合中筛选匹配的该元素。它接受多种类型的参数：
- selector：string，一个 jQuery 选择器。保留集合中与该选择器匹配的元素。
- elements：DOMElement，一个或多个 DOM 元素。保留集合中这些特定的元素。
- function：(index,element)=>boolean，函数。为集合中的每个元素执行该函数，保留函数返回 true 的元素。
  - index：当前元素在集合中的索引。
  - element：当前正在处理的 DOM 元素（通常是原生元素，而非 jQuery 对象）。
- selection：jQuery，另一个 jQuery 对象。保留原始集合与新 jQuery 对象中共有的元素（交集）。
返回：
$els：jQuery，返回一个新的 jQuery 对象，其中包含原始集合中所有匹配传入参数条件的元素。原始 jQuery 对象不会被修改。

~~基本示例~~：

使用选择器参数：

这是最简单直接的用法，通过 CSS 选择器来筛选元素。

html

<div class="item">Item 1</div>
<div class="item important">Item 2 (Important)</div>
<div class="item">Item 3</div>
<div class="item important">Item 4 (Important)</div>

// 筛选出具有 .important 类的元素
var $importantItems = $('.item').filter('.important');
$importantItems.css('border', '2px solid gold'); // 只有重要的项目会有金边框

// 使用更复杂的选择器
$('p').filter(':visible:first').css('font-weight', 'bold'); // 筛选出第一个可见的p元素

使用函数参数：

这是最强大的方式，允许你根据复杂的逻辑或元素属性来动态决定保留哪些元素。

// 筛选出索引为奇数的元素
$('li').filter(function(index) {
  return index % 2 !== 0; // 保留奇数索引(1,3,5...)
}).css('background-color', '#f0f0f0');

// 筛选出宽度大于200px的元素
$('.box').filter(function() {
  return $(this).width() > 200;
}).addClass('large-box');

// 筛选出文本中包含特定关键词的元素
var searchTerm = 'jQuery';
$('p').filter(function() {
  return $(this).text().toLowerCase().includes(searchTerm.toLowerCase());
}).highlight(); // 假设.highlight()方法存在

// 结合多个条件
$('tr').filter(function(index, element) {
  var $row = $(element);
  return $row.find('.price').length > 0 && 
         parseFloat($row.find('.price').text()) > 50;
}).addClass('expensive');

使用 DOM 元素参数：

当你已经有一个或多个需要保留的特定 DOM 元素引用时使用。

// 获取一个要保留的特定元素的引用
var elementToKeep = document.getElementById('must-keep');

// 从所有 div 中只保留这个特定元素
$('div').filter(elementToKeep).addClass('selected');

// 也可以保留多个元素（放入数组中）
var elementsToKeep = [element1, element2, element3];
$('div').filter(elementsToKeep).show();

使用 jQuery 对象参数：

获取两个集合的交集。

// 创建另一个集合
var $specialItems = $('.special');

// 获取两个集合的交集（既是div又是.special的元素）
var $intersection = $('div').filter($specialItems);

// 这在处理动态确定的集合时特别有用

~~核心特性~~：

核心功能：精简集合，保留符合条件的元素：
.filter() 的目的是从大集合中提取出符合特定条件的子集。

对比 .filter()：

这两个方法是 jQuery 过滤系统的核心，但逻辑完全相反。

特性	`.not()`	`.filter()`
核心逻辑	排除匹配条件的元素	保留匹配条件的元素
返回值	包含不匹配条件的元素的新集合	包含匹配条件的元素的新集合
函数返回值	函数返回 `true` 时排除元素	函数返回 `true` 时保留元素

var $items = $('.item');

// 这两种写法效果完全相反
var $withoutSpecial = $items.not('.special'); // 排除 .special
var $onlySpecial = $items.filter('.special');  // 只保留 .special

~~性能考虑~~：

选择器性能：简单选择器（如 .filter('.class')）的性能通常优于复杂选择器或函数回调。

缓存结果：如果需要对同一集合进行多次过滤，先缓存原始集合。

var $allItems = $('.item'); // 先缓存
var $active = $allItems.filter('.active');
var $visible = $allItems.filter(':visible');

函数复杂度：在函数回调中避免执行昂贵的操作，尤其是在大集合上。

链式优化：合理安排过滤顺序，先使用高效的选择器缩小集合，再使用复杂的函数过滤。

// 更高效：先用选择器缩小范围，再用函数精细过滤
$('.item').filter('.category-a').filter(function() {
  return $(this).data('price') > 100;
});

// 较低效：直接在大集合上使用函数过滤
$('*').filter(function() {
  return $(this).hasClass('category-a') && $(this).data('price') > 100;
});

find()

$els.find()：(selector)，遍历方法，用于在当前匹配元素集合的后代元素中查找与指定选择器匹配的元素。

selector：selector|element，接受以下类型的参数，不接受函数类型的参数：
- selector：string，一个 jQuery 选择器。用于在后代中查找匹配选择器的元素。
- element：DOM|jQuery，一个 DOM 元素 或 jQuery 对象。用于在后代中查找特定的元素。
返回：
$els：jQuery，返回一个新的 jQuery 对象，其中包含所有匹配的后代元素。原始 jQuery 对象不会被修改。

~~基本示例~~：

基本用法（使用选择器）：

html

<div id="container">
  <p>Paragraph 1</p>
  <div class="content">
    <p>Paragraph 2</p>
    <span>Span inside content</span>
  </div>
  <p>Paragraph 3</p>
</div>
<ul>
  <li>Item 1</li>
</ul>

// 在 #container 的所有后代中查找 <p> 元素
var $paragraphsInContainer = $('#container').find('p');
$paragraphsInContainer.css('color', 'blue');
// 结果：Paragraph 1, Paragraph 2, Paragraph 3 都会变蓝

// 查找更具体的后代
$('#container').find('.content span').css('font-weight', 'bold');
// 结果："Span inside content" 会加粗

// 可以链式调用
$('#container')
  .find('div')
  .addClass('highlight')
  .find('span')
  .css('text-decoration', 'underline');

使用 DOM 元素参数：

当已经有一个要查找的特定 DOM 元素引用时使用。

// 获取一个要查找的特定元素的引用
var targetElement = document.getElementById('specific-span');

// 在 #container 的后代中查找这个特定元素
$('#container').find(targetElement).addClass('found');

// 如果元素确实是 #container 的后代，它会被添加 .found 类
// 如果不是，则不会有任何效果

处理空结果：

与大多数 jQuery 方法一样，.find() 在处理空集合时是安全的。

// 在一个空集合上调用 .find()
$('.non-existent').find('p').css('color', 'red');
// 不会报错，只是静默失败

// 查找不存在的后代
$('#container').find('.non-existent-class').hide();
// 返回空的 jQuery 对象，.hide() 不会产生任何效果

~~核心特性~~：

核心功能：在后代中查找元素：
.find() 的目的是"深入"到 DOM 树中，在当前元素的子元素、孙元素等后代中搜索匹配的元素。

对比 .filter()：

特性	`.find()`	`.filter()`
搜索方向	垂直向下：在当前元素的后代中查找	水平：在当前集合中筛选元素
操作目标	后代元素（子元素、孙元素等）	当前集合本身
结果关系	返回的是后代元素	返回的是当前集合的子集
示例	`$('#div1').find('p')` → 查找 #div1 里面的所有 p	`$('div').filter('.active')` → 从所有div中找出有active类的

html

<div class="container">
  <div class="item active">Item 1</div>
  <div class="item">Item 2</div>
</div>
<div class="item active">Item 3</div>

// .find() - 在 .container 的后代中查找 .item
$('.container').find('.item').css('color', 'red');
// 结果：只有 Item 1 和 Item 2 变红（它们是 .container 的后代）

// .filter() - 从当前集合中筛选出 .item
$('.container').filter('.item').css('color', 'blue');
// 结果：没有元素变蓝，因为 .container 本身没有 .item 类

对比 $(selector, context) 上下文参数：

使用 .find() 与在 $() 函数中指定上下文参数在功能上是等价的，但性能有所不同。

// 这两种写法功能相同
$('#container').find('.item');
$('.item', '#container'); // 上下文参数

// 但 jQuery 内部会将第二种转换为第一种
// .find() 通常性能稍好，因为更直接

对比 .children()

两者都用于查找子元素，但范围不同。

find()：在所有后代（子代、孙代等）中搜索。
.children()：仅在直接子元素（第一层后代）中搜索。

// .find() 会找到所有后代的 .item
$('#container').find('.item').css('color', 'red');

// .children() 只会找到直接子元素的 .item
$('#container').children('.item').css('color', 'blue');

~~性能考虑~~：

ID 选择器优先：如果可能，先用 ID 选择器缩小范围，再用 .find()。

// 更高效：先通过ID精确定位
$('#header').find('.menu-item');

// 较低效：直接在大量元素上查找
$('div').find('.menu-item');

避免过度使用：不要嵌套太多层的 .find()，这可能表明HTML结构需要优化。

// 可能过于复杂
$('#app').find('.main').find('.content').find('.article').find('p');

// 更简洁的写法
$('#app .main .content .article p');
// 或者
$('#app').find('.main .content .article p');

缓存中间结果：如果需要多次使用同一查找结果，应该缓存它。

// 低效：多次查找
$('#container').find('.item').addClass('first');
$('#container').find('.item').css('color', 'red');

// 高效：缓存结果
var $items = $('#container').find('.item');
$items.addClass('first');
$items.css('color', 'red');

选择正确的工具：
- 如果只需要直接子元素，使用 .children() 性能更好。
- 如果需要在所有后代中查找，使用 .find()。

is()

$els.is()：(selector)，过滤器，用于检查当前匹配的元素集合中是否有至少一个元素与指定的选择器、元素、jQuery 对象或判断函数相匹配。

selector：selector|elements|function|slection，接受多种类型的参数，用于定义要检查的匹配条件：
- selector：string，一个 jQuery 选择器。检查集合中是否有元素匹配该选择器。
- elements：DOMElement，一个或多个 DOM 元素。检查当前集合中是否包含这些特定的元素。
- function：(index,element)=>boolean，函数。为集合中的每个元素执行该函数，如果函数对任何元素返回 true，则 .is() 返回 true。
  - index：当前元素在集合中的索引。
  - element：当前正在处理的 DOM 元素（通常是原生元素，而非 jQuery 对象）。
- selection：jQuery，另一个 jQuery 对象。检查当前集合中是否有元素也在另一个 jQuery 对象中。
返回：
isMatch：boolean，它的独特之处在于返回的是布尔值，而非 jQuery 对象。返回值如下：
- true：如果当前集合中至少有一个元素匹配给定的参数。
- false：如果没有任何元素匹配给定的参数。

~~基本示例~~：

使用选择器参数（最常见）：

这是最常用的方式，用于检查元素是否匹配某个选择器。

html

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

// 检查是否有 .item 元素同时具有 .active 类
if ($('.item').is('.active')) {
  console.log('找到活跃的项目！'); // 这会执行
}

// 检查第一个 .item 是否是可见的
if ($('.item').first().is(':visible')) {
  console.log('第一个项目是可见的');
}

// 常用于事件处理程序中检查事件目标
$('.item').on('click', function(event) {
  if ($(this).is('.active')) {
    console.log('点击了活跃项目');
  }
});

使用 DOM 元素参数（略）
使用函数参数（略）
使用 jQuery 对象参数（略）

在事件委托中特别有用：

.is() 在事件处理中非常强大，特别是用于检查事件目标。

// 事件委托：在父元素上监听，然后检查点击的是哪个子元素
$('#container').on('click', function(event) {
  var $target = $(event.target);
  
  if ($target.is('button')) {
    console.log('点击了按钮');
  } else if ($target.is('a')) {
    console.log('点击了链接');
    event.preventDefault(); // 阻止默认行为
  } else if ($target.is('input[type="checkbox"]')) {
    console.log('点击了复选框');
  }
});

~~核心特性~~：

核心功能：检查元素是否匹配条件：
.is() 的目的是进行布尔测试，判断集合中的元素是否满足某些条件。
对比 .has()：
两者都用于测试，但测试的方向不同。
特性 .is() .has()
测试方向 测试元素本身是否匹配条件测试元素是否包含匹配的后代
返回值 Boolean jQuery 对象
js
```
// .is() - 测试元素本身是否有 .active 类
$('#myElement').is('.active'); 

// .has() - 测试元素内部是否有 .child 元素
$('#myElement').has('.child');
```
1
2
3
4
5

特性	`.is()`	`.has()`
测试方向	测试元素本身是否匹配条件	测试元素是否包含匹配的后代
返回值	`Boolean`	`jQuery` 对象

odd()

$els.odd()：()，过滤器，用于从当前匹配的元素集合中筛选出索引值为奇数的元素。是 .filter() 方法的一个便捷替代。

返回：
$els：jQuery，返回值如下：
- 返回一个新的 jQuery 对象，其中包含原始集合中所有索引为奇数的元素。原始 jQuery 对象不会被修改。
- 如果原始集合是空的（即 $els.length === 0），则返回的也是一个空的 jQuery 对象。

~~基本示例~~：

基本用法：

html

<ul>
  <li>Item 1 (索引 0 - 偶数)</li>
  <li>Item 2 (索引 1 - 奇数)</li>
  <li>Item 3 (索引 2 - 偶数)</li>
  <li>Item 4 (索引 3 - 奇数)</li>
  <li>Item 5 (索引 4 - 偶数)</li>
</ul>

// 获取所有 <li> 元素并选择奇数索引的元素
$('li').odd().css('background-color', '#f0f0f0');

// 结果：Item 2 和 Item 4 会获得灰色背景
// 因为它们的索引是 1 和 3（奇数）

// 链式调用示例
$('li').odd().addClass('odd-row').fadeTo(1000, 0.5);

~~核心特性~~：

核心功能：选择奇数索引元素：
.odd() 的唯一目的就是从当前集合中获取所有索引为奇数的元素。
需要注意的是，jQuery 中的索引是从 0 开始的，这意味着第一个元素的索引是偶数，不会被 .odd() 选中。

对比 .even()：

这两个方法是 jQuery 提供的索引过滤工具，功能相反但互补。

特性	`.odd()`	`.even()`
选择元素	索引为奇数的元素（1, 3, 5...）	索引为偶数的元素（0, 2, 4...）
常见用途	创建交替样式（如表格的斑马纹）	创建交替样式（如表格的斑马纹）

// 创建斑马纹表格行效果
$('tr').even().css('background-color', '#ffffff'); // 偶数行白色
$('tr').odd().css('background-color', '#f8f8f8');  // 奇数行浅灰色

内部实现原理：

.odd() 方法实际上是 .filter() 方法的一个语法糖（便捷替代）。jQuery 内部实现类似于：

// .odd() 的近似内部实现
jQuery.fn.odd = function() {
  return this.filter(function(index) {
    return index % 2 === 1; // 返回索引为奇数的元素
  });
};

.odd() 的等效写法：

$('li').odd();
// 等价于
$('li').filter(function(index) {
  return index % 2 === 1;
});

使用 .odd() 更加简洁和语义化。

CSS 替代方案：
对于简单的斑马纹效果，考虑使用 CSS 的 :nth-child() 选择器，性能通常更好：
但在需要复杂交互或动态过滤时，jQuery 方法仍然很有用。
css
```
/* 使用 CSS 实现斑马纹效果 */
tr:nth-child(odd) { background-color: #f8f8f8; }
tr:nth-child(even) { background-color: #ffffff; }
```
1
2
3
动态内容：如果内容是动态添加的，需要在添加后重新应用 .odd() 过滤，或者使用事件委托等技术。

~~进阶示例~~：

处理空集合：

.odd() 在处理空集合时是安全的，不会抛出错误。

// 尝试从一个空集合中获取奇数索引元素
var $emptyCollection = $('.non-existent-class');
var $oddElements = $emptyCollection.odd();

console.log($emptyCollection.length); // 输出: 0
console.log($oddElements.length);     // 输出: 0 (也是一个空集合)

// 下面的操作不会产生任何效果，也不会报错
$oddElements.css('color', 'red');

even()

$els.even()：()，过滤器，用于从当前匹配的元素集合中筛选出索引值为偶数的元素。是 .filter() 方法的一个便捷替代。

返回：
$els：jQuery，返回值如下：
- 返回一个新的 jQuery 对象，其中包含原始集合中所有索引为偶数的元素。原始 jQuery 对象不会被修改。
- 如果原始集合是空的（即 $els.length === 0），则返回的也是一个空的 jQuery 对象。

~~基本示例~~：

基本用法：

html

<ul>
  <li>Item 1 (索引 0 - 偶数)</li>
  <li>Item 2 (索引 1 - 奇数)</li>
  <li>Item 3 (索引 2 - 偶数)</li>
  <li>Item 4 (索引 3 - 奇数)</li>
  <li>Item 5 (索引 4 - 偶数)</li>
</ul>

// 获取所有 <li> 元素并选择偶数索引的元素
$('li').even().css('background-color', '#e0e0e0');

// 结果：Item 1、Item 3 和 Item 5 会获得灰色背景
// 因为它们的索引是 0、2 和 4（偶数）

// 链式调用示例
$('li').even().addClass('even-row').fadeTo(1000, 0.7);

~~核心特性~~：

核心功能：选择偶数索引元素：
.even() 的唯一目的就是从当前集合中获取所有索引为偶数的元素。
需要注意的是，jQuery 中的索引是从 0 开始的，这与通常的编程惯例一致。
特性类似 odd()：

文本操作

text()

$els.text()：()，文本操作，用于获取或设置匹配元素的文本内容。

$els.text()：()，获取文本内容。
- 返回：
- text：string，返回所有匹配元素的文本内容组合成的字符串
$els.text()：(textContent)，设置文本内容。
- textContent：string|number|boolean|Function，要设置的文本内容。可以是：
  - string：直接的文本内容。
  - number：会自动转换为字符串。
  - boolean：会自动转换为字符串。
  - (index,currentText)=>string：一个返回要设置的文本的函数。
- 返回：
- $els：jQuery，jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取文本内容：

html

<div id="content">
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <p>这是第三个段落。</p>
</div>

// 获取单个元素的文本
var paragraphText = $('p:first').text();
console.log(paragraphText); // "这是第一个段落。"

// 获取多个元素的文本（会合并所有文本）
var allText = $('#content').text();
console.log(allText); // "这是第一个段落。这是第二个段落。这是第三个段落。"

设置文本内容：

// 设置单个元素的文本
$('#myElement').text('新的文本内容');

// 设置多个元素的文本
$('p').text('所有段落都被更新了');

// 使用数字（会自动转换）
$('#counter').text(123);

// 使用布尔值
$('#status').text(true);

使用函数动态设置文本：

// 使用函数根据当前文本设置新文本
$('li').text(function(index, currentText) {
  return (index + 1) + '. ' + currentText + ' (已处理)';
});

// 更复杂的示例：区分偶数/奇数项
$('.item').text(function(index) {
  if (index % 2 === 0) {
    return '偶数项: ' + $(this).data('value');
  } else {
    return '奇数项: ' + $(this).data('value');
  }
});

~~核心特性~~：

获取或设置元素的文本内容。

自动处理 HTML 实体的编码和解码：

// .text() 会自动处理 HTML 实体
$('#output').text('<script>alert("XSS")</script>');
// 结果: 页面显示 "<script>alert("XSS")</script>"，但不会执行脚本

// 与 .html() 对比
$('#output').html('<strong>加粗文本</strong>');
// 结果: 页面显示 "加粗文本"（加粗效果）

忽略 HTML 标签，只处理文本内容
支持链式调用（当用于设置文本时）

对比 .html() 和 .val()：

方法	描述	处理内容	安全性
`.text()`	获取或设置元素的文本内容	纯文本，HTML 会被转义	高，防止 XSS 攻击
`.html()`	获取或设置元素的 HTML 内容	HTML 代码，会被解析	低，可能引入 XSS 风险
`.val()`	获取或设置表单元素的值	表单字段的值	取决于内容

html()

$els.html()：()，文本操作，用于获取或设置匹配元素的 HTML 内容。

$els.html()：()，获取 HTML 内容。
- 返回：
- html：string，返回第一个匹配元素的 HTML 内容。
$els.html()：(htmlContent)，设置 HTML 内容。
- htmlContent：string|Function，要设置的 HTML 内容。可以是：
  - string：包含 HTML 标签的内容。
  - (index,currentHtml)=>string：一个返回要设置的 HTML 内容的函数。
- 返回：
- $els：jQuery，jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取 HTML 内容：

html

<div id="content">
  <p>这是第一个<strong>加粗</strong>段落。</p>
  <p>这是第二个<span style="color: red;">红色</span>段落。</p>
</div>

// 获取单个元素的 HTML
var firstParagraphHTML = $('p:first').html();
console.log(firstParagraphHTML); // "这是第一个<strong>加粗</strong>段落。"

// 获取包含 HTML 的元素内容
var contentHTML = $('#content').html();
console.log(contentHTML); // 包含所有子元素的完整 HTML

设置 HTML 内容：

// 设置简单的 HTML
$('#myElement').html('<strong>加粗文本</strong>');

// 设置复杂的 HTML 结构
$('#container').html(`
  <div class="header">
    <h1>标题</h1>
    <p>描述文字</p>
  </div>
  <div class="content">
    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
    </ul>
  </div>
`);

清空元素内容：

// 清空元素内容
$('#element').html('');

使用函数动态设置 HTML：

// 使用函数根据当前内容设置新 HTML
$('li').html(function(index, oldHTML) {
  return '<span class="number">' + (index + 1) + '</span> ' + oldHTML;
});

// 更复杂的示例
$('.item').html(function(index) {
  var value = $(this).data('value');
  if (value > 10) {
    return '<strong class="highlight">' + value + ' (高)</strong>';
  } else {
    return '<em>' + value + ' (低)</em>';
  }
});

~~核心特性~~：

获取或设置元素的 HTML 内容（包括标签）
可以处理复杂的 HTML 结构：
支持链式调用（当用于设置 HTML 时）：

比 .text() 方法更强大但也需要更谨慎使用

// 使用 .html() 设置内容（会解析 HTML）
$('#output').html('<strong>加粗文本</strong>');
// 结果: 页面显示 "加粗文本"（有加粗效果）

// 使用 .text() 设置内容（不会解析 HTML）
$('#output').text('<strong>加粗文本</strong>');
// 结果: 页面显示 "<strong>加粗文本</strong>"（纯文本）

~~注意事项~~：

XSS 安全风险：

风险：.html() 方法会解析并执行 HTML 中的脚本，这可能导致跨站脚本攻击（XSS）。

解决：永远不要使用 .html() 插入用户提供的未经验证的内容。

// ❌ 危险的做法：直接插入用户输入
var userInput = "<script>alert('XSS攻击')</script>";
$('#content').html(userInput); // 这会执行脚本！

// ✅ 安全的做法：先清理或转义用户输入
function sanitizeHTML(html) {
  var temp = document.createElement('div');
  temp.textContent = html;
  return temp.innerHTML;
}

var userInput = "<script>alert('XSS攻击')</script>";
var safeHTML = sanitizeHTML(userInput);
$('#content').html(safeHTML); // 这会显示文本，不会执行脚本

元素完全替换：
使用 .html() 设置内容会完全替换元素的现有内容，包括所有子元素和事件处理程序。
XML 文档中不可用：
在 XML 文档中，.html() 方法不可用，应使用 .text()。
只返回第一个匹配元素内容：
当获取多个元素的 HTML 时，只返回第一个匹配元素的 HTML 内容。

val()

$els.val()：()，文本操作，用于获取或设置表单元素的值。

$els.val()：()，获取元素值。
- 返回：
- val：string|number|array，返回第一个匹配元素的值。
$els.val()：(value)，设置元素值。
- value：string|number|boolean|Function，要设置的值。可以是：
  - string：文本值。
  - number：会自动转换为字符串。
  - array：用于多选元素。
  - (index,currentValue)=>string：一个返回要设置的值的函数。
- 返回：
- $els：jQuery，jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取表单元素值：

html

<form id="myForm">
  <input type="text" id="username" value="john_doe">
  <input type="email" id="email" value="john@example.com">
  <select id="country">
    <option value="us">United States</option>
    <option value="uk" selected>United Kingdom</option>
    <option value="ca">Canada</option>
  </select>
  <input type="checkbox" id="subscribe" checked>
</form>

// 获取文本框值
var username = $('#username').val(); // "john_doe"

// 获取下拉框选中的值
var country = $('#country').val(); // "uk"

// 获取复选框状态（返回 "on" 或 undefined）
var subscribe = $('#subscribe').val(); // "on"

设置表单元素值：

// 设置文本框值
$('#username').val('new_username');

// 设置下拉框选中的值
$('#country').val('us');

// 设置复选框选中状态
$('#subscribe').val(['on']); // 选中复选框

// 设置多个值（多选下拉框）
$('#multiSelect').val(['option1', 'option3']);

使用函数动态设置值：

// 使用函数根据当前值设置新值
$('input[type="text"]').val(function(index, currentValue) {
  return currentValue.toUpperCase();
});

// 更复杂的示例：确保不超过最大值
$('.quantity').val(function(index) {
  var max = $(this).data('max');
  var current = parseInt($(this).val(), 10);
  return Math.min(current, max); // 确保不超过最大值
});

处理不同类型的表单元素

// 单选按钮组
$('input[name="gender"]').val('male'); // 选择值为 "male" 的单选按钮

// 多选复选框
$('input[name="interests"]').val(['sports', 'music']); // 选中运动和音乐

// 文本区域
$('#description').val('这是文本区域的初始内容');

~~核心特性~~：

专门处理表单元素的值
支持所有类型的表单控件
支持链式调用（当用于设置值时）：

~~注意事项~~：

支持元素类型：
.val() 主要用于以下表单元素：
- <input> ：所有类型: text, password, radio, checkbox, hidden, file等
- <select> ：单选和多选
- <textarea>：文本域
复选框和单选按钮：
对于复选框和单选按钮，.val() 返回的是 value 属性的值，而不是选中状态。
要获取选中状态，使用 .prop('checked')。
多选元素：
对于多选 <select> 元素，.val() 返回包含所有选中值的数组。
文件输入：
对于 <input type="file">，出于安全原因，不能通过 JS 设置值，只能获取值。

属性操作

addClass()

$els.addClass()：(className|fn)，类名操作，用于向匹配元素集合中的每个元素添加一个或多个 CSS 类。

$els.addClass()：(className)，字符串参数，添加一个或多个类。
- className：string，一个或多个要移除的 CSS 类名，多个类名之间用空格分隔。
$els.addClass()：(fn)，函数参数，通过函数动态添加类。
- fn：(index,currentClassName)=>string，函数参数，一个返回要添加的类名字符串的函数。该函数为每个元素调用。
  - index：当前元素在集合中的索引。
  - currentClassName：元素当前的类名字符串。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：添加一个或多个类

// 添加单个类
$('div').addClass('active');

// 添加多个类（用空格分隔）
$('div').addClass('active highlighted');

// 链式调用
$('div').addClass('active').css('color', 'red').fadeIn();

使用函数动态添加类：

这是 .addClass() 最强大的功能之一，允许基于元素的状态或属性动态添加类。

// 根据索引添加类
$('li').addClass(function(index) {
  return 'item-' + index; // 添加 item-0, item-1, item-2...
});

// 根据当前类状态添加类
$('div').addClass(function(index, currentClass) {
  if (currentClass.includes('special')) {
    return 'special-active'; // 如果已有special类，添加special-active
  }
  return ''; // 不添加任何类
});

// 根据元素属性添加类
$('input').addClass(function() {
  return this.type + '-input'; // 添加 text-input, checkbox-input等
});

// 根据数据属性添加类
$('.user').addClass(function() {
  return 'role-' + $(this).data('role'); // 添加 role-admin, role-user等
});

处理已存在的类：

.addClass() 会自动处理重复的类，不会重复添加相同的类。

// 假设元素已有类: <div class="item active">
$('div').addClass('active'); // 不会重复添加active类
// 结果: <div class="item active">

$('div').addClass('active highlighted'); 
// 结果: <div class="item active highlighted"> (只添加了highlighted)

~~核心特性~~：

性能考虑：
虽然 .addClass() 性能很好，但在操作大量元素时应谨慎使用。
如果需要操作大量元素，考虑使用事件委托或批量操作。
CSS 特异性：
通过 .addClass() 添加的类遵循 CSS 的特异性规则。
确保添加的类有足够高的特异性来覆盖现有样式。
与直接样式操作的选择：
优先使用 .addClass() 而不是直接操作样式（如 .css()），因为：
- 更好的可维护性（样式保持在CSS文件中）
- 更容易实现主题切换和状态管理
- 支持CSS动画和过渡效果

~~进阶示例~~：

结合其他操作方法：

// 添加和移除类配合使用
$('button').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

// 切换类
$('button').click(function() {
  $(this).toggleClass('active'); // 如果存在则移除，不存在则添加
});

// 检查是否包含类
if ($('div').hasClass('active')) {
  // 执行某些操作
}

hasClass()

$els.hasClass()：(className)，类名操作，只读，用于检查匹配元素集合中的任何一个元素是否包含指定 CSS 类。

className：string，要检查的 CSS 类名。不支持多个类名，不支持函数类型。
返回：
hasClass：boolean，不支持链式调用，返回值如下：
- true：如果集合中至少有一个元素包含指定的类。
- false：如果没有任何元素包含指定的类。

~~基本示例~~：

基本用法：检查单个类：

// 检查元素是否有 'active' 类
if ($('#myElement').hasClass('active')) {
  console.log('元素处于活跃状态');
} else {
  console.log('元素不处于活跃状态');
}

// 检查集合中是否有任何元素包含指定类
if ($('div').hasClass('highlighted')) {
  console.log('至少有一个div有highlighted类');
}

~~核心特性~~：

对比原生 .classList.contains()：

// jQuery
var hasActive = $('#element').hasClass('active');

// 原生 JavaScript
var element = document.getElementById('element');
var hasActive = element.classList.contains('active'); // 现代浏览器
// 或
var hasActive = (' ' + element.className + ' ').indexOf(' active ') > -1; // 兼容旧浏览器

只能检查一个类：
如果需要检查多个类，需要多次调用或使用其他方法。
对比 .is()：
.hasClass('active') 不等于 .is('.active')。对于简单的类检查，.hasClass() 更高效。
- .hasClass()：检查类存在。
- .is()：检查是否匹配选择器。
空集合的处理：
如果 jQuery 集合为空，.hasClass() 返回 false。
类名格式：
- 类名区分大小写，应与CSS中的类名完全一致。
- 不需要包含前导点号（.）。

~~进阶示例~~：

处理多个类检查：

由于 .hasClass() 只能检查一个类，检查多个类需要多次调用：

// 检查多个类（需要多次调用）
if ($('#element').hasClass('class1') && $('#element').hasClass('class2')) {
  // 元素同时有 class1 和 class2
}

// 使用自定义函数检查多个类
function hasAllClasses($element, classes) {
  var classArray = classes.split(' ');
  for (var i = 0; i < classArray.length; i++) {
    if (!$element.hasClass(classArray[i])) {
      return false;
    }
  }
  return true;
}

// 使用示例
if (hasAllClasses($('#element'), 'class1 class2 class3')) {
  // 元素包含所有指定的类
}

// 使用filter方法检查集合中是否有元素包含多个类
var $elementsWithBothClasses = $('.element').filter(function() {
  return $(this).hasClass('class1') && $(this).hasClass('class2');
});

if ($elementsWithBothClasses.length > 0) {
  // 至少有一个元素同时包含两个类
}

removeClass()

$els.removeClass()：(className?|fn)，类名操作，用于从匹配元素集合中的每个元素移除一个或多个 CSS 类。

$els.removeClass()：()，无参数，移除所有类。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.removeClass()：(className?)，字符串参数，移除一个或多个类。
- className?：string，一个或多个要移除的 CSS 类名，多个类名之间用空格分隔。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.removeClass()：(fn)，函数参数，通过函数动态移除类。
- fn：(index,currentClassName)=>string，一个返回要移除的类名字符串的函数。该函数为每个元素调用。
  - index：number，当前元素在集合中的索引。
  - currentClassName：string，元素当前的类名字符串。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：移除一个或多个类：

// 移除单个类
$('div').removeClass('active');

// 移除多个类（用空格分隔）
$('div').removeClass('active highlighted');

// 移除所有类
$('div').removeClass();

// 链式调用
$('div').removeClass('inactive').addClass('active').fadeIn();

使用函数动态移除类：类似 addClass()
处理不存在的类：类似 addClass()
结合其他操作方法：类似 addClass()

~~核心特性~~：

性能考虑：类似 addClass()
CSS 特异性：类似 addClass()
与直接样式操作的选择：：类似 addClass()
无参数使用：
.removeClass()（无参数）会移除元素的所有类，这通常是不可逆的操作。
在使用无参数形式时要特别小心，确保这是你想要的行为。
与动画的配合：
在触发CSS动画或过渡前，有时需要先移除再添加类，以确保动画能够重新触发。
使用 void element.offsetWidth 技巧强制浏览器重排。

toggleClass()

$els.toggleClass()：(className|fn,state?,switch?)，类名操作，用于动态操作 CSS 类的重要方法，允许在元素上切换（添加或移除）一个或多个 CSS 类。

$els.toggleClass()：(className)，切换单个或多个类。
- className：string，一个或多个要切换的 CSS 类名，多个类名可以用空格分隔。
$els.toggleClass()：(className, state)，根据条件切换类。
- className：string，一个或多个要切换的 CSS 类名，多个类名可以用空格分隔。
- state：boolean，决定是添加还是移除类：
  - true: 添加类。
  - false: 移除类。
  - 省略：根据类的当前存在状态自动切换。
$els.toggleClass()：(fn)，使用函数动态决定切换。
- fn：(index, currentClass, state)=>void，一个返回要切换的类名的函数：
  - index：number，当前元素在集合中的索引。
  - currentClass：string，元素当前的类名。
  - state：boolean，当前的切换状态。
$els.toggleClass()：(className, state, switch?)，切换多个类。
- className：string，一个或多个要切换的 CSS 类名，多个类名可以用空格分隔。
- state：boolean，决定是添加还是移除类：
  - true: 添加类。
  - false: 移除类。
  - 省略：根据类的当前存在状态自动切换。
- switch?：boolean，已废弃，早期版本的参数，现已不推荐使用。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法 - 切换单个类：

// 切换单个类
$('#myElement').toggleClass('active');

// 如果元素有 'active' 类，则移除它；如果没有，则添加它

切换多个类：

// 切换多个类（用空格分隔）
$('#myElement').toggleClass('active highlighted');

// 同时切换 'active' 和 'highlighted' 类

根据条件切换类：

// 根据条件添加或移除类
var isActive = true;
$('#myElement').toggleClass('active', isActive);

// 如果 isActive 为 true，添加 'active' 类
// 如果 isActive 为 false，移除 'active' 类

使用函数动态决定切换：

// 使用函数决定是否切换类
$('div').toggleClass(function(index, currentClass) {
  // 只为偶数索引的元素添加 'even' 类
  if (index % 2 === 0) {
    return 'even';
  }
});

链式操作：

// 切换类后进行其他操作
$('#myElement')
  .toggleClass('active')
  .css('color', 'blue')
  .fadeIn();

~~核心特性~~：

性能考虑：在大量元素上使用 .toggleClass() 可能会影响性能，可以考虑使用事件委托或优化选择器。
CSS 特异性：切换类时要注意 CSS 特异性的影响，新添加的类可能会覆盖现有样式。
动画效果：结合 CSS 过渡或动画，可以创建平滑的视觉效果。
浏览器兼容性：.toggleClass() 在所有支持 jQuery 的浏览器中都能正常工作。
与原生 JS 对比：相比原生 JavaScript 的 classList.toggle()，jQuery 的 .toggleClass() 支持更复杂的操作（如多个类、函数参数等）。

attr()

$els.attr()：(attributeName|attributes,value?)，HTML 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。

$els.attr()：(attributeName)，获取属性值（Getter）。
- attributeName：string，要获取值的属性名称。
- 返回：
- value：string|undefined，返回第一个元素的指定属性值。如果属性不存在或集合为空，返回 undefined。
$els.attr()：(attributeName,value)，设置单个属性（Setter）。
- attributeName：string，要设置值的属性名称。
- value：string|number|function|null，要设置的属性值。如果是 null，则移除该属性。
  函数值签名：(index,currentValue)=>string，当使用函数作为值时，函数接收两个参数：
  - index：当前元素在集合中的索引。
  - currentValue：该属性当前的值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.attr()：(attributes)，设置多个属性（Setter）。
- attributes：object，包含{属性名:值}对的对象，用于一次性设置多个属性。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取属性值（Getter）：

当传递一个参数时，.attr() 获取第一个匹配元素的指定属性值。

// 获取图片的src属性
var imageSrc = $('img').attr('src');
console.log('图片地址: ' + imageSrc);

// 获取链接的href属性
var linkUrl = $('a').attr('href');
console.log('链接地址: ' + linkUrl);

// 获取自定义data属性
var userId = $('div').attr('data-user-id');
console.log('用户ID: ' + userId);

// 检查属性是否存在
if (typeof $('input').attr('disabled') !== 'undefined') {
  console.log('输入框被禁用');
}

设置单个属性值（Setter）

当传递两个参数时，.attr() 为所有匹配元素设置指定的属性值。

// 设置图片的src属性
$('img').attr('src', 'new-image.jpg');

// 设置链接的href属性
$('a').attr('href', 'https://www.example.com');

// 设置自定义data属性
$('div').attr('data-user-id', 12345);

// 使用函数动态设置属性值
$('img').attr('src', function(index, currentSrc) {
  // 为每个图片添加时间戳防止缓存
  return currentSrc + '?t=' + new Date().getTime();
});

// 移除属性（设置为null）
$('input').attr('disabled', null); // 移除disabled属性

设置多个属性值（Setter）

当传递一个对象时，.attr() 可以一次性设置多个属性。

// 一次性设置多个属性
$('img').attr({
  src: 'new-image.jpg',
  alt: '描述文字',
  title: '图片标题',
  'data-loaded': 'true'
});

// 链式调用
$('a')
  .attr({
    href: 'https://example.com',
    target: '_blank'
  })
  .addClass('external-link');

处理布尔属性

对于布尔属性（如 disabled, checked, selected），.attr() 有其特殊行为：

// 设置布尔属性
$('input').attr('disabled', 'disabled'); // 禁用输入框
$('input').attr('checked', 'checked');   // 选中复选框

// 移除布尔属性
$('input').attr('disabled', null);      // 启用输入框

// 检查布尔属性
if ($('input').attr('disabled') === 'disabled') {
  console.log('输入框被禁用');
}

~~核心特性~~：

对比 .prop()：

一般规则：

对于自定义属性和标准HTML属性，使用 .attr()
对于布尔属性（checked, selected, disabled等）和 JS 动态属性，使用 .prop()

特性	`.attr()`	`.prop()`
操作目标	HTML 属性（attribute）	JavaScript 属性（property）
值类型	总是返回字符串	返回属性的实际类型（布尔值、数字等）
适用场景	自定义属性、标准HTML属性	布尔属性、JavaScript动态属性
示例	`$('input').attr('data-id')`	`$('input').prop('checked')`

// 对于复选框
var checkbox = $('#myCheckbox');

// .attr() - 操作HTML属性
console.log(checkbox.attr('checked')); // "checked" 或 undefined

// .prop() - 操作JavaScript属性
console.log(checkbox.prop('checked')); // true 或 false

// 正确设置复选框选中状态
checkbox.prop('checked', true);    // 正确方式
checkbox.attr('checked', 'checked'); // 也能工作，但不是最佳实践

removeAttr()

$els.removeAttr()：(attributeName)，HTML 属性操作，用于从匹配元素集合中的每个元素移除一个或多个指定的 HTML 属性。

attributeName：string，要移除的属性名称。可以是一个属性，或多个用空格分隔的多个属性。不接受函数参数，属性名区分大小写。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：移除单个属性：

// 移除单个属性
$('input').removeAttr('disabled');    // 移除禁用状态
$('img').removeAttr('alt');           // 移除alt文本
$('a').removeAttr('target');          // 移除target目标
$('div').removeAttr('data-custom');   // 移除自定义数据属性

// 链式调用
$('input')
  .removeAttr('disabled')
  .removeAttr('readonly')
  .addClass('editable');

移除多个属性：

可以通过空格分隔一次移除多个属性：

// 一次移除多个属性
$('input').removeAttr('disabled readonly'); // 同时移除disabled和readonly属性

// 移除多个相关属性
$('img').removeAttr('alt title data-src'); // 移除alt、title和data-src属性

// 表单元素批量清理
$('form input').removeAttr('disabled required pattern');

处理布尔属性：

对于布尔属性（如 disabled, checked, selected），移除属性会改变元素的行为状态：

移除 disabled 属性会启用元素
移除 checked 属性会取消选中状态

// 移除布尔属性以改变元素状态
$('input').removeAttr('disabled');  // 启用输入框
$('input').removeAttr('checked');   // 取消选中复选框
$('option').removeAttr('selected'); // 取消选择选项

// 检查属性是否已移除
if (typeof $('input').attr('disabled') === 'undefined') {
  console.log('输入框已启用');
}

~~核心特性~~：

对比 .attr()：

.removeAttr() 与 .attr() 方法在功能上是互补的：

// 使用 .attr() 移除属性（设置为null）
$('input').attr('disabled', null); // 移除disabled属性

// 使用 .removeAttr() 移除属性
$('input').removeAttr('disabled'); // 同样移除disabled属性

// 两种方法效果相同，但.removeAttr()更语义化

prop()

$els.prop()：(propertyName|properties, value?)，DOM 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。

$els.prop()：(propertyName)，获取属性值（Getter）。
- propertyName：string，要获取值的属性名称。
- 返回：
- prop：any，返回第一个元素的指定属性值，值的类型取决于属性本身。属性不存在则返回 undefined。
$els.prop()：(propertyName, value)，设置单个属性（Setter）。
- propertyName：string，要设置的属性名称。
- value：any|function，要设置的属性值。
  函数值签名：
  当使用函数作为值时，函数接收两个参数：
  - index：number，当前元素在集合中的索引。
  - currentValue：any，该属性当前的值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.prop()：(properties)，设置多个属性（Setter）。
- properties：object，包含 {属性名: 值} 对的对象，用于一次性设置多个属性。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取属性值（Getter）：

当传递一个参数时，.prop() 获取第一个匹配元素的指定属性值。

// 获取复选框的选中状态（布尔值）
var isChecked = $('#myCheckbox').prop('checked');
console.log('复选框已选中: ' + isChecked); // true 或 false

// 获取选择框的选中索引（数字）
var selectedIndex = $('#mySelect').prop('selectedIndex');
console.log('选中索引: ' + selectedIndex);

// 获取元素的标签名（字符串）
var tagName = $('#myElement').prop('tagName');
console.log('标签名: ' + tagName); // "DIV", "INPUT"等

// 获取表单元素的值
var inputValue = $('input').prop('value');
console.log('输入值: ' + inputValue);

设置属性值（Setter）：

当传递两个参数时，.prop() 为所有匹配元素设置指定的属性值。

// 设置复选框为选中状态
$('#myCheckbox').prop('checked', true);

// 禁用输入框
$('input').prop('disabled', true);

// 设置选择框的选中索引
$('#mySelect').prop('selectedIndex', 2);

// 使用函数动态设置属性值
$('input').prop('value', function(index, currentValue) {
  return '默认值 ' + (index + 1);
});

// 设置多个属性
$('#myButton').prop({
  disabled: false,
  title: '可点击的按钮'
});

处理布尔属性：

.prop() 特别适合处理布尔属性，因为它返回实际的布尔值而不是字符串：

// 正确处理布尔属性
var $checkbox = $('#myCheckbox');

// 设置选中状态
$checkbox.prop('checked', true);  // 正确方式

// 检查选中状态
if ($checkbox.prop('checked')) {  // 返回布尔值
  console.log('复选框已选中');
}

// 切换状态
$checkbox.prop('checked', !$checkbox.prop('checked'));

~~核心特性~~：

使用时机：

使用 .prop() 的情况：
- 布尔属性：checked, selected, disabled, readonly, multiple
- 动态属性：value, selectedIndex, defaultValue
- JavaScript原生属性：tagName, nodeName, nodeType, ownerDocument
使用 .attr() 的情况：
- 自定义HTML属性：data-*, aria-*, 其他非标准属性
- 标准HTML属性：id, class, src, href, title, alt

// 复选框示例
var $checkbox = $('#myCheckbox');

// .prop() - 操作JavaScript属性
$checkbox.prop('checked', true);    // 设置为选中
var isChecked = $checkbox.prop('checked'); // true (布尔值)

// .attr() - 操作HTML属性
$checkbox.attr('checked', 'checked'); // 添加checked属性
var hasCheckedAttr = $checkbox.attr('checked'); // "checked" (字符串)

// 值属性示例
var $input = $('#myInput');

// .prop() - 获取当前值（可动态变化）
$input.prop('value'); // 返回用户输入后的当前值

// .attr() - 获取初始值（不会变化）
$input.attr('value'); // 返回HTML中设置的初始值

removeProp()

$els.removeProp()：(propertyName)，DOM 属性操作，用于从匹配元素集合中的每个元素移除通过 .prop() 方法设置的 DOM 属性。

propertyName：string，要移除的属性名称。不接受多个属性名。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：移除自定义属性：

.removeProp() 主要用于移除通过 .prop() 方法设置的自定义属性。

// 1. 首先设置一个自定义属性
$('div').prop('customData', { name: 'John', age: 30 });

// 2. 然后移除这个自定义属性
$('div').removeProp('customData');

// 验证属性已被移除
if (typeof $('div').prop('customData') === 'undefined') {
  console.log('自定义属性已被成功移除');
}

~~核心特性~~：

移除原生属性很危险：

移除后无法再设置原生属性

// 危险操作示例
var $input = $('#myInput');

// 设置原生属性
$input.prop('value', 'test value');
console.log($input.prop('value')); // 输出: "test value"

// 移除原生属性 - 危险！
$input.removeProp('value');
console.log($input.prop('value')); // 输出: "" (空字符串)

// 现在无法再设置value属性！
$input.prop('value', 'new value'); // 这不会起作用
console.log($input.prop('value')); // 仍然输出: ""

~~进阶示例~~：

使用 .data() 代替 .prop() 进行数据存

// 更好的方式：使用 .data() 存储数据
$('div').data('customData', { name: 'John', age: 30 });

// 读取数据
var data = $('div').data('customData');

// 移除数据（更安全）
$('div').removeData('customData');

// 检查数据是否已移除
if ($('div').data('customData') === undefined) {
  console.log('数据已被安全移除');
}

设置属性为 null 或 undefined 而不是移除

//  Instead of removing properties, consider setting them to null
$('div').prop('temporaryData', null);

// Or undefined
$('div').prop('temporaryData', undefined);

// This is often safer than completely removing the property

data()

$els.data()：(obj|key,value)，数据属性，用于在匹配的元素上存储或检索数据的方法。

$els.data()：()，读取所有数据。
- 返回：
- data：any，返回请求的数据值。
  - 如果键不存在，返回 undefined
$els.data()：(key)，读取特定键的值。
- key：string，数据项的键名，存储/检索的数据的标识符。
- 返回：
- data：any，返回请求的数据值。
  - 如果键不存在，返回 undefined
$els.data()：(key,value)，存储单个键值对数据。
- key：string，数据项的键名，存储/检索的数据的标识符。
- value：any，要存储的数据值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.data()：(obj)，存储多个键值对数据。
- obj：{key: value,...}，包含键值对的对象，用于一次性存储多个数据项。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

存储和读取简单数据：

// 在元素上存储数据
$('#myElement').data('username', 'john_doe');
$('#myElement').data('isActive', true);

// 读取存储的数据
var username = $('#myElement').data('username'); // "john_doe"
var isActive = $('#myElement').data('isActive'); // true
var nonExistent = $('#myElement').data('age');   // undefined

存储和读取复杂数据：

// 存储对象和数组
var user = {
  name: 'Alice',
  age: 30,
  preferences: { theme: 'dark', language: 'en' }
};

var tags = ['javascript', 'jquery', 'web'];

$('#userProfile').data('user', user); // 存储对象
$('#userProfile').data('tags', tags); // 存储数组

// 读取和操作复杂数据
var storedUser = $('#userProfile').data('user');
console.log(storedUser.name); // "Alice"
console.log(storedUser.preferences.theme); // "dark"

// 修改存储的对象（注意：这是引用，会修改原始数据）
storedUser.age = 31;
console.log($('#userProfile').data('user').age); // 31

一次性存储多个值：

// 使用对象一次存储多个值
$('#myElement').data({
  id: 123,
  name: 'Example',
  settings: { color: 'blue', size: 'large' }
});

// 读取所有存储的数据
var allData = $('#myElement').data();
console.log(allData.id); // 123
console.log(allData.settings.color); // "blue"

存储和读取HTML5 data-* 属性：

html

<div id="product" data-price="29.99" data-category="electronics" data-available="true">
  产品信息
</div>

// jQuery 自动读取 HTML5 data-* 属性
var price = $('#product').data('price');      // 29.99 (数字类型)
var category = $('#product').data('category'); // "electronics" (字符串类型)
var available = $('#product').data('available'); // true (布尔类型)

// 通过 .data() 设置的值会覆盖 HTML data-* 属性
$('#product').data('price', 39.99);
console.log($('#product').data('price')); // 39.99
console.log(document.getElementById('product').getAttribute('data-price')); // "29.99" (未改变)

移除数据：

// 存储数据
$('#myElement').data('temp', 'temporary value');

// 移除特定数据
$('#myElement').removeData('temp');

// 移除所有数据
$('#myElement').removeData();

// 检查数据是否被移除
var temp = $('#myElement').data('temp'); // undefined

~~核心特性~~：

HTML5 data-* 属性：
- jQuery 会自动读取元素上的 data-* 属性
- 通过 .data() 设置的值不会反映在 HTML 属性中
- 数据类型会自动转换（字符串 "true" 变为布尔值 true，数字字符串变为数字等）
数据存储位置：
- 数据存储在 jQuery 的内部数据结构中，而不是 DOM 元素上
- 这避免了循环引用和内存泄漏问题
命名约定：
- 键名可以使用任何字符串，但应避免使用特殊字符
- jQuery 会自动将驼峰命名的键转换为连字符格式用于 HTML 属性

removeData()

$els.removeData()：(name|names)，数据属性，用于移除通过 .data() 方法存储在元素上的数据。

$els.removeData()：()，无参数，移除所有数据。
$els.removeData()：(name)，字符串参数，移除特定数据。
- name：string，要移除的特定数据项的键名。
$els.removeData()：(names)，数组参数，移除多个数据。
- names：array，包含多个键名的数组，用于一次性移除多个数据项。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

示例：

移除所有数据：

// 首先存储一些数据
$('#myElement').data('username', 'john_doe');
$('#myElement').data('isActive', true);
$('#myElement').data('preferences', { theme: 'dark', language: 'en' });

// 检查数据是否存在
console.log($('#myElement').data('username')); // "john_doe"

// 移除所有数据
$('#myElement').removeData();

// 验证数据已被移除
console.log($('#myElement').data('username')); // undefined
console.log($('#myElement').data('isActive')); // undefined

移除特定数据项：

// 存储多个数据项
$('#myElement').data({
  user: { name: 'Alice', age: 30 },
  settings: { theme: 'light' },
  timestamp: Date.now()
});

// 只移除特定数据项
$('#myElement').removeData('user');

// 验证
console.log($('#myElement').data('user')); // undefined
console.log($('#myElement').data('settings')); // {theme: 'light'} (仍然存在)

移除多个特定数据项：

// 存储多个数据项
$('#myElement').data('key1', 'value1');
$('#myElement').data('key2', 'value2');
$('#myElement').data('key3', 'value3');
$('#myElement').data('key4', 'value4');

// 移除多个特定数据项
$('#myElement').removeData(['key1', 'key3']);

// 验证
console.log($('#myElement').data('key1')); // undefined
console.log($('#myElement').data('key2')); // "value2" (仍然存在)
console.log($('#myElement').data('key3')); // undefined
console.log($('#myElement').data('key4')); // "value4" (仍然存在)

~~核心特性~~：

不影响 HTML5 data-* 属性：

html

<div id="element" data-info="原始属性" data-value="123">
  带有 data-* 属性的元素
</div>

// 存储一些数据
$('#element').data('dynamicData', '动态添加的数据');
$('#element').data('tempValue', 456);

// 检查所有数据
console.log($('#element').data());
// 输出: {info: "原始属性", value: 123, dynamicData: "动态添加的数据", tempValue: 456}

// 移除动态添加的数据
$('#element').removeData('dynamicData');
$('#element').removeData('tempValue');
$('#element').removeData('info');

// 检查剩余数据
console.log($('#element').data());
// 输出: {info: "原始属性", value: 123}
// HTML5 data-* 属性不受 removeData() 影响

只影响 jQuery 数据存储：
.removeData() 只移除通过 .data() 方法存储的数据，不会影响 HTML5 data-* 属性。
内存管理：
及时移除不再需要的数据可以帮助防止内存泄漏。
与 .data() 的配合：
.removeData() 通常与 .data() 方法配合使用，一个用于存储数据，一个用于清理数据。

CSS 操作

css()

$els.css()：(propertyName|properties,value?)，样式操作，用于获取或设置一个或多个 CSS 属性值。

$els.css()：(propertyName)，获取样式值（Getter）。
- propertyName：string，要获取值的 CSS 属性名称。支持驼峰式或连字符式。
- 返回：
- value：string，返回第一个元素的指定 CSS 属性的计算值（带单位）。如果集合为空，返回 undefined。
$els.css()：(propertyName, value)，设置单个样式（Setter）。
- propertyName：string，要设置的 CSS 属性名称。可以是驼峰式（camelCase）或连字符式（kebab-case）。
- value：string|number|(index,currentValue)=>string，要设置的属性值。
  - 如果是数字，jQuery 会自动添加 "px" 单位（除非该属性不需要单位）。
  - 如果是函数，可以返回要设置的值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.css()：(properties)，设置多个样式（Setter）。
- properties：object，一个包含键值对的对象，用于同时设置多个 CSS 属性。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取样式值（Getter）：

当传递一个参数时，.css() 获取第一个匹配元素的计算样式值。

// 获取第一个div的背景颜色
var bgColor = $('div').css('background-color');
console.log(bgColor); // 可能输出: "rgb(255, 0, 0)" 或 "red"

// 获取宽度（返回带单位的字符串，如 "100px"）
var width = $('div').css('width');
console.log(width);

// 使用驼峰式或连字符式都可以
var opacity1 = $('div').css('opacity');      // 连字符式
var opacity2 = $('div').css('backgroundColor'); // 驼峰式（更常见于JavaScript）

设置单个样式值（Setter）：

当传递两个参数时，.css() 为所有匹配元素设置指定的样式。

// 设置文本颜色
$('p').css('color', 'blue');

// 设置宽度（数字会自动添加"px"单位）
$('div').css('width', 200); // 设置为 "200px"

// 设置需要不同单位的属性
$('div').css('width', '50%');    // 百分比
$('div').css('font-size', '1.2em'); // em单位
$('div').css('opacity', 0.5);    // 无单位数值

// 使用函数动态设置值
$('div').css('width', function(index, currentWidth) {
  // 将每个div的宽度增加50%
  var currentValue = parseFloat(currentWidth);
  return currentValue * 1.5;
});

设置多个样式值（Setter）：

当传递一个对象时，.css() 可以一次性设置多个样式属性。

// 一次性设置多个样式
$('div').css({
  'background-color': 'yellow',
  'font-weight': 'bold',
  'border': '1px solid black',
  'opacity': 0.8
});

// 使用驼峰式属性名（更常见）
$('div').css({
  backgroundColor: 'yellow',
  fontWeight: 'bold',
  border: '1px solid black',
  opacity: 0.8
});

// 混合使用不同类型的值
$('div').css({
  width: 200,           // 数字 → 自动添加 "px"
  height: '100px',      // 带单位的字符串
  color: function(index, value) { // 函数
    return index % 2 === 0 ? 'red' : 'blue';
  }
});

~~核心特性~~：

获取的是计算值：
而不是在样式表中设置的值。这意味着：
- 它会返回实际渲染的值（如 100px 而不是 100）
- 它会解析相对值（如百分比、em等）
- 它会应用所有继承和层叠的样式规则

处理浏览器前缀

jQuery 会自动处理一些需要浏览器前缀的 CSS 属性。

// jQuery 会自动处理浏览器前缀
$('div').css('transform', 'rotate(45deg)');
// 实际可能会设置为: -webkit-transform, -moz-transform, -ms-transform, transform

获取值的限制：
.css() 只能获取第一个元素的值，如果需要所有元素的值，需要使用 .map() 或循环。
js
```
var allWidths = $('div').map(function() {
  return $(this).css('width');
}).get();
```
1
2
3
CSS权重：
通过 .css() 设置的样式具有最高优先级（相当于内联样式），会覆盖外部CSS和<style>标签中的样式。

width()

$els.width()：(value?)，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域宽度（不包含内边距、边框和外边距）。

$els.width()：()，获取宽度（Getter）。
- 返回：
- width：number，返回第一个元素的内容宽度，以像素为单位的数字（不包含单位）。如果集合为空，返回 null。
$els.width()：(value)，设置宽度（Setter）。
- value：number|string|(index,currentWidth)=>number，要设置的宽度值。
  - 如果是数字，jQuery 会自动添加 "px" 单位。
  - 字符串可以包含任何有效的CSS单位。
  - 函数可以返回要设置的宽度值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素宽度（Getter）：

当不传递参数时，.width() 获取第一个匹配元素的内容宽度。

// 获取第一个div的内容宽度（像素值，数字类型）
var divWidth = $('div').width();
console.log(divWidth); // 输出: 300 (数字，不是 "300px")

// 与 .css('width') 对比（带单位的字符串）
var cssWidth = $('div').css('width');
console.log(cssWidth); // 输出: "300px" (带单位的字符串)

// 实际应用：响应式布局判断
if ($('#sidebar').width() > 250) {
  $('#content').addClass('wide-layout');
} else {
  $('#content').removeClass('wide-layout');
}

设置元素宽度（Setter）

当传递一个参数时，.width() 为所有匹配元素设置宽度。

// 设置宽度为200像素（数字会自动添加"px"单位）
$('div').width(200); // 设置为 "200px"

// 使用字符串值（可以包含任何CSS单位）
$('div').width('50%');    // 设置为父元素宽度的50%
$('div').width('10em');   // 设置为10em
$('div').width('auto');   // 设置为自动宽度
$('div').width('100pt');  // 设置为100点

// 使用函数动态设置宽度
$('.column').width(function(index, currentWidth) {
  // 根据索引设置不同的宽度
  return 100 + (index * 50); // 第一列100px，第二列150px，第三列200px...
});

// 链式调用
$('div').width(100).addClass('narrow-column').fadeIn();

~~核心特性~~：

对比其他尺寸方法：

jQuery 提供了一系列相关的尺寸方法，理解它们的区别很重要：

方法	描述	计算内容
`.width()`	获取/设置内容宽度	仅内容区域
`.innerWidth()`	获取内容+内边距宽度	内容 + padding
`.outerWidth()`	获取内容+内边距+边框宽度	内容 + padding + border
`.outerWidth(true)`	获取内容+内边距+边框+外边距宽度	内容 + padding + border + margin

// 假设一个div有以下样式：
// width: 200px; padding: 15px; border: 3px solid; margin: 10px;

var width = $('div').width();         // 200 (仅内容)
var innerWidth = $('div').innerWidth(); // 230 (内容 + 左右内边距: 200 + 15 + 15)
var outerWidth = $('div').outerWidth(); // 236 (内容 + 左右内边距 + 左右边框: 200 + 30 + 6)
var outerWidthWithMargin = $('div').outerWidth(true); // 256 (加上左右外边距: 236 + 20)

对比 .css('width')：

特性	`.width()`	`.css('width')`
获取值	返回 `number` 类型的宽度值（不带单位）	返回 `string` 类型的宽度值（带单位）
设置值	传入 `number` 类型的值（不带单位）	需明确指定单位

// 获取值对比
var widthNum = $('div').width();     // 返回: 200 (数字)
var widthStr = $('div').css('width'); // 返回: "200px" (字符串)

// 设置值对比
$('div').width(200);          // 简洁，自动添加px
$('div').css('width', '200px'); // 需要明确指定单位

隐藏元素的宽度：

对于 display: none 的元素，.width() 返回 0。如果需要获取隐藏元素的潜在宽度，可以先临时显示它：

var $element = $('#hiddenElement');
var originalDisplay = $element.css('display');

$element.css('display', 'block'); // 临时显示
var width = $element.width();
$element.css('display', originalDisplay); // 获取宽度后，设置回去

盒子模型的影响：
.width() 总是返回内容宽度，不受 box-sizing 属性的影响。
性能考虑：获取元素尺寸会触发浏览器的重排（reflow），
1. 需避免在循环或频繁调用的函数中大量使用。
2. 如果需要多次获取同一元素的尺寸，应该缓存结果。

~~进阶示例~~：

处理窗口和文档宽度：

.width() 也可以用于获取窗口和文档的宽度：

// 获取视口（viewport）宽度
var windowWidth = $(window).width();

// 获取整个文档的宽度
var documentWidth = $(document).width();

// 响应式设计中的应用
function checkLayout() {
  if ($(window).width() < 768) {
    $('body').addClass('mobile-layout');
  } else {
    $('body').removeClass('mobile-layout');
  }
}

// 监听窗口大小变化
$(window).on('resize', checkLayout);

height()

$els.height()：(value?)，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域高度（不包含内边距、边框和外边距）。

$els.height()：()，获取高度（Getter）。
- 返回：
- height：number，返回第一个元素的内容高度，以像素为单位的数字（不包含单位）。如果集合为空，返回 null。
$els.height()：(value)，设置高度（Setter）。
- value：number|string|(index,currentWidth)=>number，要设置的高度值。
  - 如果是数字，jQuery 会自动添加 "px" 单位。
  - 字符串可以包含任何有效的CSS单位。
  - 函数可以返回要设置的高度值。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素高度（Getter）：

当不传递参数时，.height() 获取第一个匹配元素的内容高度。

// 获取第一个div的内容高度（像素值，数字类型）
var divHeight = $('div').height();
console.log(divHeight); // 输出: 150 (数字，不是 "150px")

// 与 .css('height') 对比（带单位的字符串）
var cssHeight = $('div').css('height');
console.log(cssHeight); // 输出: "150px" (带单位的字符串)

// 实际应用：根据元素高度做条件判断
if ($('#container').height() > 500) {
  $('#container').addClass('scrollable');
}

设置元素高度（Setter）：

当传递一个参数时，.height() 为所有匹配元素设置高度。

// 设置高度为200像素（数字会自动添加"px"单位）
$('div').height(200); // 设置为 "200px"

// 使用字符串值（可以包含任何CSS单位）
$('div').height('50%');    // 设置为父元素高度的50%
$('div').height('10em');   // 设置为10em
$('div').height('auto');   // 设置为自动高度
$('div').height('100pt');  // 设置为100点

// 使用函数动态设置高度
$('div').height(function(index, currentHeight) {
  // 将每个div的高度增加20%
  return currentHeight * 1.2;
});

// 链式调用
$('div').height(100).addClass('fixed-height').fadeIn();

~~核心特性~~：

对比其他尺寸方法：

jQuery 提供了一系列相关的尺寸方法，理解它们的区别很重要：

方法	描述	计算内容
`.height()`	获取/设置内容高度	仅内容区域
`.innerHeight()`	获取内容+内边距高度	内容 + padding
`.outerHeight()`	获取内容+内边距+边框高度	内容 + padding + border
`.outerHeight(true)`	获取内容+内边距+边框+外边距高度	内容 + padding + border + margin

// 假设一个div有以下样式：
// width: 100px; padding: 10px; border: 5px solid; margin: 15px;

var height = $('div').height();         // 100 (仅内容)
var innerHeight = $('div').innerHeight(); // 120 (内容 + 上下内边距: 100 + 10 + 10)
var outerHeight = $('div').outerHeight(); // 130 (内容 + 上下内边距 + 上下边框: 100 + 20 + 10)
var outerHeightWithMargin = $('div').outerHeight(true); // 160 (加上上下外边距: 130 + 30)

以下特性和 .width()一致：
1. 对比 .css('height')
2. 隐藏元素的宽度
3. 盒子模型的影响
4. 性能考虑
5. 处理窗口和文档高度：

innerWidth()

$els.innerWidth()：(value?)，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域宽度加上内边距的宽度（不包含边框和外边距）。

$els.innerWidth()：()，获取内部宽度（Getter）。
- 返回：
- innerWidth：number，返回第一个元素的内容宽度加上水平内边距，以像素为单位的数字（不包含单位）。如果集合为空，返回 null。
$els.innerWidth()：(value)，设置内部宽度（Setter） - 注意：此用法有限制。
- value：number|string|(index,currentWidth)=>string，要设置的内部宽度值。但需要注意，设置的是内容宽度，而不是内部宽度。
  - index：number，当前元素在集合中的索引。
  - currentWidth：number，元素的当前内部宽度（数字，不含单位）。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素内部宽度（Getter）：

当不传递参数时，.innerWidth() 获取第一个匹配元素的内容宽度加上水平内边距。

// 假设一个div有以下样式：
// width: 200px; padding: 15px; border: 3px solid; margin: 10px;

// 获取内部宽度（内容宽度 + 水平内边距）
var innerWidth = $('div').innerWidth();
console.log(innerWidth); // 输出: 230 (200 + 15 + 15)

// 与相关方法对比
var width = $('div').width();         // 200 (仅内容宽度)
var innerWidth = $('div').innerWidth(); // 230 (内容 + 水平内边距)
var outerWidth = $('div').outerWidth(); // 236 (内容 + 水平内边距 + 水平边框)

设置宽度（Setter） - 注意事项

虽然语法上支持，但需要理解其实际行为：

// 设置"内部宽度"为300像素（实际上设置的是内容宽度）
$('div').innerWidth(300);
// 实际效果：设置内容宽度为300px，保持内边距不变
// 元素的总宽度变为：300 + 左内边距 + 右内边距

// 但更推荐明确使用 .width() 来设置内容宽度
$('div').width(260); // 明确设置内容宽度

// 使用函数
$('div').innerWidth(function(index, currentInnerWidth) {
  return currentInnerWidth * 1.2; // 增加20%
});

~~核心特性~~：

隐藏元素的内部宽度：
- 对于 display: none 的元素，.innerWidth() 返回 0。
- 如果需要获取隐藏元素的潜在内部宽度，需要先临时显示它。
盒子模型的影响：
- .innerWidth() 的计算不受 box-sizing 属性的影响。
- 无论元素使用 content-box 还是 border-box 模型，.innerWidth() 都返回相同的结果。
设置操作的特殊性：
- 虽然 .innerWidth(value) 语法上可用，但实际上设置的是内容宽度。
- 推荐明确使用 .width() 来设置内容宽度，代码意图更清晰。
性能考虑：
- 获取元素尺寸会触发浏览器的重排（reflow），应避免在循环或频繁调用的函数中大量使用。
- 如果需要多次获取同一元素的尺寸，应该缓存结果。
响应式设计的核心：
- .innerWidth() 在响应式设计中非常重要，特别是用于检测视口宽度和容器宽度。

~~进阶示例~~：

计算内容宽度：

如果需要基于内部宽度计算内容宽度（考虑内边距）：

// 获取内部宽度和内边距
var innerWidth = $('div').innerWidth();
var paddingLeft = parseInt($('div').css('padding-left'), 10);
var paddingRight = parseInt($('div').css('padding-right'), 10);

// 计算内容宽度
var contentWidth = innerWidth - paddingLeft - paddingRight;
console.log('内容宽度:', contentWidth);

处理窗口的内部宽度：

.innerWidth() 也可以用于获取窗口的内部宽度（视口宽度）：

// 获取视口（viewport）的内部宽度
var windowInnerWidth = $(window).innerWidth();
console.log('视口宽度:', windowInnerWidth);

响应式设计的应用

// 响应式设计的应用
function adjustLayout() {
  var viewportWidth = $(window).innerWidth();
  
  if (viewportWidth >= 1200) {
    $('.container').removeClass('tablet mobile').addClass('desktop');
  } else if (viewportWidth >= 768) {
    $('.container').removeClass('desktop mobile').addClass('tablet');
  } else {
    $('.container').removeClass('desktop tablet').addClass('mobile');
  }
}

// 监听窗口大小变化
$(window).on('resize', adjustLayout);
// 初始调用
adjustLayout();

innerHeight()

$els.innerHeight()：(value?)，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域高度加上内边距的高度（不包含边框和外边距）。

$els.innerHeight()：()，获取内部高度（Getter）。
- 返回：
- innerHeight：number，返回第一个元素的内容高度加上垂直内边距，以像素为单位的数字（不包含单位）。如果集合为空，返回 null。
$els.innerHeight()：(value)，设置内部高度（Setter） - 注意：此用法有限制。
- value：number|string|(index,currentHeight)=>string，要设置的内部高度值。但需要注意，设置的是内容高度，而不是内部高度。
  - index：number，当前元素在集合中的索引。
  - currentHeight：number，元素的当前内部高度（数字，不含单位）。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素内部高度（Getter）：

当不传递参数时，.innerHeight() 获取第一个匹配元素的内容高度加上垂直内边距。

// 假设一个div有以下样式：
// height: 100px; padding: 20px; border: 5px solid; margin: 10px;

// 获取内部高度（内容高度 + 垂直内边距）
var innerHeight = $('div').innerHeight();
console.log(innerHeight); // 输出: 140 (100 + 20 + 20)

// 与相关方法对比
var height = $('div').height();         // 100 (仅内容高度)
var innerHeight = $('div').innerHeight(); // 140 (内容 + 垂直内边距)
var outerHeight = $('div').outerHeight(); // 150 (内容 + 垂直内边距 + 垂直边框)

设置高度（Setter） - 注意事项

虽然语法上支持，但需要理解其实际行为：

// 设置"内部高度"为200像素（实际上设置的是内容高度）
$('div').innerHeight(200);
// 实际效果：设置内容高度为200px，保持内边距不变
// 元素的总高度变为：200 + 上内边距 + 下内边距

// 但更推荐明确使用 .height() 来设置内容高度
$('div').height(160); // 明确设置内容高度

使用函数

// 使用函数
$('div').innerHeight(function(index, currentInnerHeight) {
  return currentInnerHeight * 1.1; // 增加10%
});

~~核心特性~~：特性类似 .innerWidth()

outerWidth()

$els.outerWidth()：(includeMargin?|value)，元素尺寸，用于获取匹配元素集合中第一个元素的内容宽度加上内边距和边框的宽度。通过可选参数，还可以包含外边距。

$els.outerWidth()：(includeMargin?)，获取外部宽度（Getter）。
- includeMargin?：boolean，默认：false，是否在计算中包含元素的外边距（margin）。
- 返回：
- outerWidth：number，返回第一个元素的内容宽度加上水平内边距和水平边框，以像素为单位的数字（不包含单位）。
  - 如果 includeMargin 为 true，则还包含水平外边距。
  - 如果集合为空，返回 null。
$els.outerWidth()：(value)，设置外部宽度（Setter） - 注意：此用法有限制。
- value：number|string|(index,currentOuterWidth)=>string，要设置的外部宽度值。但需要注意，设置的是内容宽度，而不是外部宽度。
  - index：number，当前元素在集合中的索引。
  - currentOuterWidth：number，元素的当前外部宽度（数字，不含单位）。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素外部宽度（Getter）：

当不传递参数或传递 false 时，.outerWidth() 获取第一个匹配元素的内容宽度加上水平内边距和水平边框。

// 假设一个div有以下样式：
// width: 200px; padding: 15px; border: 3px solid; margin: 10px;

// 获取外部宽度（内容宽度 + 水平内边距 + 水平边框）
var outerWidth = $('div').outerWidth();
console.log(outerWidth); // 输出: 236 (200 + 15 + 15 + 3 + 3)

// 包含外边距
var outerWidthWithMargin = $('div').outerWidth(true);
console.log(outerWidthWithMargin); // 输出: 256 (236 + 10 + 10)

// 与相关方法对比
var width = $('div').width();         // 200 (仅内容宽度)
var innerWidth = $('div').innerWidth(); // 230 (内容 + 水平内边距)
var outerWidth = $('div').outerWidth(); // 236 (内容 + 水平内边距 + 水平边框)
var outerWidthMargin = $('div').outerWidth(true); // 256 (包含水平外边距)

设置宽度（Setter） - 注意事项：

虽然语法上支持，但需要理解其实际行为：

// 设置"外部宽度"为300像素（实际上设置的是内容宽度）
$('div').outerWidth(300);
// 实际效果：设置内容宽度为300px，保持内边距和边框不变
// 元素的总宽度变为：300 + 左内边距 + 右内边距 + 左边框 + 右边框

// 但更推荐明确使用 .width() 来设置内容宽度
$('div').width(260); // 明确设置内容宽度

使用函数

// 使用函数
$('div').outerWidth(function(index, currentOuterWidth) {
  return currentOuterWidth * 1.1; // 增加10%
});

~~核心特性~~：特性类似 .innerWidth()

outerHeight()

$els.outerHeight()：(includeMargin?|value)，元素尺寸，用于获取匹配元素集合中第一个元素的内容高度加上内边距和边框的高度。通过可选参数，还可以包含外边距。

$els.outerHeight()：(includeMargin?)，获取外部高度（Getter）。
- includeMargin?：boolean，默认：false，是否在计算中包含元素的外边距（margin）。
- 返回：
- outerHeight：number，返回第一个元素的内容高度加上垂直内边距和垂直边框，以像素为单位的数字（不包含单位）。
  - 如果 includeMargin 为 true，则还包含垂直外边距。
  - 如果集合为空，返回 null。
$els.outerHeight()：(value)，设置外部高度（Setter） - 注意：此用法有限制。
- value：number|string|(index,currentOuterHeight)=>string，要设置的外部高度值。但需要注意，设置的是内容高度，而不是外部高度。
  - index：number，当前元素在集合中的索引。
  - currentOuterHeight：number，元素的当前外部高度（数字，不含单位）。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素外部高度（Getter）：

当不传递参数或传递 false 时，.outerHeight() 获取第一个匹配元素的内容高度加上垂直内边距和垂直边框。

// 假设一个div有以下样式：
// height: 100px; padding: 20px; border: 5px solid; margin: 10px;

// 获取外部高度（内容高度 + 垂直内边距 + 垂直边框）
var outerHeight = $('div').outerHeight();
console.log(outerHeight); // 输出: 150 (100 + 20 + 20 + 5 + 5)

// 包含外边距
var outerHeightWithMargin = $('div').outerHeight(true);
console.log(outerHeightWithMargin); // 输出: 170 (150 + 10 + 10)

// 与相关方法对比
var height = $('div').height();         // 100 (仅内容高度)
var innerHeight = $('div').innerHeight(); // 140 (内容 + 垂直内边距)
var outerHeight = $('div').outerHeight(); // 150 (内容 + 垂直内边距 + 垂直边框)
var outerHeightMargin = $('div').outerHeight(true); // 170 (包含垂直外边距)

设置高度（Setter） - 注意事项：

虽然语法上支持，但需要理解其实际行为：

// 设置"外部高度"为200像素（实际上设置的是内容高度）
$('div').outerHeight(200);
// 实际效果：设置内容高度为200px，保持内边距和边框不变
// 元素的总高度变为：200 + 上内边距 + 下内边距 + 上边框 + 下边框

// 但更推荐明确使用 .height() 来设置内容高度
$('div').height(160); // 明确设置内容高度

使用函数

// 使用函数
$('div').outerHeight(function(index, currentOuterHeight) {
  return currentOuterHeight * 1.1; // 增加10%
});

~~核心特性~~：特性类似 .innerWidth()

外边距折叠（Margin Collapse）：
- 需要注意 CSS 的外边距折叠特性，相邻元素的垂直外边距可能会折叠。
- .outerHeight(true) 返回的是元素自身的外边距，不考虑外边距折叠的效果。

offset()

$els.offset()：(coordinates?|fn?)，元素位置，用于获取或设置匹配元素集合中第一个元素相对于文档（document）的当前坐标。

$els.offset()：()，获取位置（Getter）。
- 返回：
- offset：{top,left}，返回第一个元素相对于文档的坐标（以像素为单位，不包含单位）。
  - 如果集合为空，返回 undefined。
$els.offset()：(coordinates|fn)，设置位置（Setter）
- coordinates：{top,left}，表示要设置的新坐标。
- fn：(index,currentOffset)=>coordinates，一个返回坐标对象的函数。该函数为每个元素调用，接收当前元素索引和当前偏移量作为参数。
  - index：number，当前元素在集合中的索引。
  - currentOffset：{top,left}，元素的当前偏移坐标对象（包含 top 和 left 属性）。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取元素位置（Getter）：

当不传递参数时，.offset() 获取第一个匹配元素相对于文档的当前位置。

// 获取元素相对于文档的坐标
var position = $('div').offset();
console.log('距离顶部: ' + position.top + 'px');
console.log('距离左侧: ' + position.left + 'px');

// 可以直接访问属性
var topPosition = $('div').offset().top;
var leftPosition = $('div').offset().left;

// 实际应用：滚动到元素位置
$('#scroll-to-element').click(function() {
  var offset = $('#target-element').offset();
  $('html, body').animate({
    scrollTop: offset.top - 50 // 留出50px的边距
  }, 500);
});

设置元素位置（Setter）：

当传递坐标对象或函数时，.offset() 为所有匹配元素设置新的位置。

// 设置元素的绝对位置
$('div').offset({ top: 100, left: 200 });

// 相对于当前位置进行偏移
$('div').offset(function(index, currentOffset) {
  return {
    top: currentOffset.top + 50,  // 下移50px
    left: currentOffset.left + 100 // 右移100px
  };
});

// 创建固定在屏幕上的元素
function stickElementToPosition($element, top, left) {
  $element.offset({ top: top, left: left });
}

// 使用示例
stickElementToPosition($('#fixed-element'), 50, 50);

~~核心特性~~：

对比 .position()：

理解 .offset() 和 .position() 的区别非常重要：

特性	`.offset()`	`.position()`
参考点	相对于文档（document）	相对于最近的定位父元素（positioned ancestor）
可设置性	可以设置新位置	不能设置新位置（只读）
包含外边距	包含元素的外边距	不包含元素的外边距
滚动影响	不受滚动位置影响（相对于文档固定）	受滚动位置影响

// 假设一个元素在可滚动的容器中
var offset = $('#element').offset();   // 相对于文档
var position = $('#element').position(); // 相对于最近的定位祖先

console.log('相对于文档: ', offset);
console.log('相对于定位祖先: ', position);

设置位置的要求：
要使用 .offset() 设置位置，元素必须具有 position: absolute, position: relative 或 position: fixed。
如果元素没有设置定位，jQuery 会自动将其设置为 position: relative。
滚动容器的影响：
.offset() 返回的是相对于文档的位置，不考虑滚动容器的偏移。
如果需要相对于滚动容器的位置，可以使用 .position() 或手动计算。

position()

$els.position()：()，元素位置，只读，用于获取匹配元素集合中第一个元素相对于偏移父元素（offset parent）的当前坐标。

返回：
position：{top,left}，返回第一个元素相对于偏移父元素的坐标（以像素为单位，不包含单位）。
- 如果集合为空，返回 undefined。

~~基本示例~~：

基本用法：

html

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 2px solid #ccc;
    margin: 20px;
    padding: 10px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #333;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container">
  <div class="box" id="myBox">内容</div>
</div>

<script>
$(document).ready(function() {
  var position = $('.box').position();
  console.log('Top: ' + position.top + 'px');  // 输出: Top: 50px
  console.log('Left: ' + position.left + 'px'); // 输出: Left: 100px
  
  // 在页面上显示位置信息
  $('.box').text('位置: ' + position.left + 'px, ' + position.top + 'px');
});
</script>

</body>
</html>

动态计算元素位置：

// 计算元素在容器中的居中位置
function centerElement(element, container) {
  var containerPos = $(container).position();
  var containerWidth = $(container).width();
  var containerHeight = $(container).height();
  var elementWidth = $(element).width();
  var elementHeight = $(element).height();
  
  var top = containerPos.top + (containerHeight - elementHeight) / 2;
  var left = containerPos.left + (containerWidth - elementWidth) / 2;
  
  return { top: top, left: left };
}

// 使用示例
var centeredPos = centerElement('#myElement', '#container');
$('#myElement').css({
  position: 'absolute',
  top: centeredPos.top + 'px',
  left: centeredPos.left + 'px'
});

~~核心特性~~：

对比 .offset()：

理解 .offset() 和 .position() 的区别非常重要：

特性	`.offset()`	`.position()`
参考点	相对于文档（document）	相对于最近的定位父元素（positioned ancestor）
可设置性	可以设置新位置	不能设置新位置（只读）
包含外边距	包含元素的外边距	不包含元素的外边距
滚动影响	不受滚动位置影响（相对于文档固定）	受滚动位置影响

// 假设一个元素在可滚动的容器中
var offset = $('#element').offset();   // 相对于文档
var position = $('#element').position(); // 相对于最近的定位祖先

console.log('相对于文档: ', offset);
console.log('相对于定位祖先: ', position);

偏移父元素:
偏移父元素是指最近的定位祖先元素（position 值为 relative、absolute、fixed 或 sticky 的元素）。如果没有这样的元素，则偏移父元素是 <body>。
隐藏元素: 如果元素是隐藏的（display: none），.position() 返回的值可能不准确或为 {top: 0, left: 0}。
边框和边距: .position() 返回的值不包括元素的边框和边距，但包括滚动条的位置（如果存在）。
性能考虑: 频繁调用 .position() 可能会影响性能，因为它需要浏览器重新计算布局。

scrollTop()

$els.scrollTop()：(value?)，元素位置，用于获取或设置匹配元素集合中第一个元素的垂直滚动条位置。

$els.scrollTop()：()，获取滚动位置（Getter）。
- 返回：
- scrollTop：number，返回第一个元素的当前垂直滚动位置（以像素为单位，不包含单位）。
  - 如果元素不可滚动或集合为空，返回 0。
$els.scrollTop()：(value)，设置滚动位置（Setter）。
- value：number，要设置的垂直滚动位置（像素值）。不接受函数参数、字符串参数。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

获取滚动位置（Getter）：

当不传递参数时，.scrollTop() 获取第一个匹配元素的当前垂直滚动位置。

// 获取元素的当前滚动位置
var scrollPosition = $('#scrollable-div').scrollTop();
console.log('当前滚动位置: ' + scrollPosition + 'px');

// 获取窗口的滚动位置
var windowScrollPosition = $(window).scrollTop();
console.log('窗口滚动位置: ' + windowScrollPosition + 'px');

// 实际应用：检测用户滚动距离
$(window).on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > 500) {
    $('#back-to-top').fadeIn();
  } else {
    $('#back-to-top').fadeOut();
  }
});

设置滚动位置（Setter）：

当传递一个数字参数时，.scrollTop() 为所有匹配元素设置垂直滚动位置。

// 设置元素滚动到特定位置
$('#scrollable-div').scrollTop(200); // 滚动到200px位置

// 滚动到元素底部
function scrollToBottom($element) {
  $element.scrollTop($element[0].scrollHeight);
}

// 滚动到元素顶部
function scrollToTop($element) {
  $element.scrollTop(0);
}

// 相对滚动（在当前基础上增加/减少）
$('#scrollable-div').scrollTop($('#scrollable-div').scrollTop() + 100); // 向下滚动100px

// 链式调用
$('#scrollable-div')
  .scrollTop(100)
  .addClass('scrolled');

~~核心特性~~：

性能考虑：

滚动事件会频繁触发，应避免在滚动处理函数中执行昂贵的操作。
使用防抖（debounce）或节流（throttle）技术优化滚动事件处理：

// 简单的节流实现
var scrollTimeout;
$(window).on('scroll', function() {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function() {
    // 你的滚动处理代码
  }, 100);
});

动画效果：
- 直接使用 .scrollTop(value) 会立即跳转到指定位置。
- 使用 .animate({ scrollTop: value }) 可以创建平滑的滚动动画。
不可滚动元素：
- 对不可滚动的元素调用 .scrollTop() 会返回 0。
- 设置不可滚动元素的 .scrollTop() 不会有任何效果。
与CSS的配合：
可以使用CSS的 scroll-behavior: smooth 属性实现平滑滚动，但jQuery的 .animate() 提供更多控制选项。

DOM 操作

append()

$els.append()：(content|fn,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部末尾插入指定的内容。

$els.append()：(content,...content?)，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.append()：(fn)，使用函数插入内容。
- fn：(index,currentHTML)=>content，一个返回要插入内容的函数。该函数为每个元素调用。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：插入各种类型的内容：

.append() 可以接受多种类型的内容参数：

// 插入HTML字符串
$('#container').append('<div class="new-item">新项目</div>');

// 插入DOM元素
var newElement = document.createElement('p');
newElement.textContent = '新创建的段落';
$('#container').append(newElement);

// 插入文本内容
$('#container').append('纯文本内容');

// 插入jQuery对象
var $newItem = $('<span>').text('动态创建的内容');
$('#container').append($newItem);

// 插入多个内容
$('#container').append(
  '<h3>标题</h3>',
  '<p>段落内容</p>',
  $('<button>').text('按钮')
);

使用函数动态生成内容：

当传递一个函数时，.append() 可以为每个匹配元素动态生成不同的内容：

// 根据索引生成不同内容
$('.item').append(function(index) {
  return '<span class="badge">' + (index + 1) + '</span>';
});

// 基于当前内容生成新内容
$('.content-block').append(function(index, currentHTML) {
  if (currentHTML.length > 100) {
    return '<div class="read-more">阅读更多...</div>';
  }
  return '';
});

// 基于数据属性生成内容
$('.user-card').append(function() {
  var userId = $(this).data('user-id');
  return '<button data-follow="' + userId + '">关注</button>';
});

~~核心特性~~：

对比相关方法：

理解 .append() 的关键在于将其与其他插入方法进行对比：

方法	描述	插入位置	示例
`.append()`	在元素内部末尾插入内容	作为最后一个子元素	`$('#div').append('<p>内容</p>')`
`.prepend()`	在元素内部开头插入内容	作为第一个子元素	`$('#div').prepend('<p>内容</p>')`
`.after()`	在元素之后插入内容	作为下一个兄弟元素	`$('#div').after('<p>内容</p>')`
`.before()`	在元素之前插入内容	作为上一个兄弟元素	`$('#div').before('<p>内容</p>')`

html

// 对比不同插入方法
<!-- .before() 会插入在这里 -->
<div id="container">
  <!-- .prepend() 会插入在这里 -->
  现有内容
  <!-- .append() 会插入在这里 -->
</div>
<!-- .after() 会插入在这里 -->

移动而非复制：如果插入的内容是页面上已经存在的元素，该元素会被移动到新位置，而不是被复制。
性能考虑：对大量元素使用 .append() 可能会影响性能，在这种情况下，可以考虑使用文档片段（DocumentFragment）优化。
HTML 字符串解析：传入 HTML 字符串时，jQuery 会解析它并创建相应的 DOM 元素。要注意字符串中的特殊字符转义。
事件处理：插入的新元素不会自动继承原有的事件处理程序，除非使用事件委托。

prepend()

$els.prepend()：(content|fn,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部开头插入指定的内容。

$els.prepend()：(content,...content?)，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.prepend()：(fn)，使用函数插入内容。
- fn：(index,currentHTML)=>content，一个返回要插入内容的函数。该函数为每个元素调用。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：插入各种类型的内容：

.prepend() 可以接受多种类型的内容参数，插入到元素的开始位置：

// 插入HTML字符串
$('#container').prepend('<div class="new-item">新项目（插入到开头）</div>');

// 插入DOM元素
var newElement = document.createElement('p');
newElement.textContent = '新创建的段落（插入到开头）';
$('#container').prepend(newElement);

// 插入文本内容
$('#container').prepend('纯文本内容（插入到开头）');

// 插入jQuery对象
var $newItem = $('<span>').text('动态创建的内容（插入到开头）');
$('#container').prepend($newItem);

// 插入多个内容
$('#container').prepend(
  '<h3>标题（插入到开头）</h3>',
  '<p>段落内容</p>',
  $('<button>').text('按钮')
);

使用函数动态生成内容：

当传递一个函数时，.prepend() 可以为每个匹配元素动态生成不同的内容：

// 根据索引生成不同内容
$('.item').prepend(function(index) {
  return '<span class="position">位置: ' + (index + 1) + '</span>';
});

// 基于当前内容生成新内容
$('.content-block').prepend(function(index, currentHTML) {
  var wordCount = currentHTML.split(' ').length;
  return '<div class="word-count">字数: ' + wordCount + '</div>';
});

// 基于数据属性生成内容
$('.user-card').prepend(function() {
  var isAdmin = $(this).data('admin');
  return isAdmin ? '<span class="admin-badge">管理员</span>' : '';
});

~~核心特性~~：

对比相关方法：

理解 .prepend() 的关键在于将其与其他插入方法进行对比：

方法	描述	插入位置	示例
`.append()`	在元素内部末尾插入内容	作为最后一个子元素	`$('#div').append('<p>内容</p>')`
`.prepend()`	在元素内部开头插入内容	作为第一个子元素	`$('#div').prepend('<p>内容</p>')`
`.after()`	在元素之后插入内容	作为下一个兄弟元素	`$('#div').after('<p>内容</p>')`
`.before()`	在元素之前插入内容	作为上一个兄弟元素	`$('#div').before('<p>内容</p>')`

html

// 对比不同插入方法
<!-- .before() 会插入在这里 -->
<div id="container">
  <!-- .prepend() 会插入在这里 -->
  现有内容
  <!-- .append() 会插入在这里 -->
</div>
<!-- .after() 会插入在这里 -->

移动而非复制：如果插入的内容是页面上已经存在的元素，该元素会被移动到新位置，而不是被复制。
性能考虑：对大量元素使用 .prepend() 可能会影响性能，在这种情况下，可以考虑使用文档片段（DocumentFragment）优化。
HTML 字符串解析：传入 HTML 字符串时，jQuery 会解析它并创建相应的 DOM 元素。要注意字符串中的特殊字符转义。
事件处理：插入的新元素不会自动继承原有的事件处理程序，除非使用事件委托。

after()

$els.after()：(content|fn,...content?)，DOM 插入，用于在匹配元素集合中的每个元素后面插入指定的内容。

$els.after()：(content,...content?)，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.after()：(fn)，使用函数插入内容。
- fn：(index,currentHTML)=>content，一个返回要插入内容的函数。该函数为每个元素调用。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：插入各种类型的内容：

.after() 可以接受多种类型的内容参数：

// 插入HTML字符串
$('#container').after('<div class="new-item">新项目</div>');

// 插入DOM元素
var newElement = document.createElement('p');
newElement.textContent = '新创建的段落';
$('#container').after(newElement);

// 插入文本内容
$('#container').after('纯文本内容');

// 插入jQuery对象
var $newItem = $('<span>').text('动态创建的内容');
$('#container').after($newItem);

// 插入多个内容
$('#container').after(
  '<h3>标题</h3>',
  '<p>段落内容</p>',
  $('<button>').text('按钮')
);

使用函数动态生成内容：

当传递一个函数时，.after() 可以为每个匹配元素动态生成不同的内容：

// 使用函数返回要插入的内容
$('li').after(function(index) {
  // 为每个 li 元素后插入分隔线
  return '<hr class="separator-' + index + '">';
});

~~核心特性~~：

对比相关方法：

理解 .after() 的关键在于将其与其他插入方法进行对比：

方法	描述	插入位置	示例
`.append()`	在元素内部末尾插入内容	作为最后一个子元素	`$('#div').append('<p>内容</p>')`
`.prepend()`	在元素内部开头插入内容	作为第一个子元素	`$('#div').prepend('<p>内容</p>')`
`.after()`	在元素之后插入内容	作为下一个兄弟元素	`$('#div').after('<p>内容</p>')`
`.before()`	在元素之前插入内容	作为上一个兄弟元素	`$('#div').before('<p>内容</p>')`

html

// 对比不同插入方法
<!-- .before() 会插入在这里 -->
<div id="container">
  <!-- .prepend() 会插入在这里 -->
  现有内容
  <!-- .append() 会插入在这里 -->
</div>
<!-- .after() 会插入在这里 -->

移动而非复制：如果插入的内容是页面上已经存在的元素，该元素会被移动到新位置，而不是被复制。
性能考虑：对大量元素使用 .after() 可能会影响性能，在这种情况下，可以考虑使用文档片段（DocumentFragment）优化。
HTML 字符串解析：传入 HTML 字符串时，jQuery 会解析它并创建相应的 DOM 元素。要注意字符串中的特殊字符转义。
事件处理：插入的新元素不会自动继承原有的事件处理程序，除非使用事件委托。

before()

$els.before()：(content|fn,...content?)，DOM 插入，用于在匹配元素集合中的每个元素前面插入指定的内容。

$els.before()：(content,...content?)，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.before()：(fn)，使用函数插入内容。
- fn：(index,currentHTML)=>content，一个返回要插入内容的函数。该函数为每个元素调用。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本用法：插入各种类型的内容：

.before() 可以接受多种类型的内容参数，插入到元素的开始位置：

html

<div class="container">
  <p id="target">我是目标段落</p>
</div>

// 插入 HTML 字符串
$('#target').before('<h2>新插入的标题</h2>');

// 插入 DOM 元素
var newDiv = document.createElement('div');
newDiv.className = 'new-div';
newDiv.textContent = '新创建的 div';

$('#target').before(newDiv);

// 插入 jQuery 对象
var $newElement = $('<span>').addClass('highlight').text('高亮文本');
$('#target').before($newElement);
// 注意：如果 $newElement 是页面上已存在的元素，它会被移动到新位置

// 插入文本内容
$('#target').before('普通文本内容 ');

// 插入多个内容
$('#target').before(
  '<div>第一项</div>',
  '<div>第二项</div>',
  document.createElement('hr')
);

// 链式操作
$('#target')
  .before('<div>前置内容</div>')
  .addClass('highlight')
  .css('color', 'red');

使用函数动态生成内容：

当传递一个函数时，.before() 可以为每个匹配元素动态生成不同的内容：

$('li').before(function(index) {
  // 为每个 li 元素前插入带有序号的内容
  return '<span class="number">' + (index + 1) + '. </span>';
});

~~核心特性~~：

对比相关方法：

理解 .before() 的关键在于将其与其他插入方法进行对比：

方法	描述	插入位置	示例
`.append()`	在元素内部末尾插入内容	作为最后一个子元素	`$('#div').append('<p>内容</p>')`
`.prepend()`	在元素内部开头插入内容	作为第一个子元素	`$('#div').prepend('<p>内容</p>')`
`.after()`	在元素之后插入内容	作为下一个兄弟元素	`$('#div').after('<p>内容</p>')`
`.before()`	在元素之前插入内容	作为上一个兄弟元素	`$('#div').before('<p>内容</p>')`

html

// 对比不同插入方法
<!-- .before() 会插入在这里 -->
<div id="container">
  <!-- .prepend() 会插入在这里 -->
  现有内容
  <!-- .append() 会插入在这里 -->
</div>
<!-- .after() 会插入在这里 -->

移动而非复制：如果插入的内容是页面上已经存在的元素，该元素会被移动到新位置，而不是被复制。
性能考虑：对大量元素使用 .before() 可能会影响性能，在这种情况下，可以考虑使用文档片段（DocumentFragment）优化。
HTML 字符串解析：传入 HTML 字符串时，jQuery 会解析它并创建相应的 DOM 元素。要注意字符串中的特殊字符转义。
事件处理：插入的新元素不会自动继承原有的事件处理程序，除非使用事件委托。

appendTo()

$els.appendTo()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的内部末尾。

target：Selector|Element|Array|jQuery，表示要将元素插入到的目标位置。
- 可以是一个选择器、DOM元素、元素数组或jQuery对象
返回：
$els：jQuery，返回被插入的元素的 jQuery 对象（即原始选择器匹配的元素），而不是目标元素。支持链式操作。

~~基本示例~~：

基本用法：将元素插入到目标中：

.appendTo() 的核心功能是将元素插入到指定目标的内部末尾。

// 创建新元素并插入到目标中
$('<p>新创建的段落</p>').appendTo('#container');

// 移动现有元素到新位置
$('.item-to-move').appendTo('#new-container');

// 插入到多个目标中（元素会被复制）
$('<span>每个容器都有我</span>').appendTo('.multiple-containers');

// 使用选择器作为目标
$('#source-element').appendTo('#target-container');

移动 vs 复制行为：

// 移动现有元素
var $item = $('#item-1');
$item.appendTo('#new-container'); // 从原位置移动到现在位置

// 克隆元素后再插入（保留原元素）
$item.clone().appendTo('#another-container'); // 原元素保留，插入的是副本

// 插入到多个目标（自动复制）
$('<div>重复内容</div>').appendTo('.all-containers'); // 插入到所有匹配的容器

~~核心特性~~：

对比 append()：

两种方法实现相同效果，但语法不同

方法	语法	操作方向	返回对象
`.append()`	`$(target).append(content)`	目标.append(内容)	目标元素
`.appendTo()`	`$(content).appendTo(target)`	内容.appendTo(目标)	被插入的内容

// 两种方法实现相同效果，但语法不同

// 使用 .append() - 以目标为主体
$('#container').append('<p>新段落</p>');

// 使用 .appendTo() - 以内容为主体
$('<p>新段落</p>').appendTo('#container');

// 两种方法最终的DOM结果相同：
// <div id="container"><p>新段落</p></div>

prependTo()

$els.prependTo()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的内部开头。

target：Selector|Element|Array|jQuery，表示要将元素插入到的目标位置。
- 可以是一个选择器、DOM元素、元素数组或jQuery对象
返回：
$els：jQuery，返回被插入的元素的 jQuery 对象（即原始选择器匹配的元素），而不是目标元素。支持链式操作。

~~基本示例~~：

基本用法：插入各种类型的目标元素：

html

<div id="container">
  <p>已有段落</p>
</div>
<div class="item">要移动的项目</div>

// 插入到指定选择器匹配的元素中
$('.item').prependTo('#container');

// 使用 DOM 元素作为目标
var targetElement = document.getElementById('container');
$('.item').prependTo(targetElement);

html

// 插入到多个目标元素中
<div class="target">目标1</div>
<div class="target">目标2</div>
<div class="content">要插入的内容</div>

<script>
// 将内容插入到所有 .target 元素的开头
$('.content').prependTo('.target');
</script>

// 链式操作 - 注意返回值是被插入的元素
$('<span>')
  .text('提示文本')
  .addClass('hint')
  .prependTo('#message-box')
  .fadeIn(1000); // 这里的链式操作是针对被插入的span元素

~~核心特性~~：

对比 prepend()：

两种方法实现相同效果，但语法不同

方法	语法	操作方向	返回对象
`.prepend()`	`$(target).prepend(content)`	目标.prepend(内容)	目标元素
`.prependTo()`	`$(content).prependTo(target)`	内容.prependTo(目标)	被插入的内容

// 两种方法实现相同效果，但语法不同

// 使用 .prepend() - 以目标为主体
$('#container').prepend('<p>新段落</p>');

// 使用 .prependTo() - 以内容为主体
$('<p>新段落</p>').prependTo('#container');

// 两种方法最终的DOM结果相同：
// <div id="container"><p>新段落</p></div>

insertAfter()

$els.insertAfter()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的后面。

target：Selector|Element|Array|jQuery，表示要将元素插入到的目标位置。
- 可以是一个选择器、DOM元素、元素数组或jQuery对象
返回：
$els：jQuery，返回被插入的元素的 jQuery 对象（即原始选择器匹配的元素），而不是目标元素。支持链式操作。

~~基本示例~~：

基本用法：插入各种类型的目标元素：

html

<div id="container">
  <p>已有段落</p>
  <div class="item">要移动的项目</div>
</div>

// 插入到指定选择器匹配的元素中
$('.item').insertAfter('#container');

// 使用 DOM 元素作为目标
var targetElement = document.getElementById('container');
$('.item').insertAfter(targetElement);

html

// 插入到多个目标元素中
<div class="content">要插入的内容</div>
<div class="target">目标1</div>
<div class="target">目标2</div>

<script>
// 将内容插入到所有 .target 元素的开头
$('.content').insertAfter('.target');
</script>

// 链式操作 - 注意返回值是被插入的元素
$('<span>')
  .text('提示文本')
  .addClass('hint')
  .insertAfter('#message-box')
  .fadeIn(1000); // 这里的链式操作是针对被插入的span元素

~~核心特性~~：

对比 after()：

两种方法实现相同效果，但语法不同

方法	语法	操作方向	返回对象
`.after()`	`$(target).after(content)`	目标.after(内容)	目标元素
`.insertAfter()`	`$(content).insertAfter(target)`	内容.insertAfter(目标)	被插入的内容

// 两种方法实现相同效果，但语法不同

// 使用 .after() - 以目标为主体
$('#container').after('<p>新段落</p>');

// 使用 .insertAfter() - 以内容为主体
$('<p>新段落</p>').insertAfter('#container');

// 两种方法最终的DOM结果相同：
// <div id="container"><p>新段落</p></div>

insertBefore()

$els.insertBefore()：(target)，DOM 插入，用于将匹配元素集合中的每个元素插入到指定目标元素的前面。

target：Selector|Element|Array|jQuery，表示要将元素插入到的目标位置。
- 可以是一个选择器、DOM元素、元素数组或jQuery对象
返回：
$els：jQuery，返回被插入的元素的 jQuery 对象（即原始选择器匹配的元素），而不是目标元素。支持链式操作。

~~基本示例~~：

基本用法：插入各种类型的目标元素：

html

<div id="container">
  <p>已有段落</p>
  <div class="item">要移动的项目</div>
</div>

// 插入到指定选择器匹配的元素中
$('.item').insertBefore('#container');

// 使用 DOM 元素作为目标
var targetElement = document.getElementById('container');
$('.item').insertBefore(targetElement);

html

// 插入到多个目标元素中
<div class="target">目标1</div>
<div class="target">目标2</div>
<div class="content">要插入的内容</div>

<script>
// 将内容插入到所有 .target 元素的开头
$('.content').insertBefore('.target');
</script>

// 链式操作 - 注意返回值是被插入的元素
$('<span>')
  .text('提示文本')
  .addClass('hint')
  .insertBefore('#message-box')
  .fadeIn(1000); // 这里的链式操作是针对被插入的span元素

~~核心特性~~：

对比 before()：

两种方法实现相同效果，但语法不同

方法	语法	操作方向	返回对象
`.before()`	`$(target).before(content)`	目标.before(内容)	目标元素
`.insertBefore()`	`$(content).insertBefore(target)`	内容.insertBefore(目标)	被插入的内容

// 两种方法实现相同效果，但语法不同

// 使用 .before() - 以目标为主体
$('#container').before('<p>新段落</p>');

// 使用 .insertBefore() - 以内容为主体
$('<p>新段落</p>').insertBefore('#container');

// 两种方法最终的DOM结果相同：
// <div id="container"><p>新段落</p></div>

remove()

$els.remove()：(selector?)，DOM 移除，用于从 DOM 中移除匹配元素集合中的所有元素，包括这些元素上的所有事件处理程序和 jQuery 数据。

$els.remove()：()，移除所有匹配元素。
$els.remove()：(selector?)，移除匹配特定选择器的元素。
- selector?：string，一个选择器表达式，用于筛选要移除的元素。
返回：
$els：jQuery，返回被移除的元素的 jQuery 对象（即原始选择器匹配的元素）。支持链式操作。

~~基本示例~~：

基本用法：移除元素：

// 移除所有匹配元素
$('.item-to-remove').remove();

// 链式调用（注意：元素已从DOM移除，但仍在jQuery对象中）
$('.element')
  .remove()
  .addClass('removed') // 仍然可以操作，但不在DOM中
  .appendTo('#removed-container'); // 可以重新插入到其他地方

使用选择器筛选要移除的元素：

// 移除所有div，但只移除那些有highlighted类的
$('div').remove('.highlighted');

// 移除所有段落，但只移除可见的
$('p').remove(':visible');

// 移除所有列表项，但只移除奇数位置的
$('li').remove(':even');

// 复杂的筛选条件
$('.user').remove('[data-status="inactive"]');

~~核心特性~~：

对比相关方法：

方法	描述	移除内容	保留数据和事件	返回值
`.remove()`	从DOM中移除元素	元素本身及其所有后代	❌ 不保留	被移除的元素
`.detach()`	从DOM中移除元素	元素本身及其所有后代	✅ 保留	被移除的元素
`.empty()`	清空元素内容	只移除所有子元素	❌ 不保留	原始元素（已清空）

// .remove() vs .detach() vs .empty() 示例
var $container = $('#container');

// .remove() - 完全移除，不保留数据和事件
$('.item').remove();

// .detach() - 移除但保留数据和事件，可以重新插入
var $detached = $('.item').detach();
// 之后可以重新插入
$detached.appendTo($container);

// .empty() - 只移除子内容，保留元素本身
$container.empty(); // 移除#container内的所有子元素

会移除事件处理程序和数据：

.remove() 会同时移除元素上的所有 jQuery 事件处理程序和数据
如果需要保留事件处理程序和数据以便重新插入，使用 .detach() 代替

// 使用 .remove() - 事件处理程序会被移除
$('#button').on('click', function() { alert('点击!'); });
$('#button').remove();
// 如果重新插入，点击事件不会工作

// 使用 .detach() - 事件处理程序会保留
$('#button').on('click', function() { alert('点击!'); });
var $button = $('#button').detach();
$button.appendTo('body'); // 点击事件仍然工作

empty()

$els.empty()：()，DOM 移除，用于移除匹配元素集合中每个元素的所有子节点（包括文本节点和元素节点），但保留元素本身。

返回：
$els：jQuery，返回原始的 jQuery 对象（即被清空的元素），支持链式调用。

~~基本示例~~：

基本用法：清空元素内容：

.empty() 会移除元素的所有子节点，但保留元素本身及其属性。

// 清空单个元素
$('#container').empty();

// 清空多个元素
$('.content-block').empty();

// 链式调用
$('#form-container')
  .empty()
  .addClass('cleared')
  .append('<p>内容已清空</p>');

~~核心特性~~：

对比相关方法：

方法	描述	移除内容	保留数据和事件	返回值
`.remove()`	从DOM中移除元素	元素本身及其所有后代	❌ 不保留	被移除的元素
`.detach()`	从DOM中移除元素	元素本身及其所有后代	✅ 保留	被移除的元素
`.empty()`	清空元素内容	只移除所有子元素	❌ 不保留	原始元素（已清空）

// .remove() vs .detach() vs .empty() 示例
var $container = $('#container');

// .remove() - 完全移除，不保留数据和事件
$('.item').remove();

// .detach() - 移除但保留数据和事件，可以重新插入
var $detached = $('.item').detach();
// 之后可以重新插入
$detached.appendTo($container);

// .empty() - 只移除子内容，保留元素本身
$container.empty(); // 移除#container内的所有子元素

对比 .html('')：

.empty() 和 .html('') 在功能上类似，但有一些区别
.empty() 是更专门的方法，性能稍好，且会清理 jQuery 数据

// 两种方法效果类似，但.empty()是更专门的方法
$('#container').empty();    // 推荐方式
$('#container').html('');   // 替代方式

// .empty() 还会清理子元素的 jQuery 数据，而 .html('') 不会

事件处理的影响：

清空元素会移除所有子元素，包括它们的事件处理程序
使用事件委托可以避免这个问题

// 直接绑定的事件会被移除
$('#container button').on('click', function() {
  // 这个事件处理程序在.empty()后会被移除
});

// 事件委托不受.empty()影
$(document).on('click', '#container button', function() {
  // 这个事件处理程序不受.empty()影响
});

$('#container').empty(); // 清空内容
$('#container').append('<button>新按钮</button>'); // 新按钮仍然会触发事件

replaceAll()

$els.replaceAll()：(target)，DOM 替换，使用当前选中的元素来替换所有指定的目标元素。

target：string|Element|Text|array|jQuery，指定要被替换的目标元素或元素集合。
返回：
$els：jQuery，返回包含用于替换的元素的 jQuery 对象。

~~基本示例~~：

用元素替换指定选择器匹配的元素：

html

<div class="container">
  <p id="target">要被替换的段落</p>
  <div>其他内容</div>
</div>
<div class="replacement">替换内容</div>

<script>
// 用 .replacement 元素替换 #target 元素
$('.replacement').replaceAll('#target');

// 结果：
// <div class="container">
//   <div class="replacement">替换内容</div>
//   <div>其他内容</div>
// </div>
</script>

替换多个目标元素：

html

<div class="target">目标1</div>
<div class="target">目标2</div>
<div class="replacement">替换内容</div>

<script>
// 用内容替换所有 .target 元素
$('.replacement').replaceAll('.target');

// 结果：
// <div class="replacement">替换内容</div>
// <div class="replacement">替换内容</div>
</script>

使用 DOM 元素作为目标：

// 获取DOM元素作为目标
var targetElement = document.getElementById('target');

// 用元素替换DOM元素
$('.replacement').replaceAll(targetElement);

链式操作：

// 创建新元素并直接替换目标
$('<div>').addClass('new-item').text('新内容').replaceAll('#target');

// 链式操作 - 注意返回值是用于替换的元素
$('<span>')
  .text('新文本')
  .addClass('highlight')
  .replaceAll('#target')
  .fadeIn(1000); // 这里的链式操作是针对用于替换的span元素

~~核心特性~~：

对比 .replaceWith()：

二者实现相同的功能，但语法结构相反：

方法	语法	返回值	描述
`.replaceWith()`	`$(target).replaceWith(content)`	被替换元素的 jQuery 对象	用内容替换目标元素
`.replaceAll()`	`$(content).replaceAll(target)`	替换内容的 jQuery 对象	用当前元素替换目标元素

// 这两种方式效果相同
$('#target').replaceWith($('.replacement'));    // 使用 .replaceWith()
$('.replacement').replaceAll('#target');        // 使用 .replaceAll()

移动而非复制：如果用于替换的元素已经存在于文档中，它会被移动到新位置，而不是被复制。
多个目标元素：当目标选择器匹配多个元素时，用于替换的元素会被复制并替换每个目标元素（第一个实例是移动，后续的是克隆）。
事件处理：
- 被移动的元素会保留其事件处理程序。
- 被替换的元素及其事件处理程序会被完全移除。
数据和方法：被替换的元素上的 jQuery 数据和自定义方法会被移除。

replaceWith()

$els.replaceWith()：(newContent|fn)，DOM 替换，用指定的内容替换匹配的元素集合中的每个元素。返回被移除的元素集合。

$els.replaceWith()：(newContent)，替换内容。
- newContent：string|Element|Text|array|jQuery，用来替换目标元素的内容。
$els.replaceWith()：(fn)，使用函数替换内容。
- fn：(index,currentHTML)，一个返回要替换内容的函数。该函数为每个元素调用。
  - index：index，当前元素的索引。
  - currentHTML：string，当前的 HTML 内容。
返回：
$els：jQuery，返回原始的 jQuery 对象（即被替换的元素集合），该对象已经从 DOM 中移除，支持链式调用。

~~基本示例~~：

用 HTML 字符串替换元素：

html

<div class="container">
  <p id="old-paragraph">这个段落将被替换</p>
  <div>其他内容</div>
</div>

<script>
// 用新的 HTML 内容替换段落
$('#old-paragraph').replaceWith('<div class="new-content"><h2>新标题</h2><p>新段落内容</p></div>');

// 结果：
// <div class="container">
//   <div class="new-content"><h2>新标题</h2><p>新段落内容</p></div>
//   <div>其他内容</div>
// </div>
</script>

用 DOM 元素替换：

// 创建一个新的 div 元素
var newDiv = document.createElement('div');
newDiv.className = 'new-element';
newDiv.textContent = '新创建的元素';

// 用新元素替换目标元素
$('#target-element').replaceWith(newDiv);

用 jQuery 对象替换：

// 创建一个 jQuery 对象
var $newContent = $('<span>').addClass('highlight').text('高亮内容');

// 用 jQuery 对象替换目标元素
$('.old-element').replaceWith($newContent);

// 注意：如果 $newContent 是页面上已存在的元素，它会被移动到新位置

使用函数动态生成替换内容：

// 使用函数返回替换内容
$('.item').replaceWith(function(index, oldHTML) {
  // index: 当前元素在集合中的索引
  // oldHTML: 当前元素的旧HTML内容
  // this: 当前DOM元素
  
  return '<div class="item-' + index + '">替换内容: ' + oldHTML + '</div>';
});

链式操作（需注意）：

// 替换元素后可以进行链式操作，但操作的是已被移除的元素
$('#target')
  .replaceWith('<div>新内容</div>')
  .addClass('removed') // 这会在已被移除的元素上添加类
  .hide(); // 这会在已被移除的元素上调用hide()

~~核心特性~~：

对比 .replaceWith()：

二者实现相同的功能，但语法结构相反：

方法	语法	返回值	描述
`.replaceWith()`	`$(target).replaceWith(content)`	被替换元素的 jQuery 对象	用内容替换目标元素
`.replaceAll()`	`$(content).replaceAll(target)`	替换内容的 jQuery 对象	用当前元素替换目标元素

// 这两种方式效果相同
$('#target').replaceWith($('.replacement'));    // 使用 .replaceWith()
$('.replacement').replaceAll('#target');        // 使用 .replaceAll()

移动而非复制：如果替换内容包含页面上已经存在的元素，这些元素会被移动到新位置，而不是被复制。
事件处理程序：被替换的元素上的事件处理程序会被移除。替换内容中的元素如果原本在页面上，会保留它们的事件处理程序。
jQuery 数据：被替换的元素上的 jQuery 数据（通过 .data() 存储）会被移除。
内存管理：虽然返回被替换的元素，但它们已从 DOM 中移除，需要注意内存管理。
函数参数：当使用函数时，函数应返回要替换的内容。如果函数返回 null 或 undefined，则不会进行替换

clone()

$els.clone()：(withDataAndEvents?, deepWithDataAndEvents?)，DOM 克隆，用于创建匹配元素集合的深度副本（包括所有后代元素和文本节点）。

withDataAndEvents?：boolean，默认：false，指定是否复制元素的事件处理程序和 jQuery 数据。
deepWithDataAndEvents?：boolean，默认：跟随上面的默认值，指定是否复制元素的所有后代元素的事件处理程序和 jQuery 数据。
返回：
$els：jQuery，返回包含新克隆元素的 jQuery 集合，这些元素尚未插入到文档中。

~~基本示例~~：

基本克隆：

html

<div class="container">
  <div id="original" class="item">
    <h3>原始元素</h3>
    <p>这是原始元素的内容</p>
  </div>
</div>

<script>
// 克隆元素但不复制事件和数据
var $clonedElement = $('#original').clone();

// 将克隆的元素添加到容器中
$('.container').append($clonedElement);

// 结果：容器中会有两个相似的元素
</script>

克隆并复制事件处理程序：

html

<button id="original-btn" class="btn">点击我</button>
<div class="container"></div>

<script>
// 为原始按钮添加点击事件
$('#original-btn').on('click', function() {
  alert('按钮被点击了!');
});

// 克隆按钮并复制事件处理程序
var $clonedBtn = $('#original-btn').clone(true); // 注意参数为 true

// 将克隆的按钮添加到容器中
$('.container').append($clonedBtn);

// 现在两个按钮都有点击事件处理程序
</script>

使用两个参数：

// 克隆元素并复制所有事件和数据（包括后代元素的）
var $cloned = $('#element').clone(true, true);

// 克隆元素但不复制任何事件和数据
var $cloned = $('#element').clone(false, false);

// 克隆元素并复制自身的事件和数据，但不包括后代元素的
var $cloned = $('#element').clone(true, false);

~~核心特性~~：

ID 冲突: 克隆的元素会保留原始元素的 ID，这可能导致 ID 重复。通常需要修改克隆元素的 ID。
js
```
var $cloned = $('#original').clone();
$cloned.attr('id', 'original-clone'); // 修改 ID
```
1
2
表单数据: 克隆的表单元素会保留原始元素的值，但不会保留用户输入的数据（除非使用参数复制数据）。
性能考虑: 克隆大型 DOM 结构可能会影响性能，应谨慎使用。
事件委托: 对于使用事件委托处理的事件，克隆元素会自动获得这些事件处理，不需要特别复制

事件处理

on()

$els.on()：(events|eventsMap,selector?,data?,handler)，事件处理，用于将一个或多个事件处理函数绑定到匹配的元素上。提供了统一的事件绑定接口。

$els.on()：(events,selector?,data?,handler)，直接事件绑定。
- events：string，一个或多个空格分隔的事件类型名称（比如 "click" 或 "keydown"）和可选的命名空间。
  - "click"：点击事件。
  - "click dblclick"：点击和双击事件。
  - "click.myPlugin"：带命名空间的点击事件（便于后续管理）。
- selector?：string，选择器字符串，用于实现事件委托。
  - 当提供此参数时，事件处理程序将被绑定到与选择器匹配的后代元素上，而不是直接绑定到选中的元素上。
  - 这对于处理动态添加的元素非常有用，因为事件是在文档层级被捕获，然后检查是否与选择器匹配。
- data?：any，事件被触发时，传递给事件处理函数的数据。可以通过 event.data 访问。
- handler：(event,...args?)，事件触发时执行的事件处理函数。使用 eventsMap 时可以省略。
  - event：Event，事件对象。
  - ...args?：any，
$els.on()：(eventsMap,selector?,data?)，使用事件映射。
- eventsMap：{events: handler}，事件映射。
  - 键是一个或多个空格分隔的事件类型。
  - 值是该事件的处理函数。
- selector?：string，选择器字符串，用于实现事件委托。
  - 当提供此参数时，事件处理程序将被绑定到与选择器匹配的后代元素上，而不是直接绑定到选中的元素上。
  - 这对于处理动态添加的元素非常有用，因为事件是在文档层级被捕获，然后检查是否与选择器匹配。
- data?：any，事件被触发时，传递给事件处理函数的数据。可以通过 event.data 访问。
返回：
$els：jQuery，返回 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

基本事件绑定：

// 为所有按钮绑定点击事件
$("button").on("click", function() {
  alert("按钮被点击了!");
});

// 链式调用
$("button")
  .on("click", function() { /* 点击处理 */ })
  .on("mouseenter", function() { /* 鼠标进入处理 */ });

事件委托：

事件委托允许您为尚未创建的元素绑定事件处理程序：

// 为 #container 内的所有当前和未来的 .item 元素绑定点击事件
$("#container").on("click", ".item", function() {
  alert($(this).text() + " 被点击了!");
});

// 即使之后添加新的 .item 元素，它们也会自动拥有点击事件
$("#container").append("<div class='item'>新项目</div>");

传递数据给事件处理程序：

// 传递数据给事件处理函数
$("button").on("click", {name: "张三", age: 25}, function(event) {
  alert("姓名: " + event.data.name + ", 年龄: " + event.data.age);
});

一次绑定多个事件：

// 方法1: 使用空格分隔的事件名称
$("p").on("click dblclick mouseenter", function(event) {
  console.log("事件类型: " + event.type);
});

// 方法2: 使用事件映射
$("p").on({
  "click": function() { alert("点击了段落"); },
  "dblclick": function() { alert("双击了段落"); },
  "mouseenter": function() { $(this).css("background", "yellow"); },
  "mouseleave": function() { $(this).css("background", "white"); }
});

使用命名空间：

命名空间可以帮助您更有组织地管理事件：

// 绑定带命名空间的事件
$("button").on("click.myPlugin", function() {
  console.log("插件点击事件");
});

$("button").on("click.analytics", function() {
  console.log("分析点击事件");
});

// 只移除特定命名空间的事件
$("button").off("click.myPlugin");

// 移除所有命名空间的点击事件
$("button").off("click");

阻止默认行为和事件传播：

$("a").on("click", function(event) {
  // 阻止链接默认的跳转行为
  event.preventDefault();
  
  // 阻止事件冒泡
  event.stopPropagation();
  
  console.log("链接被点击，但不会跳转");
});

~~核心特性~~：

事件委托：
1. 使用事件委托：当需要为大量元素或动态添加的元素绑定事件时，使用事件委托可以提高性能。
2. 选择最近静态父元素：对于事件委托，选择最接近的动态元素的静态父元素，以减少事件传播的距离。
3. 避免过度使用事件委托：对于少量静态元素，直接绑定可能更高效。
及时解绑事件：当不再需要事件处理程序时，使用 .off() 方法解绑，避免内存泄漏。

off()

$els.off()：(events?|eventsMap?,selector?,handler?)，事件处理，用于移除一个或多个通过 .on() 方法附加的事件处理程序。

events：string，一个或多个空格分隔的事件类型名称（比如 "click" 或 "keydown"）和可选的命名空间。
- "click"：点击事件。
- "click dblclick"：点击和双击事件。
- "click.myPlugin"：带命名空间的点击事件（便于后续管理）。
selector?：string，选择器字符串，用于实现事件委托。
- 当提供此参数时，事件处理程序将被绑定到与选择器匹配的后代元素上，而不是直接绑定到选中的元素上。
- 这对于处理动态添加的元素非常有用，因为事件是在文档层级被捕获，然后检查是否与选择器匹配。
handler?：(event,...args?)，事件触发时执行的事件处理函数。使用 eventsMap 时可以省略。
- event：Event，事件对象。
- ...args?：any，
eventsMap：{events: handler}，事件映射。
- 键是一个或多个空格分隔的事件类型。
- 值是该事件的处理函数。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

语法：

// 移除所有事件处理程序
$(elements).off();

// 移除特定类型的事件处理程序
$(elements).off(events);

// 移除特定事件类型和选择器的事件处理程序
$(elements).off(events, selector);

// 移除特定事件处理程序
$(elements).off(events, selector, handler);

// 使用事件映射
$(elements).off(eventsMap [, selector]);

~~基本示例~~：

移除所有事件处理程序：

// 移除元素上的所有事件处理程序
$('#myElement').off();

移除特定类型的事件：

// 移除所有点击事件处理程序
$('#myButton').off('click');

// 移除鼠标移入和移出事件
$('#myElement').off('mouseenter mouseleave');

移除特定的事件处理程序：

// 定义处理函数
function handleClick() {
  console.log('按钮被点击');
}

// 绑定事件
$('#myButton').on('click', handleClick);

// 移除特定处理函数
$('#myButton').off('click', handleClick);

移除事件委托的处理程序：

// 使用事件委托绑定事件
$('#container').on('click', '.item', function() {
  console.log('项目被点击');
});

// 移除事件委托的处理程序
$('#container').off('click', '.item');

使用命名空间：

// 绑定带命名空间的事件
$('#element').on('click.myPlugin', function() {
  console.log('插件点击事件');
});

$('#element').on('click.analytics', function() {
  console.log('分析点击事件');
});

// 只移除特定命名空间的事件
$('#element').off('click.myPlugin');

// 移除所有命名空间的点击事件
$('#element').off('click');

使用事件映射：

// 绑定多个事件
$('#element').on({
  click: function() { console.log('点击'); },
  mouseenter: function() { console.log('鼠标进入'); }
});

// 使用事件映射移除多个事件
$('#element').off({
  click: function() { console.log('点击'); },
  mouseenter: function() { console.log('鼠标进入'); }
});

~~核心特性~~：

精确匹配: 要移除特定处理程序，必须传递与绑定时间相同的函数引用。

// 正确的方式
var handler = function() { /* ... */ };
$el.on('click', handler);
$el.off('click', handler);

// 错误的方式（匿名函数无法被单独移除）
$el.on('click', function() { /* ... */ });
$el.off('click', function() { /* ... */ }); // 这不会工作

事件委托: 当使用事件委托时，必须提供与 .on() 调用时相同的选择器。

// 绑定
$('#parent').on('click', '.child', handler);

// 移除
$('#parent').off('click', '.child', handler);

trigger()

$els.trigger()：(eventType, extraParameters?)，事件处理，用于手动触发元素上绑定的事件处理程序。不会模拟浏览器默认行为。

eventType：string，指定要触发的事件类型。
extraParameters?：any，传递给事件处理程序的额外参数。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

触发标准事件：

// 绑定点击事件
$('#myButton').on('click', function() {
  console.log('按钮被点击了!');
});

// 手动触发点击事件
$('#myButton').trigger('click');

传递额外参数：

// 绑定事件，期待额外参数
$('#myElement').on('customEvent', function(event, data1, data2) {
  console.log('收到数据:', data1, data2);
  console.log('额外数据:', event.customProperty);
});

// 触发事件并传递参数（数组形式）
$('#myElement').trigger('customEvent', ['value1', 'value2']);

// 触发事件并传递参数（对象形式）
$('#myElement').trigger({
  type: 'customEvent',
  customProperty: '自定义值'
});

触发自定义事件：

// 绑定自定义事件
$('#notifier').on('notification', function(event, message, type) {
  console.log(`${type}: ${message}`);
});

// 触发自定义事件
$('#notifier').trigger('notification', ['操作成功完成', 'success']);

使用 jQuery.Event 对象：

// 创建自定义事件对象
var event = jQuery.Event('customEvent');
event.customData = { key: 'value' };

// 绑定事件处理程序
$('#element').on('customEvent', function(e) {
  console.log('自定义数据:', e.customData);
});

// 触发事件
$('#element').trigger(event);

~~核心特性~~：

不会模拟浏览器默认行为:
.trigger() 会执行绑定的事件处理程序，但不会模拟浏览器的默认行为。
例如，触发 submit 事件不会提交表单，触发 focus 事件不会真正聚焦元素。

click()

$els.click()：(eventData?, handler?)，事件处理，用于绑定点击事件处理程序和触发元素的点击事件。

$els.click()：(eventData?, handler)，绑定点击事件处理程序。
- eventData?：object，包含要传递给事件处理程序的数据。可通过 event.data 访问。
- handler：(event)=>void，用于绑定的事件处理函数。
$els.click()：()，触发点击事件。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

绑定点击事件处理程序（基本用法）：

// 为按钮绑定点击事件
$('#myButton').click(function() {
  alert('按钮被点击了!');
});

// 等同于
$('#myButton').on('click', function() {
  alert('按钮被点击了!');
});

传递事件数据：

// 绑定点击事件并传递数据
$('#myButton').click(
  {user: '张三', action: '提交'},
  function(event) {
    alert('用户: ' + event.data.user + ', 操作: ' + event.data.action);
  }
);

触发点击事件：

// 手动触发按钮的点击事件
$('#myButton').click();

// 等同于
$('#myButton').trigger('click');

链式操作：

// 绑定点击事件后进行其他操作
$('#myButton')
  .click(function() {
    console.log('按钮被点击');
  })
  .addClass('clickable')
  .css('color', 'blue');

~~核心特性~~：

事件委托：

.click() 方法不支持事件委托。如果需要为动态添加的元素绑定事件，请使用 .on() 方法。

// 注意：.click() 不支持事件委托，需要使用 .on()

// ❌ 这是错误的做法（不会工作）：
$('#container').click('.dynamic-item', function() {
  // 这里的委托不会生效
});

// ✅ 正确的做法（使用 .on()）：
$('#container').on('click', '.dynamic-item', function() {
  // 这里的委托会正常工作
});

多次绑定：

多次调用 .click() 会添加多个事件处理程序，而不是替换之前的。

// 为所有按钮绑定点击事件
$('button').click(function() {
  console.log('按钮被点击: ' + $(this).text());
});

hover()

$els.hover()：(handlerInOut|handlerIn, handlerOut?)，事件处理，用于处理鼠标悬停事件的便捷方法，可同时处理 mouseenter 和 mouseleave 事件。

$els.hover()：(handlerIn, handlerOut)，双处理函数形式（推荐）。
- handlerIn：(evnet)=>void，当鼠标进入元素时执行的处理函数。
- handlerOut：(evnet)=>void，当鼠标离开元素时执行的处理函数。
$els.hover()：(handlerInOut)，单处理函数形式。
- handlerInOut：(evnet)=>void，当鼠标进入或离开元素时都会执行的处理函数。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

双处理函数形式（推荐）：

// 鼠标进入和离开时执行不同的函数
$('.item').hover(
  function() {
    // 鼠标进入时执行
    $(this).addClass('active');
    $(this).css('background-color', 'yellow');
    console.log('鼠标进入');
  },
    
  function() {
    // 鼠标离开时执行
    $(this).removeClass('active');
    $(this).css('background-color', '');
    console.log('鼠标离开');
  }
);

单处理函数形式：

// 鼠标进入和离开时执行相同的函数
$('.item').hover(
  function() {
    // 此函数在鼠标进入和离开时都会执行
    $(this).toggleClass('active');
    console.log('鼠标状态改变');
  }
);

// 等同于
$('.item')
  .on('mouseenter', function() {
    $(this).toggleClass('active');
  })
  .on('mouseleave', function() {
    $(this).toggleClass('active');
  });

链式操作：

// 绑定悬停事件后进行其他操作
$('.menu-item')
  .hover(
    function() { $(this).addClass('highlight'); },
    function() { $(this).removeClass('highlight'); }
  )
  .css('padding', '10px')
  .addClass('interactive');

~~核心特性~~：

事件委托：

.hover() 方法不支持事件委托。如果需要为动态添加的元素绑定悬停事件，请使用 .on() 方法：

// 使用事件委托处理悬停
$('#container').on({
  mouseenter: function() {
    $(this).addClass('hover');
  },
  mouseleave: function() {
    $(this).removeClass('hover');
  }
}, '.dynamic-item');

性能考虑：
对于复杂的动画效果，使用 .stop() 方法可以防止动画队列堆积。
CSS 替代方案：
对于简单的悬停效果，考虑使用 CSS 的 :hover 伪类，性能更好：
css
```
.item:hover {
  background-color: yellow;
  transform: scale(1.05);
}
```
1
2
3
4
触摸设备：
在触摸设备上，悬停效果可能不会按预期工作，需要考虑移动设备的交互方式。

~~进阶示例~~：

高级悬停效果：

// 创建复杂的悬停效果
$('.card').hover(
  function() {
    // 鼠标进入
    $(this).stop().animate({
      opacity: 0.8,
      height: '+=20px'
    }, 200);
    
    $(this).find('.description').slideDown();
  },
    
  function() {
    // 鼠标离开
    $(this).stop().animate({
      opacity: 1,
      height: '-=20px'
    }, 200);
    
    $(this).find('.description').slideUp();
  }
);

mouseenter()

$els.mouseenter()：(eventData?, handler?)，事件处理，不会冒泡，用于处理鼠标进入事件。

$els.mouseenter()：(eventData?, handler)，绑定 mouseenter 事件处理程序。
- eventData?：object，包含要传递给事件处理程序的数据。可通过 event.data 访问。
- handler：(event)=>void，用于绑定的事件处理函数。
$els.mouseenter()：()，触发 mouseenter 事件。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

绑定 mouseenter 事件处理程序：

// 为元素绑定 mouseenter 事件
$('#myElement').mouseenter(
  function() {
    console.log('鼠标进入了元素');
    $(this).css('background-color', 'yellow');
  }
);

// 等同于使用 .on()
$('#myElement').on('mouseenter', function() {
  console.log('鼠标进入了元素');
  $(this).css('background-color', 'yellow');
});

传递事件数据：

// 绑定 mouseenter 事件并传递数据
$('.item').mouseenter(
  {action: 'highlight', color: 'lightblue'},
  function(event) {
    console.log('执行动作: ' + event.data.action);
    $(this).css('background-color', event.data.color);
  }
);

触发 mouseenter 事件：

// 手动触发元素的 mouseenter 事件
$('#myElement').mouseenter();

// 等同于
$('#myElement').trigger('mouseenter');

链式操作：

// 绑定 mouseenter 事件后进行其他操作
$('.box')
  .mouseenter(function() {
    $(this).addClass('hovered');
  })
  .css('border', '1px solid #ccc')
  .addClass('interactive');

多个元素绑定：

// 为所有卡片元素绑定 mouseenter 事件
$('.card').mouseenter(function() {
  $(this).addClass('active');
  $(this).find('.description').slideDown();
});

~~核心特性~~：

对比 .mouseover()：

特性	`mouseenter`	`mouseover`
事件冒泡	不会冒泡	会冒泡
触发频率	只在进入元素时触发一次	进入元素或子元素时都会触发
适用场景	需要精确控制鼠标进入时	需要监听元素及其子元素的鼠标进入

html

<div id="parent">
  父元素
  <div id="child">子元素</div>
</div>

<script>
// mouseenter 行为（不会冒泡）
$('#parent').mouseenter(function() {
  console.log('mouseenter - 父元素');
});

// mouseover 行为（会冒泡）
$('#parent').mouseover(function() {
  console.log('mouseover - 父元素');
});

// 当鼠标从外部进入父元素时，两者都会触发
// 当鼠标从父元素进入子元素时：
// - mouseenter 不会再次触发（只在进入父元素时触发一次）
// - mouseover 会再次触发（因为进入了子元素）
</script>

事件委托：

.mouseenter() 方法不支持事件委托。如果需要为动态添加的元素绑定事件，请使用 .on() 方法：

// 使用事件委托处理 mouseenter
$('#container').on('mouseenter', '.dynamic-item', function() {
  $(this).addClass('hover');
});

性能考虑：对于大量元素，使用事件委托比直接绑定到每个元素更高效。
CSS 替代方案：对于简单的悬停效果，考虑使用 CSS 的 :hover 伪类，性能更好：
移动设备：在触摸设备上，mouseenter 事件可能不会按预期工作，需要考虑移动设备的交互方式。

mouseleave()

$els.mouseleave()：(eventData?, handler?)，事件处理，不会冒泡，用于处理鼠标离开事件。

$els.mouseleave()：(eventData?, handler)，绑定 mouseleave 事件处理程序。
- eventData?：object，包含要传递给事件处理程序的数据。可通过 event.data 访问。
- handler：(event)=>void，用于绑定的事件处理函数。
$els.mouseleave()：()，触发 mouseleave 事件。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

绑定 mouseleave 事件处理程序：

// 为元素绑定 mouseleave 事件
$('#myElement').mouseleave(function() {
  console.log('鼠标离开了元素');
  $(this).css('background-color', 'white');
});

// 等同于使用 .on()
$('#myElement').on('mouseleave', function() {
  console.log('鼠标离开了元素');
  $(this).css('background-color', 'white');
});

传递事件数据：

// 绑定 mouseleave 事件并传递数据
$('.item').mouseleave(
  {action: 'reset', color: '#f0f0f0'},
  function(event) {
    console.log('执行动作: ' + event.data.action);
    $(this).css('background-color', event.data.color);
  }
);

触发 mouseleave 事件：

// 手动触发元素的 mouseleave 事件
$('#myElement').mouseleave();

// 等同于
$('#myElement').trigger('mouseleave');

链式操作：

// 绑定 mouseleave 事件后进行其他操作
$('.box')
  .mouseleave(function() {
    $(this).removeClass('hovered');
  })
  .css('border', '1px solid #ccc')
  .addClass('interactive');

与 mouseenter 配对使用：

// 完整的悬停效果实现
$('.card')
   .mouseenter(function() {
      // 鼠标进入时添加效果
      $(this).addClass('active');
      $(this).find('.details').slideDown();
   })

   .mouseleave(function() {
      // 鼠标离开时移除效果
      $(this).removeClass('active');
      $(this).find('.details').slideUp();
   });

~~核心特性~~：

对比 .mouseout()：

特性	`mouseleave`	`mouseout`
事件冒泡	不会冒泡	会冒泡
触发频率	只在离开元素时触发一次	离开元素或进入子元素时都会触发
适用场景	需要精确控制鼠标离开时	需要监听元素及其子元素的鼠标离开

html

<div id="parent">
  父元素
  <div id="child">子元素</div>
</div>

<script>
// mouseleave 行为（不会冒泡）
$('#parent').mouseleave(function() {
  console.log('mouseleave - 父元素');
});

// mouseout 行为（会冒泡）
$('#parent').mouseout(function() {
  console.log('mouseout - 父元素');
});

// 当鼠标从父元素移动到子元素时：
// - mouseleave 不会触发（因为仍在父元素内）
// - mouseout 会触发（因为离开了父元素区域）
</script>

事件委托：.mouseleave() 方法不支持事件委托。如果需要为动态添加的元素绑定事件，请使用 .on() 方法：
性能考虑：对于大量元素，使用事件委托比直接绑定到每个元素更高效。
CSS 替代方案：对于简单的悬停效果，考虑使用 CSS 的 :hover 伪类，性能更好：
移动设备：在触摸设备上，mouseleave 事件可能不会按预期工作，需要考虑移动设备的交互方式。

keydown()

$els.keydown()：(eventData?, handler?)，事件处理，用于处理键盘按键按下事件。

$els.keydown()：(eventData?, handler)，绑定 keydown 事件处理程序。
- eventData?：object，包含要传递给事件处理程序的数据。可通过 event.data 访问。
- handler：(event)=>void，用于绑定的事件处理函数。
$els.keydown()：()，触发 keydown 事件。
返回：
$els：jQuery，返回原始的 jQuery 对象（即调用该方法的元素集合），支持链式调用。

~~基本示例~~：

绑定 keydown 事件处理程序：

// 为输入框绑定 keydown 事件
$('#myInput').keydown(function(event) {
  console.log('按键按下:', event.key, '键码:', event.keyCode);
});

// 等同于使用 .on()
$('#myInput').on('keydown', function(event) {
  console.log('按键按下:', event.key, '键码:', event.keyCode);
});

传递事件数据：

// 绑定 keydown 事件并传递数据
$('input').keydown(
  {fieldName: 'username'},
  function(event) {
    console.log('在字段 ' + event.data.fieldName + ' 中按下按键:', event.key);
  }
);

触发 keydown 事件：

// 手动触发元素的 keydown 事件
$('#myInput').keydown();

// 等同于
$('#myInput').trigger('keydown');

链式操作：

// 绑定 keydown 事件后进行其他操作
$('#textField')
  .keydown(function(event) {
    console.log('按键按下:', event.key);
  })
  .focus() // 自动聚焦到输入框
  .css('border-color', '#4a90e2');

阻止特定按键的默认行为：

// 阻止在输入框中输入数字
$('#noNumbers').keydown(function(event) {
  // 检测是否按下了数字键 (0-9)
  if (event.keyCode >= 48 && event.keyCode <= 57) {
    event.preventDefault();
    console.log('数字键被阻止');
  }
});

~~核心特性~~：

键盘 event 的重要属性：

在处理 keydown 事件时，事件对象提供了几个重要属性：

属性	描述	兼容性
`event.key`	按下的键的字符串表示（推荐）	现代浏览器
`event.keyCode`	按下的键的数字代码（已废弃）	所有浏览器，但已废弃
`event.which`	按下的键的数字代码（jQuery 标准化）	所有浏览器
`event.code`	物理键的代码（与键盘布局无关）	现代浏览器
`event.ctrlKey`	是否按下了 Ctrl 键	所有浏览器
`event.shiftKey`	是否按下了 Shift 键	所有浏览器
`event.altKey`	是否按下了 Alt 键	所有浏览器
`event.metaKey`	是否按下了 Meta 键（Cmd）	所有浏览器

~~注意事项~~：

元素聚焦：
keydown 事件只在可聚焦元素上触发，如 <input>、<textarea>、<select> 或有 tabindex 属性的元素。

事件委托：

.keydown() 方法支持事件委托，但需要注意只有可聚焦元素才能触发键盘事件：

// 使用事件委托处理 keydown
$('#container').on('keydown', 'input, textarea', function(event) {
  console.log('键盘事件:', event.key);
});

重复触发：
当按住一个键不放时，keydown 事件会重复触发。
与 keypress 的区别：
- keydown: 按下任意键时触发
- keypress: 按下产生字符的键时触发（已废弃）
浏览器兼容性：推荐使用 event.key 而不是 event.keyCode，因为后者已废弃。

动画

animate()@

$els.animate()：()，动画，通过平滑地改变元素的 CSS 属性值来创建自定义动画效果。

$els.animate()：(properties,durations?,easing?,complete?)，基础语法。
- properties：object，包含 CSS 属性及其目标值的对象。这些属性将随着动画的进行逐渐改变。
  注意：
  - 所有数值属性应指定单位（如 px, em, %），颜色动画需要 jQuery UI。
  - 可以使用相对值（如 +=50px）。
  - 可以使用特殊值 "show", "hide", 和 "toggle"。
- duration：number|string，默认：normal，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.animate()：(properties,options)，选项对象语法。

properties：object，包含 CSS 属性及其目标值的对象。这些属性将随着动画的进行逐渐改变。
注意：
- 所有数值属性应指定单位（如 px, em, %），颜色动画需要 jQuery UI。
- 可以使用相对值（如 +=50px）。
- 可以使用特殊值 "show", "hide", 和 "toggle"。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本属性动画：

$('#box').animate({
  left: '250px',
  opacity: 0.5,
  height: '+=150px'
});

使用特殊值：

$('#element').animate({
  height: 'toggle'
});

选项对象语法：

$('#element').animate({
  left: '500px'
}, {
  duration: 2000,
  easing: 'linear',
  complete: function() {
    console.log('动画完成!');
  },
  step: function(now, fx) {
    console.log('当前值: ' + now);
  }
});

~~核心特性~~：

颜色动画：默认 jQuery 不支持颜色动画，需要 jQuery UI 库
属性限制：不是所有 CSS 属性都可以动画化，通常只有数值属性可以
单位要求：必须为数值属性指定单位（px, em, %等）
初始值：如果元素没有初始值，jQuery 可能无法正确动画化某些属性
性能考虑：过多或复杂的动画可能影响页面性能

~~高级用法~~：

相对值动画：

// 相对当前值增加100px
$('#element').animate({
  left: '+=100px'
});

// 相对当前值减少50px
$('#element').animate({
  height: '-=50px'
});

使用队列控制：

通过 options.queue 选项控制动画是否加入队列按顺序执行。

// 默认情况下，动画会加入队列按顺序执行
$('#element')
  .animate({left: '100px'}, 1000)
  .animate({top: '100px'}, 1000);

// 设置 queue: false 使动画立即开始（可能与其他动画同时进行）
$('#element').animate({
  left: '100px'
}, {
  duration: 1000,
  queue: false
});

步进函数：

通过 options.step 选项设置逐帧执行的回调函数。

$('#element').animate({
  left: '500px'
}, {
  duration: 3000,
  step: function(now, fx) {
    // now: 当前值
    // fx: 包含动画信息的对象
    console.log('当前 left 值: ' + now);
  }
});

hide()

$els.hide()：(options|duration,easing?,complete?)，动画，用于隐藏匹配的元素集合。

$els.hide()：()，立即隐藏（无动画效果）。
$els.hide()：(duration,easing?,complete?)，以动画方式隐藏。
- duration：number|string，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
  - 0/undefined：退化为无动画的立即隐藏。
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.hide()：(options)，高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

立即隐藏：

// 点击按钮后，立即隐藏所有段落
$('#myButton').click(function() {
  $('p').hide();
});

以动画方式隐藏：

// 用 1 秒的时间缓慢隐藏所有 div，使用默认的 'swing' 缓动
$('div').hide(1000);

// 用 'fast' 的速度隐藏，并在完成后弹出提示
$('.message').hide('fast', function() {
  // 这里的 this 是那个被隐藏的 .message 元素
  alert('隐藏完成！');
});

// 使用线性缓动
$('#box').hide(500, 'linear');

带 Options 对象参数：高级动画控制：

// 使用 options 对象进行高级控制
$('#complexElement').hide({
  duration: 1200,
  easing: 'linear',
  complete: function() {
    console.log('Animation finished.');
  },
  queue: false // 不加入队列，立即执行
});

~~核心特性~~：

隐藏逻辑：
.hide() 的核心是添加 display: none。它它会记住元素原本的 display 值（如 block, inline, inline-block），以便在使用 .show() 时能够恢复。

对比相关方法：

方法	动画维度	效果描述	适用场景
`.fadeIn()`	不透明度	元素从完全透明逐渐变为完全不透明。	优雅地显示元素，不干扰布局（如图片、通知）。
`.fadeOut()`	不透明度	元素从完全不透明逐渐变为完全透明，最后 `display: none`。	优雅地隐藏元素。
`.fadeToggle()`	不透明度	根据当前状态，在 `.fadeIn()` 和 `.fadeOut()` 之间切换。	需要切换淡入/淡出效果的场景。
`.show()`	不透明度、高度、宽度	元素从左上角向右下角展开并变得不透明。	更明显的“出现”效果，会改变布局。
`.hide()`	不透明度、高度、宽度	元素向右上角收缩并变得透明。

show()

$els.show()：(options|duration,easing?,complete?)，动画，用于显示匹配的元素集合。

$els.show()：()，立即显示（无动画效果）。
$els.show()：(duration,easing?,complete?)，以动画方式显示。
- duration：number|string，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
  - 0/undefined：退化为无动画的立即显示。
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.show()：(options)，高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

立即显示：

// 点击按钮后，立即显示所有隐藏的段落
$('#myButton').click(function() {
  $('p').show();
});

以动画方式显示：

// 用 1 秒的时间缓慢显示所有 div，使用默认的 'swing' 缓动
$('div').show(1000);

// 用 'fast' 的速度显示，并在完成后弹出提示
$('.message').show('fast', function() {
  // 这里的 this 是那个被显示的 .message 元素
  alert('显示完成！');
});

// 使用线性缓动显示一个盒子
$('#box').show(500, 'linear');

带 Options 对象参数：高级动画控制：

// 使用 options 对象进行高级控制
$('#complexElement').show({
  duration: 1200,
  easing: 'swing',
  complete: function() {
    console.log('Element is now fully visible.');
  },
  start: function() {
    $(this).css('border', '2px solid red'); // 动画开始时加个边框
  }
});

~~核心特性~~：

显示逻辑：
.show() 的核心是移除 display: none。它会尝试将元素恢复到你在样式表中定义的默认显示状态，而不是简单地设置为 block。

对比相关方法：

方法	动画维度	效果描述	适用场景
`.fadeIn()`	不透明度	元素从完全透明逐渐变为完全不透明。	优雅地显示元素，不干扰布局（如图片、通知）。
`.fadeOut()`	不透明度	元素从完全不透明逐渐变为完全透明，最后 `display: none`。	优雅地隐藏元素。
`.fadeToggle()`	不透明度	根据当前状态，在 `.fadeIn()` 和 `.fadeOut()` 之间切换。	需要切换淡入/淡出效果的场景。
`.show()`	不透明度、高度、宽度	元素从左上角向右下角展开并变得不透明。	更明显的“出现”效果，会改变布局。
`.hide()`	不透明度、高度、宽度	元素向右上角收缩并变得透明。

toggle()

$els.toggle()：(showOrHide|options|duration,easing?,complete?)，动画，用于切换元素的可见性。

$els.toggle()：()，立即切换可见性（无动画效果）。
$els.toggle()：(duration,easing?,complete?)，以动画方式切换可见性。
- duration：number|string，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
  - 0/undefined：退化为无动画的立即隐藏。
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。
$els.toggle()：(showOrHide)，带 Boolean 对象参数：精确控制。
- showOrHide：boolean，用于精确指示是显示还是隐藏元素，而不是基于当前状态进行切换。

$els.toggle()：(options)，带 options 对象参数：精确控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

立即切换可见性：

// 点击按钮时，切换所有段落的显示状态
$('#toggleButton').click(function() {
  $('p').toggle();
});

以动画方式切换可见性：

// 用 0.5 秒的时间以动画方式切换菜单的显示状态
$('#menuToggle').click(function() {
  $('#dropdownMenu').toggle(500);
});

// 切换显示，并使用完成后回调
$('.notification').toggle('fast', function() {
  console.log('切换动画已完成。当前状态：', $(this).is(':visible') ? '可见' : '隐藏');
});

带 Boolean 对象参数：精确控制：

var shouldBeVisible = (someCondition > 5);
// 根据条件决定显示或隐藏，而不是切换
$('#conditionalElement').toggle(shouldBeVisible);

带 options 对象参数：精确控制：

// 使用 options 对象进行高级动画控制
$('#specialBox').toggle({
  duration: 1000,
  easing: 'linear',
  queue: false, // 不加入动画队列，立即执行
  complete: function() {
    console.log('高级切换动画完成！');
  }
});

~~核心特性~~：

切换可见性：
行为模式与 .hide() 和 .show() 完全一致，也支持立即执行、动画执行和高级选项控制。
- 如果元素是隐藏的，调用 .toggle() 会显示它（相当于 .show()）。
- 如果元素是可见的，调用 .toggle() 会隐藏它（相当于 .hide()）。

对比相关方法：

方法	动画维度	效果描述	适用场景
`.fadeIn()`	不透明度	元素从完全透明逐渐变为完全不透明。	优雅地显示元素，不干扰布局（如图片、通知）。
`.fadeOut()`	不透明度	元素从完全不透明逐渐变为完全透明，最后 `display: none`。	优雅地隐藏元素。
`.fadeToggle()`	不透明度	根据当前状态，在 `.fadeIn()` 和 `.fadeOut()` 之间切换。	需要切换淡入/淡出效果的场景。
`.show()`	不透明度、高度、宽度	元素从左上角向右下角展开并变得不透明。	更明显的“出现”效果，会改变布局。
`.hide()`	不透明度、高度、宽度	元素向右上角收缩并变得透明。

fadeIn()

$els.fadeIn()：(options|duration,easing?,complete?)，动画，用于创建淡入动画效果的方法，通过平滑地增加元素的不透明度来显示匹配的元素。

$els.fadeIn()：()，无参数：使用默认动画（默认：400ms，swing）。
$els.fadeIn()：(duration,easing?,complete?)，带 Duration 和 Easing 参数：自定义动画。
- duration：number|string，默认：normal，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.fadeIn()：(options)，带 Options 对象参数：高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

使用默认动画：

// 点击按钮后，所有隐藏的图片以默认方式淡入
$('#fadeBtn').click(function() {
  $('.hidden-image').fadeIn();
});

自定义动画：

// 用 2 秒（2000ms）的时间缓慢淡入
$('#message').fadeIn(2000);

// 快速淡入，并使用线性缓动
$('.tooltip').fadeIn('fast', 'linear');

// 淡入完成后，在控制台打印消息
$('#notification').fadeIn('slow', function() {
  // 这里的 this 是 #notification DOM 元素
  console.log('消息已完全显示！');
  $(this).css('border', '2px solid green'); // 可以使用 $(this) 来操作它
});

高级动画控制：

// 使用 options 对象进行高级控制
$('#special-element').fadeIn({
  duration: 1500,
  easing: 'swing',
  queue: 'fx', // 放入默认的动画队列
  start: function() {
    console.log('淡入动画开始！');
  },
  complete: function() {
    console.log('淡入动画结束！');
  }
});

链式调用：

// 先让一个元素淡入，然后向上滑动（slideUp），最后改变其文字颜色
$('#chained-element')
  .fadeIn(1000)    // 淡入，返回 jQuery 对象
  .slideUp(2000)   // 链式调用：等淡入完成后，开始向上滑动
  .css('color', 'red'); // 链式调用：等滑动完成后，改变颜色

~~核心特性~~：

实现思路：
1. 初始化样式：它会给元素设置 display: block，并将 opacity 设置为 0，使元素准备好进行动画。
2. 执行 opacity 动画：在指定时间内将元素的不透明度从 0% 动画到 100% 来创造出元素逐渐浮现的效果。

对比相关方法：

方法	动画维度	效果描述	适用场景
`.fadeIn()`	不透明度	元素从完全透明逐渐变为完全不透明。	优雅地显示元素，不干扰布局（如图片、通知）。
`.fadeOut()`	不透明度	元素从完全不透明逐渐变为完全透明，最后 `display: none`。	优雅地隐藏元素。
`.fadeToggle()`	不透明度	根据当前状态，在 `.fadeIn()` 和 `.fadeOut()` 之间切换。	需要切换淡入/淡出效果的场景。
`.show()`	不透明度、高度、宽度	元素从左上角向右下角展开并变得不透明。	更明显的“出现”效果，会改变布局。
`.hide()`	不透明度、高度、宽度	元素向右上角收缩并变得透明。

fadeOut()

$els.fadeOut()：()，动画，用于创建淡出动画效果的方法。通过逐渐改变匹配元素的不透明度来实现。

$els.fadeOut()：()，无参数：使用默认动画（默认：400ms，swing）。
$els.fadeOut()：(duration,easing?,complete?)，带 Duration 和 Easing 参数：自定义动画。
- duration：number|string，默认：normal，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.fadeOut()：(options)，带 Options 对象参数：高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入动画队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

示例：

基本用法：

// 在 1 秒内淡出所有 <p> 元素
$("p").fadeOut(1000);

// 使用 "slow" 速度淡出 id 为 "box" 的元素，动画完成后弹窗提示
$("#box").fadeOut("slow", function() {
  alert("The element is now hidden.");
});

使用缓动函数和选项对象：

// 使用线性匀速动画在 2 秒内淡出
$(".item").fadeOut(2000, "linear");

// 使用 options 对象实现同样效果
$(".item").fadeOut({
  duration: 2000,
  easing: "linear",
  complete: function() {
    $(this).remove(); // 动画完成后，从 DOM 中彻底删除该元素
  }
});

高级链式操作与队列控制：

// 先淡出，然后在回调函数（动画完成后）中将其淡入
$("#message")
  .fadeOut(() => {
    // 在 complete 回调里进行链式操作，确保执行顺序
    $(this)
      .text("Content changed after fading out!") // 改变文字
      .fadeIn(); // 再淡入
  });

链式调用：

注意：下面的 .css() 调用不会等待 fadeIn 动画完成，它会立即执行。如果要等所有动画完成再执行，需要使用回调函数或 .promise() 方法。

$("#myDiv")
  .fadeOut("slow") // 先淡出
  .fadeIn("fast")  // 然后再淡入（注意：这里会立即开始，因为fadeOut已将display设为none）
  .css("color", "red"); // 动画完成后立即改变颜色（注意：这不会等待动画完成）

~~核心特性~~：

底层实现：
1. 通过逐渐改变匹配元素的 CSS 不透明度（opacity） 来实现淡出效果。
2. 当动画完成后，还会将元素的 display 属性设置为 none，从而将其完全从文档流中隐藏。

fadeToggle()

$els.fadeToggle()：()，动画，通过动态调整元素的不透明度来切换元素的显示状态。

$els.fadeToggle()：()，无参数：使用默认动画（默认：400ms，swing）。
$els.fadeToggle()：(duration,easing?,complete?)，带 Duration 和 Easing 参数：自定义动画。
- duration：number|string，默认：normal，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.fadeToggle()：(options)，带 Options 对象参数：高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

示例：

基本切换（常见用法）：

点击一个按钮来切换一个元素的显示/隐藏状态。

html

<button id="toggleBtn">显示/隐藏内容</button>
<div id="content">这里是一些会优雅淡入淡出的内容。</div>

$("#toggleBtn").click(function() {
  $("#content").fadeToggle(); // 每次点击都会在淡入和淡出之间切换（没有动画）
});

带回调函数和自定义时长：

切换多个盒子，并在每个盒子的动画完成后在控制台打印信息。

$(".toggle-box").fadeToggle(1500, "linear", function() {
  // ‘this’ 指向当前完成动画的 .toggle-box 元素
  console.log("Animation finished for: ", this.id);
});

使用选项对象：

$("#specialElement").fadeToggle({
  duration: 2000,
  easing: "linear", // 需要 jQuery UI 来支持非 swing/linear 的缓动函数
  complete: function() {
    $(this).css("border", "2px solid red"); // 动画完成后加个红色边框
  }
});

链式调用：

注意：下面的 .addClass() 操作会立即执行，而不会等待 fadeToggle 动画完成。如果需要在动画完成后才执行操作，必须将代码放在 complete 回调函数中。

$("#myButton").click(function() {
  $("#panel")
    .fadeToggle("slow") // 先执行淡入/淡出切换
    .addClass("active"); // 然后立即为该元素添加一个class（注意：这不会等待动画完成）
});

~~核心特性~~：

核心逻辑：
根据元素的当前状态，在淡入和淡出效果之间进行切换。
- 如果元素当前是可见的，它会执行淡出（fadeOut） 动画，最终将 display 属性设置为 none。
- 如果元素当前是隐藏的（例如 display: none），它会执行淡入（fadeIn） 动画，并将 display 属性恢复为其原本的值（如 block, inline 等）。

fadeTo()

$els.fadeTo()：()，动画，用于将匹配元素的不透明度逐渐调整到一个指定的目标值。

$els.fadeTo()：(duration,opacity,easing?,complete?)，带 Duration 和 opacity 参数：自定义动画。
- duration：number|string，指定动画运行时间的毫秒数，支持预定义字符串：
  - slow：600ms
  - normal：400ms
  - fast：200ms
- opacity：number，动画结束时元素的目标不透明度。取值范围: 0 到 1 之间的数字。
  - 0: 完全透明（不可见，但仍在文档流中）。
  - 1: 完全不透明（完全可见）。
  - 0.5: 50% 透明。
- easing?：string，默认：swing，表示动画在不同时间点所使用的速度曲线，支持缓动函数：
  - swing：开始和结束时稍慢，在中间阶段更快。
  - linear：以恒定的速度进行动画。
- complete?：()=>void，在动画完成后触发的回调函数。

$els.fadeTo()：(options)，带 Options 对象参数：高级动画控制。

options：object，包含多个属性的对象，提供对动画更高级、更精确的控制。

属性	类型	描述
`duration`	`Number/String`	同第二种语法中的 `duration`。
`easing`	`String`	同第二种语法中的 `easing`。
`complete`	`Function`	同第二种语法中的 `complete`。
`queue`	`Boolean/String`	决定是否将动画放入效果队列中。默认为 `true`，表示按顺序执行。如果设为 `false`，动画将立即开始。
`step`	`Function`	动画每一步（每帧）都会调用的函数，可用于自定义属性值。
`progress`	`Function`	动画每一步（每帧）都会调用的函数，用于监测动画进程。
`start`	`Function`	在动画开始时触发的函数。
`done`	`Function`	在动画成功完成时触发的函数（Promise 接口）。
`fail`	`Function`	在动画失败时触发的函数（Promise 接口）。
`always`	`Function`	在动画完成或失败时都会触发的函数（Promise 接口）。

返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

示例：

经典用法：创建半透明覆盖层或模态框背景：

背景变暗但依然存在，不会像 fadeOut() 那样被设置为 display: none。

// 1. 显示一个半黑色遮罩层
$("#overlay").fadeTo("slow", 0.7); // 调整到 70% 不透明度

// 2. 稍后，当需要隐藏遮罩时，可以将其不透明度调回 0
$("#close-button").click(function() {
  $("#overlay").fadeTo("slow", 0);
});

高亮后淡化（吸引用户注意力）：

一个元素先高亮，然后逐渐融入背景，用于提示用户某个操作已完成（如“已添加”提示）。

$("#notification")
  .css({ opacity: 1, backgroundColor: "yellow" }) // 1. 立即设置为高亮
  .fadeTo(3000, 0.4, function() { // 2. 在3秒内淡化为40%不透明度
    // 3. 动画完成后，将背景色改回来
    $(this).css("backgroundColor", "");
  });

将所有图片调整到统一的不透明度（鼠标悬停时变清晰）

// 1. 页面加载时，将所有图片设置为半透明
$("img").fadeTo(1000, 0.6);

// 2. 当鼠标悬停时，图片变为不透明
$("img").hover(
  function() {
    // mousein
    $(this).fadeTo(200, 1);
  },
  function() {
    // mouseout
    $(this).fadeTo(200, 0.6);
  }
);

使用选项风格的参数（不常用）

$(".target").fadeTo({
  duration: 500,
  opacity: 0.25,
  easing: "linear",
  complete: function() { alert('Done!'); }
});

链式调用：

注意：下面的 .css() 调用不会等待 fadeTo 动画完成，它会立即执行。如果要等动画完成再执行，需要使用 complete 回调函数。

$("#element")
  .fadeTo(1000, 0.3) // 先淡出到 30% 不透明度
  .css("color", "red"); // 然后立即改变文字颜色（注意：这不会等待动画完成）

~~核心特性~~：

核心区别：
- 与 fadeIn()/fadeOut() 不同，fadeTo() 不会改变元素的 display 属性。
  无论动画结果如何，元素仍然占据文档流中的空间。
  这使得它非常适合创建半透明的覆盖层、高亮效果或精细的透明度过渡，而不希望元素完全隐藏或显示。
关键特性：
必须指定一个目标不透明度（opacity）。
初始状态：
如果元素初始是 display: none，fadeTo 会先将其变为 display: block（或其他适合的显示值）然后再进行动画，因为它需要操作一个可见元素的不透明度。

queue()

$els.queue()：(queueName?, newQueue|callback)，动画队列，用于获取或设置附加在元素上的动画队列。

$els.queue()：(queueName?)，获取队列。
- queueName?：string，默认：fx，指定要操作的队列的名称。
- 返回：
- queues：array，返回第一个匹配元素的指定队列（一个由函数组成的数组）。这允许你查看队列中有哪些函数在等待执行。
$els.queue()：(queueName?,newQueues)，设置队列（添加函数）。
- queueName?：string，默认：fx，指定要操作的队列的名称。
- newQueues：array，一个由函数组成的数组，用于替换元素上现有的整个队列。会清除队列中所有等待执行的任务。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式编程。
$els.queue()：(queueName?,callback)，设置队列（使用回调函数）。
- queueName?：string，默认：fx，指定要操作的队列的名称。
- callback：(next)=>void，一个要添加到队列末尾的新函数。
  - next：()=>void，会自动将下一个函数从队列中取出并执行它。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式编程。

示例：

获取队列内容（Get 模式）：

// 假设我们在 #box 上设置了一些动画
$("#box").slideUp(1000).fadeIn(500);

// 获取 #box 的标准效果队列 ('fx')
var currentQueue = $("#box").queue();
console.log(currentQueue); // 输出一个包含 2 个函数的数组（slideUp 和 fadeIn 的包装函数）

向队列中添加自定义任务（最常用）：

在动画序列之间插入一个非动画操作（如改变 CSS、触发事件）。

$("#message")
  .fadeOut(1000) // 任务 1： 淡出
  .queue(function(next) { // 任务 2： 自定义回调（加入队列）
    // 这是一个同步操作，会立即执行
    $(this).text("内容已更新！").css("color", "red");
    // ！！！至关重要：调用 next() 来继续队列
    next();
  })
  .fadeIn(500); // 任务 3： 淡入（只有在 next() 被调用后才会执行）

创建和使用自定义队列：

可以用队列来管理任何类型的任务序列，不限于动画。

// 1. 向自定义队列 ‘myQueue' 添加任务
$("#log")
  .queue("myQueue", function(next) {
    $(this).append("<p>任务 1 开始</p>");
    setTimeout(function() {
      $(this).append("<p>任务 1 完成</p>");
      next(); // 在异步操作完成后调用 next
    }.bind(this), 1000);
  })
  .queue("myQueue", function(next) {
    $(this).append("<p>任务 2 执行</p>");
    next();
  });

// 2. 手动启动自定义队列的执行
$("#log").dequeue("myQueue");

替换整个队列：

// 清除 #box 的所有待执行动画，并替换为一组新任务
$("#box").queue("fx", [
  function(next) { $(this).fadeTo(500, 0.5, next); },
  function(next) { $(this).slideUp(1000, next); }
]);
// 由于是 'fx' 队列，它会自动开始执行

~~核心特性~~：

底层实现：
jQuery 为每个元素（或元素集合）维护了一个或多个动画队列。
- 默认情况下，动画效果（如 .animate(), .fadeIn(), .slideUp()）会放入名为 fx 的标准效果队列中。
- 这些效果会按照它们被调用的顺序依次、同步地执行。
next 核心机制：
当你的回调函数执行完其任务后，必须调用 next() 函数。
- 这会自动将下一个函数从队列中取出并执行它。
- 如果不调用 next()，队列就会停止，后续的任何函数（包括动画）都不会执行。
标准队列 fx vs 自定义队列：
- fx 队列会自动启动。
- 自定义队列需要手动 .dequeue()。

stop()

$els.stop()：(queue?,clearQueue?,jumpToEnd?)，动画队列，用于立即停止当前正在匹配元素上运行的动画，并可选择性的清空队列或跳转到结束状态。

queue?：string，默认：fx，指定要停止的队列的名称（不常用）。用于处理自定义命名的队列（通过 .queue() 方法创建）。
clearQueue?：boolean，默认：false，停止当前动画，同时是否清空动画队列。
- false：默认，停止当前动画，队列中的下一个动画（如果有的话）会立即开始。
- true：停止当前动画，并清空队列。所有后续的动画都会被移除，不再执行。
jumpToEnd?：boolean，默认：false，停止当前动画，动画是否保持当前的中途状态，还是跳转到动画结束的状态。
- false：默认，停止当前动画，动画保持当前的中途状态。
- true：停止当前动画，动画跳转到动画结束的状态。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式编程。

示例：

解决鼠标悬停菜单的“抖动”问题（最经典用法）：

用于防止快速鼠标悬停和离开导致的动画重复播放。

实现思路：

先停止可能正在进行的任何动画（比如上一个离开动画）
并清空队列，防止多次快速悬停导致动画重复

html

<nav>
  <a href="#" id="menu">菜单</a>
  <ul id="submenu" style="display: none;">
    <li><a href="#">选项一</a></li>
    <li><a href="#">选项二</a></li>
  </ul>
</nav>

$("#menu").hover(
  function() { // mouseenter
    // 先停止可能正在进行的任何动画（比如上一个离开动画）
    // 并清空队列，防止多次快速悬停导致动画重复
    $("#submenu").stop(true, true).slideDown(200);
  },
  function() { // mouseleave
    // 同样，先停止可能正在进行的任何动画（比如上一个展开动画）
    // 并清空队列
    $("#submenu").stop(true, true).slideUp(200);
  }
);

控制元素移动：

假设有一个可以左右滑动的盒子，用户点击按钮可以改变其运动方向。如果用户在运动中途点击，我们可能希望它从当前位置立即开始向新方向移动。

$("#moveRight").click(function() {
  $("#box").stop(false, false).animate({left: '+=200px'}, 1000);
});

$("#moveLeft").click(function() {
  $("#box").stop(false, false).animate({left: '-=200px'}, 1000);
});
// 这里使用 .stop(false, false) 意味着：
// - 停止当前动画，保留在当前位置（不跳转到终点）
// - 不清空队列（虽然这里没有队列，但如果有会继续执行）

立即完成当前动画并开始新动画：

// 如果元素正在淡出，立即让它完全透明，然后开始一个滑动效果
$("#element").stop(false, true).slideUp();

~~核心特性~~：

参数组合与行为模式：

.stop() 方法的行为可以根据两个布尔参数的不同组合分为四种常见情况：

`clearQueue`	`jumpToEnd`	行为描述	适用场景
`false` (默认)	`false` (默认)	温和停止。 1. 立即停止当前动画。 2. 保持元素当前状态。 3. 开始队列中的下一个动画（如果有）。	暂停当前效果，准备进行一个不同的、新的效果。较少使用。
`false`	`true`	完成并继续。 1. 立即完成当前动画（跳到结束状态）。 2. 开始队列中的下一个动画（如果有）。	快速结束当前动画以进入队列中的下一个动画。
`true`	`false`	停止并清空。 1. 立即停止当前动画。 2. 保持元素当前状态。 3. 清空动画队列，所有后续动画被移除。	最常见场景。用户快速交互时（如鼠标快速划过），停止所有动画，防止效果堆积。元素停留在中途状态。
`true`	`true`	完成并清空。 1. 立即完成当前动画（跳到结束状态）。 2. 清空动画队列，所有后续动画被移除。	需要立即让元素达到当前动画的最终状态，并确保不会有任何后续动画干扰。

常见用途：
1. 防止动画堆积：在频繁触发的事件（如 hover, click）中，这是最重要的用途。
2. 创建中断式动画：如游戏或交互式应用中的控制。
3. 管理复杂动画序列：在特定条件下终止序列。

delay()

$els.delay()：(duration, queueName?)，动画队列，用于在动画队列中设置一个定时器，延迟后续队列项目的执行。

duration：number|string，延迟的时间毫秒长度。
- slow：600ms
- normal：400ms
- fast：200ms
queueName?：string，默认：fx，要设置延迟的队列名称。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式编程。

示例：

创建简单的动画序列：

// 元素先淡出，等待1秒，然后滑下
$("#element")
  .fadeOut(1000)
  .delay(1000)       // 延迟1秒
  .slideDown(1000);

在多个动画之间添加延迟：

// 创建更复杂的动画序列
$("#box")
  .fadeIn(500)           // 淡入
  .delay(200)            // 短暂暂停
  .animate({left: '200px'}, 1000) // 向右移动
  .delay(500)            // 再次暂停
  .animate({top: '100px'}, 800); // 向下移动

使用预定义速度值：

// 使用字符串值设置延迟
$("#notification")
  .fadeIn("fast")
  .delay("slow")         // 延迟600ms
  .fadeOut("fast");

为列表项创建阶梯式动画效果

// 为列表项创建阶梯式动画效果
$("li")
  .each(function(index) {
    $(this)
      .delay(200 * index) // 每个元素延迟时间递增
      .fadeIn(500);
  });

~~核心特性~~：

工作原理：
在 jQuery 动画队列中插入一个特殊的"延迟"步骤：
1. 它不会改变元素的当前状态
2. 它只是设置一个定时器，延迟后续队列项目的执行
3. 它只影响后续添加到同一队列的动画效果

~~注意事项~~：

只影响动画队列：不会影响非动画方法

// 正确：delay() 影响后续动画方法
$("#element")
  .fadeOut(500)
  .delay(1000)    // 这个延迟会影响后面的 slideDown()
  .slideDown(500);

// 错误：delay() 不会影响非动画方法
$("#element")
  .delay(1000)    // 这个延迟是无效的
  .css("color", "red"); // 会立即执行，不会延迟

使用回调函数处理非动画操作：

如果需要在延迟后执行非动画操作，使用 queue()

// 如果需要在延迟后执行非动画操作，使用 queue()
$("#element")
  .fadeOut(500)
  .delay(1000)
  .queue(function(next) {
    // 这里可以执行非动画操作
    $(this).css("background-color", "blue");
    next(); // 必须调用 next() 来继续队列
  })
  .fadeIn(500);

与自定义队列配合使用：

// 在自定义队列中使用 delay()
$("#element")
  .queue("custom", function(next) {
    $(this).animate({width: '200px'}, 1000);
    next();
  })
  .delay(500, "custom")  // 在自定义队列中延迟
  .queue("custom", function(next) {
    $(this).animate({height: '200px'}, 1000);
    next();
  })
  .dequeue("custom"); // 手动启动自定义队列

dequeue()

$els.dequeue()：(queueName?)，动画队列，用于手动执行匹配元素队列中的下一个函数。常用于手动执行自定义队列。

queueName?：string，默认：fx，要执行队列的名称，可以指定任何自定义队列名称。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式编程。

示例：

基本用法：手动执行队列中的下一个函数：

// 创建一个自定义队列并添加任务
$("#element")
  .queue("myQueue", function(next) {
    console.log("任务 1 开始");
    setTimeout(() => {
      console.log("任务 1 完成");
      next(); // 调用 next() 继续队列
    }, 1000);
  })
  .queue("myQueue", function(next) {
    console.log("任务 2 执行");
    next(); // 继续队列
  });

// 手动启动队列执行
$("#element").dequeue("myQueue");

配合标准动画队列 fx 使用：

对于标准 'fx' 队列，通常不需要手动调用 dequeue()，jQuery 会自动处理

// 在动画序列中插入自定义操作
$("#box")
  .fadeOut(1000)
  .queue(function(next) {
    // 自定义操作
    $(this).css("background-color", "red");
    console.log("颜色已更改");
    next(); // 必须调用 next() 来继续动画队列
  })
  .fadeIn(1000);

// 对于标准 'fx' 队列，通常不需要手动调用 dequeue()
// jQuery 会自动处理

~~核心特性~~：

队列系统：
jQuery 为每个元素维护了一个或多个函数队列：
- 标准效果队列 (fx): 用于存储动画效果，jQuery 会自动管理这个队列。
- 自定义队列: 开发者创建的任何其他名称的队列，需要手动管理。

配合 queue() 使用：

dequeue() 通常与 queue() 方法配合使用：

使用 queue() 向队列中添加函数
使用 dequeue() 手动启动或继续队列执行

// 创建并执行自定义队列
$("#element")
  // 1. 使用 `queue()` 向队列中添加函数
  .queue("custom", function(next) {
    console.log("第一步");
    next(); // 手动调用继续执行
  })
  .queue("custom", function(next) {
    console.log("第二步");
    next();
  })

  // 2. 使用 `dequeue()` 手动启动或继续队列执行
  .dequeue("custom"); // 手动启动队列

~~注意事项~~：

手动调用需求: 对于自定义队列（非 fx 队列），必须手动调用 dequeue() 来启动队列执行。
标准队列的自动管理: 对于标准的 fx 动画队列，jQuery 会自动调用 dequeue()，通常不需要手动干预。
队列函数中的 next 参数: 在队列函数中，必须调用 next() 参数（或手动调用 dequeue()）来继续执行队列中的下一个函数。
链式调用: dequeue() 返回 jQuery 对象，支持链式调用，但要注意时序问题。
性能考虑: 过度使用自定义队列和手动队列管理可能会使代码变得复杂，应谨慎使用。

clearQueue()

$els.clearQueue()：(queueName?)，动画队列，用于移除匹配元素队列中所有尚未执行的函数，但不会停止当前正在执行的函数。

queueName?：string，默认：fx，要清空的队列名称。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式编程。

示例：

基本用法：清空默认动画队列：

// 创建一个动画序列
$("#element")
  .animate({width: '200px'}, 1000)
  .animate({height: '200px'}, 1000)
  .animate({left: '100px'}, 1000);

// 在某个时刻清空队列（移除尚未执行的动画）
$("#clearButton").click(function() {
  $("#element").clearQueue(); // 清空标准效果队列
});

清空自定义队列：

// 创建自定义队列并添加任务
$("#element")
  .queue("myQueue", function(next) {
    console.log("任务 1");
    next();
  })
  .queue("myQueue", function(next) {
    console.log("任务 2");
    next();
  });

// 清空自定义队列
$("#element").clearQueue("myQueue");

配合 stop() 使用：停止当前动画并清空队列

// 停止当前动画并清空队列
$("#stopAllButton").click(function() {
  $("#element")
    .stop(true)      // 停止当前动画，跳转到结束状态
    .clearQueue();   // 清空队列中所有待执行的动画
});

在动画序列中条件性清空队列

// 创建动画序列，但提供中断机制
$("#element")
  .animate({width: '200px'}, 1000)
  .queue(function(next) {
    // 检查是否应该继续执行
    if ($("#cancelAnimation").is(":checked")) {
      $(this).clearQueue(); // 清空后续队列
    } else {
      next(); // 继续执行队列
    }
  })
  .animate({height: '200px'}, 1000);

~~注意事项~~：

不影响当前执行的动画：只移除待执行的函数，不影响当前动画

与 delay() 方法的交互：delay() 实际上是在队列中插入一个定时器，清空队列会移除 delay() 和后续的 fadeOut()

// delay() 实际上是在队列中插入一个定时器
$("#element")
  .fadeIn(500)
  .delay(2000)        // 这是一个队列项目
  .fadeOut(500);

// 清空队列会移除 delay() 和后续的 fadeOut()
$("#element").clearQueue();

不会取消正在进行的异步操作：

// 如果队列中有发起异步操作（如 AJAX）的函数
$("#element").queue(function(next) {
  $.get("/api/data", function(response) {
    // 这个回调函数仍然会执行，即使队列被清空
    console.log(response);
    next();
  });
});

// 清空队列不会取消已经发起的 AJAX 请求
$("#element").clearQueue();

链式调用

addBack()

$els.addBack()：(selector?)，链式调用，用于将堆栈中的前一个元素集合添加到当前集合中，创建一个新的组合元素集合。

selector?：string，选择器，用于过滤要添加回集合中的元素。
返回：
$els：jQuery，返回新的 jQuery 对象，包含原始元素集合加上先前选择的元素集合。

~~基本示例~~：

基本用法：

html

<div class="container">
  <p>段落 1</p>
  <p class="special">段落 2</p>
  <p>段落 3</p>
</div>

// 选择所有段落，然后选择特殊段落，最后将两者都添加回集合
$('p')                    // 选择所有 <p> 元素
  .css('color', 'blue')   // 将所有段落变为蓝色
  .filter('.special')     // 过滤出 .special 段落
  .css('font-weight', 'bold') // 将特殊段落变为粗体
  .addBack()              // 添加回所有段落到当前集合
  .css('background-color', 'yellow'); // 将所有段落背景变为黄色

使用选择器过滤：

// 使用选择器过滤要添加回的元素
$('div')
  .find('p')              // 找到 div 中的所有段落
  .addBack('div.container') // 只添加回 class 为 container 的 div
  .css('border', '1px solid red');

复杂的 DOM 遍历链：

html

<ul class="main-list">
  <li>项目 1</li>
  <li class="highlight">项目 2</li>
  <li>项目 3</li>
</ul>
<ul class="secondary-list">
  <li>子项目 A</li>
  <li>子项目 B</li>
</ul>

$('ul.main-list')
  .find('li')             // 选择主列表中的所有 li
  .css('color', 'blue')   // 将它们变为蓝色
  .end()                  // 返回到主列表
  .find('.highlight')     // 选择高亮项目
  .css('font-weight', 'bold') // 变为粗体
  .addBack()              // 添加回所有主列表的 li
  .css('background-color', '#f0f0f0'); // 将所有背景变为浅灰色

~~核心特性~~：

对比 .end()：

.addBack()：合并前后两个集合。
.end()：返回前一个状态。

// 使用 .end() - 返回前一个状态
$('div')
  .find('p')      // 当前集合: 所有段落
  .css('color', 'red')
  .end()          // 返回前一个集合: 所有 div
  .css('border', '1px solid blue');

// 使用 .addBack() - 合并前后两个集合
$('div')
  .find('p')      // 当前集合: 所有段落
  .css('color', 'red')
  .addBack()      // 合并集合: 所有 div + 所有段落
  .css('border', '1px solid green');

end()

$els.end()：()，链式调用，用于结束当前链中最近的一次过滤操作，并将匹配元素集合还原为之前的状态。

返回：
$els：jQuery，返回上一个 jQuery 对象，即最近一次破坏性操作之前的元素集合。
- 如果之前没有破坏性操作，返回一个空的 jQuery 对象。

~~基本示例~~：

基本用法：

html

<div class="container">
  <div class="item">项目 1</div>
  <div class="item special">特殊项目</div>
  <div class="item">项目 3</div>
</div>

$(document).ready(function() {
  // 查找所有项目，然后过滤出特殊项目，最后返回到所有项目
  $('.container')
    .find('.item')          // 找到所有项目
    .filter('.special')     // 过滤出特殊项目 $('.special')
    .addClass('highlight')  // 给特殊项目添加高亮
    .end()                  // 返回到所有项目 $('.item')
    .addClass('border');    // 给所有项目添加边框
    
  // 结果：
  // - 特殊项目有 highlight 类
  // - 所有项目都有 border 类
});

多次使用 .end()：

// 多层链式操作中使用多个 .end()
$('.container')
  .find('.item')          // 找到所有项目
  .css('color', 'blue')   // 设置所有项目文字为蓝色
  .filter('.special')     // 过滤出特殊项目
  .css('font-weight', 'bold') // 设置特殊项目为粗体
  .end()                  // 返回到所有项目 $('.item')
  .find('.sub-item')      // 找到所有子项目
  .css('background', '#eee') // 设置子项目背景
  .end()                  // 返回到所有项目 $('.item')
  .addClass('processed'); // 给所有项目添加 processed 类

~~核心特性~~：

破坏性操作：
.end() 方法只对"破坏性"操作有效，即那些改变当前元素集合的操作，如：
- .find()
- .filter()
- .children()
- .parent()
- .siblings()
- .next()
- .prev()
- 等等
空集合：如果之前没有破坏性操作，.end() 会返回一个空的 jQuery 对象。

其他

get()

$els.get()：(index?)，工具方法，用于从 jQuery 对象中获取底层的 DOM 元素。可以将 jQuery 对象转换回原生 DOM 元素。

$els.get()：()，获取所有 DOM 元素的数组。
- 返回：
- els：array，返回包含所有匹配的 DOM 元素的数组。
  - 如果集合为空，返回空数组。
$els.get()：(index?)，获取特定索引的 DOM 元素。
- index?：number，要获取的元素的索引（从 0 开始）。
  - 如果为负数，则从集合末尾开始计数（从 -1 开始）。
- 返回：
- el：Element|undefined，返回指定索引的 DOM 元素。
  - 如果索引超出范围，返回 undefined。

~~基本示例~~：

基本用法：获取 DOM 元素：

// 获取所有匹配的DOM元素（数组）
var allDivs = $('div').get();
console.log(allDivs); // [div, div, div, ...] (DOM元素数组)
console.log(Array.isArray(allDivs)); // true

// 获取第一个匹配的DOM元素
var firstDiv = $('div').get(0);
console.log(firstDiv); // <div>... (单个DOM元素)
console.log(firstDiv.tagName); // "DIV" (使用原生属性)

// 获取最后一个匹配的DOM元素（使用负索引）
var lastDiv = $('div').get(-1);
console.log(lastDiv); // 最后一个div元素

// 获取特定位置的元素
var thirdDiv = $('div').get(2);
console.log(thirdDiv); // 第三个div元素

~~核心特性~~：

对比 .eq()：

.get()：返回DOM元素
.eq()：返回jQuery对象

// 使用 .get() - 返回DOM元素
var domElement = $('div').get(0);
domElement.style.color = 'red'; // 使用原生API
// domElement.css('color', 'red'); // 错误：DOM元素没有.css()方法

// 使用 .eq() - 返回jQuery对象
var jqueryObject = $('div').eq(0);
jqueryObject.css('color', 'blue'); // 使用jQuery方法
jqueryObject.hide().show(); // 链式调用

toArray()

$els.toArray()：()，工具方法，用于将匹配元素集合中的所有 DOM 元素转换为一个纯 JS 数组。

返回：
arr：array，返回一个包含所有匹配的 DOM 元素 的纯 JS 数组。
- 如果集合为空，返回空数组。

~~基本示例~~：

将 jQuery 对象转换为数组：

转换后可以使用原生 JS 数组的方法操作

// 获取所有div元素的数组
var divArray = $('div').toArray();
console.log(divArray); // [div, div, div, ...] (纯DOM元素数组)
console.log(Array.isArray(divArray)); // true

// 检查数组长度
console.log('找到 ' + divArray.length + ' 个div元素');

// 遍历数组
divArray.forEach(function(div, index) {
  console.log('Div ' + index + ': ' + div.id);
  div.classList.add('processed'); // 使用原生classList API
});

使用原生数组方法操作 DOM 元素：

.toArray() 的主要优势是可以在返回的数组上使用所有原生 JavaScript 数组方法：

// 使用filter过滤元素
var visibleDivs = $('div').toArray().filter(function(div) {
  return div.offsetWidth > 0 && div.offsetHeight > 0;
});
console.log('可见的div数量: ' + visibleDivs.length);

// 使用map转换元素数组
var divIds = $('div').toArray().map(function(div) {
  return div.id || '无ID';
});
console.log('所有div的ID: ', divIds);

// 使用find查找特定元素
var specialDiv = $('div').toArray().find(function(div) {
  return div.classList.contains('special');
});
if (specialDiv) {
  specialDiv.style.border = '2px solid red';
}

// 使用some检查条件
var hasHiddenDivs = $('div').toArray().some(function(div) {
  return div.style.display === 'none';
});
console.log('是否有隐藏的div: ' + hasHiddenDivs);

~~核心特性~~：

对比 .get()：

.toArray()：总是返回数组。
.get()：无参数时返回数组，有参数时返回单个元素。

// .toArray() - 总是返回数组
var array1 = $('div').toArray(); // 总是返回数组
console.log(Array.isArray(array1)); // true

// .get() - 返回值类型取决于参数
var array2 = $('div').get();    // 返回数组
var element = $('div').get(0);  // 返回单个元素
console.log(Array.isArray(array2)); // true
console.log(Array.isArray(element)); // false

each()

$els.each()：(callback)，遍历方法，用于遍历一个 jQuery 对象中的所有 DOM 元素，并对每个元素执行一个指定的回调函数。

callback：(index, element)=>void，
- index：number，当前迭代元素在集合中的索引（从 0 开始）。
- element：Element，当前迭代的 原生 DOM 元素。
返回：
$els：jQuery，返回原始的 jQuery 对象，支持链式调用。

~~基本示例~~：

基本遍历和操作：

循环每一个 <li> 元素，并修改其文本内容和颜色。

html

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

$('li').each(function(index, el) {
  // el 是原生 DOM 元素
  console.log('索引: ' + index + ', 文本: ' + el.textContent);

  // 使用 $(this) 来调用 jQuery 的方法
  $(this).css('color', 'red');

  // 或者使用参数 el，效果同上
  // $(el).css('color', 'red');
});

提前终止循环：
- 在回调函数中返回 false 可以提前跳出循环（类似于普通循环中的 break 语句）。
- 返回 true 或 undefined（即不返回任何值）则会跳过当前迭代，进入下一个（类似于 continue 语句）。
js
```
$('li').each(function(index) {
  if (index === 2) {
    // 当索引为 2 时，终止循环
    return false; // 相当于 break
  }
  console.log($(this).text());
});
// 这将只打印前两个 li 的文本
```
1
2
3
4
5
6
7
8

~~核心特性~~：

对比 $.each()：

特性	`$('selector').each()`	`$.each(collection, callback)`
调用方式	实例方法	静态方法
调用对象	jQuery 对象（DOM 元素集合）	任何数组或类数组对象、普通对象
回调参数	`index, element`	`index, value` 或 `key, value`
内部 `this`	当前原生 DOM 元素	当前迭代的值（value）
主要用途	遍历和操作 DOM 元素	遍历数组或对象的数据

// $.each() 遍历数组
var myArray = ['a', 'b', 'c'];
$.each(myArray, function(index, value) {
  console.log('索引：' + index + ', 值：' + value);
});

// $.each() 遍历对象
var myObject = { name: 'John', age: 30, city: 'New York' };
$.each(myObject, function(key, value) {
  console.log('属性：' + key + ', 值：' + value);
});

jQuery ​

索引 ​

jQuery ​

构造方法 ​

jQuery()@ ​

静态方法 ​

ready()@ ​

noConflict() ​

ajax()@ ​

isArray() ​

map() ​

trim() ​

each() ​

方法 ​

过滤器 ​

eq() ​

first() ​

last() ​

not() ​

filter() ​

find() ​

is() ​

odd() ​

even() ​

文本操作 ​

text() ​

html() ​

val() ​

属性操作 ​

addClass() ​

hasClass() ​

removeClass() ​

toggleClass() ​

attr() ​

removeAttr() ​

prop() ​

removeProp() ​

data() ​

removeData() ​

CSS 操作 ​

css() ​

width() ​

height() ​

innerWidth() ​

innerHeight() ​

outerWidth() ​

outerHeight() ​

offset() ​

position() ​

scrollTop() ​

DOM 操作 ​

append() ​

prepend() ​

after() ​

before() ​

appendTo() ​

prependTo() ​

insertAfter() ​

insertBefore() ​

remove() ​

empty() ​

replaceAll() ​

replaceWith() ​

clone() ​

事件处理 ​

on() ​

off() ​

trigger() ​

click() ​

hover() ​

mouseenter() ​

mouseleave() ​

keydown() ​

动画 ​

animate()@ ​

hide() ​

show() ​

toggle() ​

fadeIn() ​

fadeOut() ​

jQuery

索引

jQuery

构造方法

jQuery()@

静态方法

ready()@

noConflict()

ajax()@

isArray()

map()

trim()

each()

方法

过滤器

eq()

first()

last()

not()

filter()

find()

is()

odd()

even()

文本操作

text()

html()

val()

属性操作

addClass()

hasClass()

removeClass()

toggleClass()

attr()

removeAttr()

prop()

removeProp()

data()

removeData()

CSS 操作

css()

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

offset()

position()

scrollTop()

DOM 操作

append()

prepend()

after()

before()

appendTo()

prependTo()

insertAfter()

insertBefore()

remove()

empty()

replaceAll()

replaceWith()

clone()

事件处理

on()

off()

trigger()

click()

hover()

mouseenter()

mouseleave()

keydown()

动画

animate()@

hide()

show()

toggle()

fadeIn()

fadeOut()