# 链式调用

URL: https://caijiao.org/jquery/09-advanced/01-chaining
Source: docs/jquery/09-advanced/01-chaining.md
Description: 本文深入介绍 jQuery 的链式调用机制，通过多个方法连续调用提升代码可读性与执行效率，是掌握 jQuery 编程风格的重要技巧。

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

## 什么是链式调用？

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

### 示例代码：

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

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

## 为什么使用链式调用？

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

## 多行链式写法建议

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

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

## 注意事项

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

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

[在线代码演示](/jquery/demos/31.html)