jQuery 链式调用

jQuery - 方法链

方法链（Method chaining）是 jQuery 的一个强大特性，它允许您在单个语句中连续对同一个 jQuery 对象选择集执行多个方法。

这项技术通过避免重复的元素选择，提高了代码的可读性和性能。

为何使用方法链？

考虑以下未使用方法链的代码：

$("#profileCard").addClass("active");
$("#profileCard").css("border-color", "blue");
$("#profileCard").slideDown(500);

这里，jQuery 必须三次单独查找 ID 为 profileCard 的元素。

使用方法链，您只需选择一次元素，然后直接在结果上调用后续方法：

$("#profileCard").addClass("active").css("border-color", "blue").slideDown(500);

优点：

• 性能：DOM 只需针对初始选择器查询一次。
• 简洁：执行多个操作所需的代码更少。
• 可读性（通常）：可以使操作序列更清晰，尤其是在格式化得当时。

方法链的工作原理

大多数对元素集合进行操作的 jQuery 方法（如 DOM 操作、效果或 CSS 方法）都会返回调用它们的同一个 jQuery 对象。这使得链中的下一个方法能够对同一组元素进行操作。

示例：淡出、更改文本和淡入：

$("#statusMessage").fadeOut(1000) // 返回 #statusMessage 的 jQuery 对象
                   .text("Processing complete!") // 对 #statusMessage 操作，并再次返回该对象
                   .addClass("success") // 对 #statusMessage 操作，并再次返回该对象
                   .fadeIn(1000); // 对 #statusMessage 操作

格式化链式调用

对于较长的链，使用换行和缩进进行格式化可以显著提高可读性。jQuery 会忽略额外的空白符。

示例：格式良好的方法链：

$(".product-item.new")
  .css("border-left", "5px solid green")
  .find(".product-price")
    .text("Special Offer!")
  .end() // 返回到 .product-item.new 选择集
  .slideUp(300)
  .slideDown(500);

在这个示例中，.find() 将选定的元素更改为 .product-price。而 .end() 将选择集恢复到之前的状态（.product-item.new），以便 .slideUp() 和 .slideDown() 方法作用于产品项，而不仅仅是价格。

提示：当链中的遍历方法改变了您正在操作的元素集合，并且您需要返回到之前的集合时，请策略性地使用 .end() 方法。