链式调用

在 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() 等方法结合使用。

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

<div id="demoBox" style="width:100px;height:100px;background:#09f;"></div>
<button id="start">开始动画</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $("#start").click(function () {
    $("#demoBox")
      .css("border-radius", "10px")
      .fadeOut(400)
      .fadeIn(400)
      .slideUp(400)
      .slideDown(400);
  });
</script>