jQuery

[TOC]

索引

~~构造方法~~：

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

~~静态方法~~：

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

方法：

过滤器：

$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.addClass()：(className)，类名操作，用于向匹配元素集合中的每个元素添加一个或多个 CSS 类。
$els.hasClass()：(className )，类名操作，只读，用于检查匹配元素集合中的任何一个元素是否包含指定 CSS 类。
$els.removeClass()：(多态)，类名操作，用于从匹配元素集合中的每个元素移除一个或多个 CSS 类。
$els.toggleClass()：()，类名操作，用于动态操作 CSS 类的重要方法，允许在元素上切换（添加或移除）一个或多个 CSS 类。
属性操作：
$els.attr()：()，HTML 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。
$els.removeAttr()：(attributeName)，HTML 属性操作，用于从匹配元素集合中的每个元素移除一个或多个指定的 HTML 属性。
$els.prop()：()，DOM 属性操作，用于获取或设置匹配元素集合中第一个元素的属性值。
$els.removeProp()：(propertyName)，DOM 属性操作，用于从匹配元素集合中的每个元素移除通过 .prop() 方法设置的 DOM 属性。

CSS 操作：

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

DOM 操作：

插入：
$els.append()：(content,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部末尾插入指定的内容。
$els.prepend()：()，DOM 插入，用于向匹配元素集合中的每个元素的内部开头插入指定的内容。
$els.after()：()，DOM 插入，用于在匹配元素集合中的每个元素后面插入指定的内容。
$els.before()：()，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)，DOM 替换，用指定的内容替换匹配的元素集合中的每个元素。返回被移除的元素集合。
克隆：
$els.clone()：(withDataAndEvents?, deepWithDataAndEvents?)，DOM 克隆，用于创建匹配元素集合的深度副本（包括所有后代元素和文本节点）。

事件处理：

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

动画：

$els.hide()：()，
$els.show()：()，
$els.toggle()：()，
$els.fadeIn()：()，
$els.animate()：()，

其他：

$els.get()：(index?)，工具方法，用于从 jQuery 对象中获取底层的 DOM 元素。可以将 jQuery 对象转换回原生 DOM 元素。
$els.toArray()：()，
$els.each()：()，遍历方法，
$els.addBack()：()，

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()：()，用于执行异步 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，发送请求之前的回调函数。可用于修改 jqXHR 对象或添加自定义头信息。如果此函数返回 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, callback)，遍历方法，用于将一个数组或类数组对象中的每个元素通过一个处理函数进行转换，并返回一个包含所有转换后结果的新数组。

array：array|Array-Like Object，需要被遍历转换的数组或类数组对象。
callback：(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!"); // 这会执行
}

方法

过滤器

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()：()，

// 为列表的第一项和最后一项添加特殊样式
$('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()：

属性操作

addClass()

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

className：className|function，有两种主要的使用形式：
- className：string，字符串参数，一个或多个要添加的 CSS 类名，多个类名之间用空格分隔。
- function：(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()：(多态)，类名操作，用于从匹配元素集合中的每个元素移除一个或多个 CSS 类。

$els.removeClass()：()，无参数，移除所有类。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.removeClass()：(className?)，字符串参数，移除一个或多个类。
- className?：string，一个或多个要移除的 CSS 类名，多个类名之间用空格分隔。
- 返回：
- $els：jQuery，返回原始的 jQuery 对象，支持链式调用。
$els.removeClass()：(callback)，函数参数，通过函数动态移除类。
- callback：(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()：()，类名操作，用于动态操作 CSS 类的重要方法，允许在元素上切换（添加或移除）一个或多个 CSS 类。

$els.toggleClass()：(className)，切换单个或多个类。
- className：string，一个或多个要切换的 CSS 类名，多个类名可以用空格分隔。
$els.toggleClass()：(className, state)，根据条件切换类。
- className：string，一个或多个要切换的 CSS 类名，多个类名可以用空格分隔。
- state：boolean，决定是添加还是移除类：
  - true: 添加类。
  - false: 移除类。
  - 省略：根据类的当前存在状态自动切换。
$els.toggleClass()：(callback)，使用函数动态决定切换。
- callback：(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()：()，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()：()，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

CSS 操作

css()

$els.css()：()，样式操作，用于获取或设置一个或多个 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()：()，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域宽度（不包含内边距、边框和外边距）。

$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()：()，元素尺寸，用于获取或设置匹配元素集合中第一个元素的内容区域高度（不包含内边距、边框和外边距）。

$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()：()，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域宽度加上内边距的宽度（不包含边框和外边距）。

$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()：()，元素尺寸，用于获取匹配元素集合中第一个元素的内容区域高度加上内边距的高度（不包含边框和外边距）。

$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()：()，元素尺寸，用于获取匹配元素集合中第一个元素的内容宽度加上内边距和边框的宽度。通过可选参数，还可以包含外边距。

$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()：()，元素尺寸，用于获取匹配元素集合中第一个元素的内容高度加上内边距和边框的高度。通过可选参数，还可以包含外边距。

$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()：()，元素位置，用于获取或设置匹配元素集合中第一个元素 相对于文档（document）的当前坐标。

$els.offset()：()，获取位置（Getter）。
- 返回：
- offset：{top,left}，返回第一个元素相对于文档的坐标（以像素为单位，不包含单位）。
  - 如果集合为空，返回 undefined。
$els.offset()：(coordinates|function)，设置位置（Setter）
- coordinates：{top,left}，表示要设置的新坐标。
- function：(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() 或手动计算。

scrollTop()

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

$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,...content?)，DOM 插入，用于向匹配元素集合中的每个元素的内部末尾插入指定的内容。

$els.append()：()，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.append()：(content)，使用函数插入内容。
- content：(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()：()，DOM 插入，用于向匹配元素集合中的每个元素的内部开头插入指定的内容。

$els.prepend()：()，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.prepend()：(content)，使用函数插入内容。
- content：(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()：()，DOM 插入，用于在匹配元素集合中的每个元素后面插入指定的内容。

$els.after()：()，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.after()：(content)，使用函数插入内容。
- content：(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()：()，DOM 插入，用于在匹配元素集合中的每个元素前面插入指定的内容。

$els.before()：()，插入内容。
- content：string|Element|Text|array|jQuery，要插入的内容，可以是HTML字符串、DOM元素、文本节点、元素数组或jQuery对象。
- ...content?：多个内容参数，可以同时传入多个内容参数，它们会按顺序被插入。
$els.before()：(content)，使用函数插入内容。
- content：(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)，DOM 替换，用指定的内容替换匹配的元素集合中的每个元素。返回被移除的元素集合。

$els.replaceWith()：(newContent)，替换内容。
- newContent：string|Element|Text|array|jQuery，用来替换目标元素的内容。
$els.replaceWith()：()，使用函数替换内容。
- newContent：(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()：()，事件处理，用于将一个或多个事件处理函数绑定到匹配的元素上。提供了统一的事件绑定接口。

$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()：()，事件处理，用于移除一个或多个通过 .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()：()，事件处理，用于绑定点击事件处理程序和触发元素的点击事件。

$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()：()，事件处理，用于处理鼠标悬停事件的便捷方法，可同时处理 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()：()，事件处理，不会冒泡，用于处理鼠标进入事件。

$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()：()，事件处理，不会冒泡，用于处理鼠标离开事件。

$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()：()，事件处理，用于处理键盘按键按下事件。

$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，因为后者已废弃。

动画

hide()【

$els.hide()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1
****：
js
1
****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

show()【

$els.show()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

toggle()【

$els.toggle()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

fadeIn()【

$els.fadeIn()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

animate()【

$els.animate()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

其他

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()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

each()【

$els.each()：()，遍历方法，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

addBack()【

$els.addBack()：()，

：``，
：``，
：``，
返回：
：``，

~~基本示例~~：

****：
js
1

~~核心特性~~：

****：
js
1
****：
js
1
****：
js
1

~~进阶示例~~：

****：
js
1
****：
js
1
****：
js
1

jQuery ​

索引 ​

jQuery ​

构造方法 ​

jQuery()@ ​

静态方法 ​

ready()@ ​

noConflict() ​

ajax()@ ​

isArray() ​

map() ​

trim() ​

方法 ​

过滤器 ​

eq() ​

first() ​

last() ​

not() ​

filter() ​

find() ​

is() ​

odd() ​

even() ​

属性操作 ​

addClass() ​

hasClass() ​

removeClass() ​

toggleClass() ​

attr() ​

removeAttr() ​

prop() ​

removeProp() ​

CSS 操作 ​

css() ​

width() ​

height() ​

innerWidth() ​

innerHeight() ​

outerWidth() ​

outerHeight() ​

offset() ​

scrollTop() ​

DOM 操作 ​

append() ​

prepend() ​

after() ​

before() ​

appendTo() ​

prependTo() ​

insertAfter() ​

insertBefore() ​

remove() ​

empty() ​

replaceAll() ​

replaceWith() ​

clone() ​

事件处理 ​

on() ​

off() ​

trigger() ​

click() ​

hover() ​

mouseenter() ​

mouseleave() ​

keydown() ​

动画 ​

hide()【 ​

show()【 ​

toggle()【 ​

fadeIn()【 ​

animate()【 ​

其他 ​

get() ​

toArray()【 ​

each()【 ​

addBack()【 ​

jQuery

索引

jQuery

构造方法

jQuery()@

静态方法

ready()@

noConflict()

ajax()@

isArray()

map()

trim()

方法

过滤器

eq()

first()

last()

not()

filter()

find()

is()

odd()

even()

属性操作

addClass()

hasClass()

removeClass()

toggleClass()

attr()

removeAttr()

prop()

removeProp()

CSS 操作

css()

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

offset()

scrollTop()

DOM 操作

append()

prepend()

after()

before()

appendTo()

prependTo()

insertAfter()

insertBefore()

remove()

empty()

replaceAll()

replaceWith()

clone()

事件处理

on()

off()

trigger()

click()

hover()

mouseenter()

mouseleave()

keydown()

动画

hide()【

show()【

toggle()【

fadeIn()【

animate()【

其他

get()

toArray()【

each()【

addBack()【