链式调用

在 jQuery 中，链式调用是一种常见的编程方式，可以连续执行多个操作而无需多次重复选择器，提升代码简洁性与执行效率。

什么是链式调用？

链式调用（Chaining）是指多个 jQuery 方法在同一个语句中连续调用。jQuery 中大多数方法都会返回 jQuery 对象本身，从而支持链式调用。

示例代码：

$("#box")
  .css("background", "#ff0")
  .slideUp(400)
  .slideDown(400);

这段代码依次为 #box 元素设置背景色、向上滑动并再向下滑动，所有操作在一行完成，简洁明了。

为什么使用链式调用？

• 避免重复选择 DOM，提高性能；
• 结构清晰，易于维护；
• 减少中间变量的使用。

多行链式写法建议

为了提升可读性，可将链式调用分行书写：

$("#menu")
  .addClass("active")
  .fadeOut()
  .fadeIn();

注意事项

• 链式调用只适用于返回 jQuery 对象的方法。
• 某些方法如 .val()（取值时）或 .html()（取值时）返回非 jQuery 值，会中断链式调用。
• 在中间需要执行其他逻辑时，可使用 .end() 或 .each() 等方法结合使用。

示例：链式操作样式与动画

loading