jQuery 链

jQuery 的链式调用（Chaining）让你在同一行里对同一组元素连续执行多个方法，例如 $('#box').css(...).slideUp(...).slideDown(...)。代码更短、更易读，还能减少重复选取元素的开销。

为什么可以链式调用

jQuery 的大部分方法执行完会返回当前的 jQuery 对象（而不是返回 undefined），因此方法后面可以继续跟 .方法()，一个接一个像链条一样连下去：

// 普通写法：每个方法都重新写一次选择器
$('#box').css('color', 'red');
$('#box').slideUp(800);
$('#box').slideDown(800);

// 链式写法：一行完成同样效果
$('#box').css('color', 'red').slideUp(800).slideDown(800);

链的换行与缩进

链条太长时可以换行书写，浏览器会把它们当成同一句，风格也更清晰：

$('#box')
    .css('color', 'red')     // 文字变红
    .slideUp(800)            // 向上收起
    .slideDown(800);         // 再向下展开（动画排队依次播放）

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<button id="run">播放链式动画</button>
<p id="box" style="background:#d9ead3;padding:10px;">观察我的一系列变化</p>

<script>
$(function () {
    $('#run').click(function () {
        // 效果：文字先变蓝并加粗，再收起、展开，最后添加边框
        $('#box')
            .css('color', 'blue')
            .css('font-weight', 'bold')
            .slideUp(600)
            .slideDown(600)
            .css('border', '2px solid green');
    });
});
</script>
</body>
</html>

注意：不是所有方法都能链

只有返回 jQuery 对象的方法才能继续链下去。取值型方法返回的是普通值（字符串、数字等），链条在此中断：

// text() 无参数时返回文本内容（字符串），后面不能再接 .方法()
var txt = $('#box').text();        // 正确：得到字符串
// $('#box').text().css(...)       // 错误：字符串没有 css 方法

// 赋值型方法返回 jQuery 对象，可以继续链
$('#box').text('新内容').css('color', 'red');   // 正确

链式的意义

简洁：省去重复书写 $(选择器)。
高效：只查询一次元素，后续操作都在缓存的对象上进行。
结合动画队列，链还能表达"先做 A、再做 B"的顺序逻辑。

小结

链式调用把多个 jQuery 方法串成一行，代码精简且高效；前提是链上的方法必须返回 jQuery 对象。至此，jQuery 的选择器、事件、效果与链式调用已经串成完整体系，可以开始构建交互页面了。

笔记加载中…

标签：#jQuery

返回知识库