链式调用

介绍jQuery的链式调用特性，包括链式调用的原理、优势和实际应用示例。

什么是链式调用

链式调用是指在一个语句中对同一个元素调用多个 jQuery 方法。

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

链式调用的原理

jQuery 的每个方法都会返回 jQuery 对象本身，这使得多个方法可以串联在一起调用。

// 链式调用
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

// 等价于
$("#p1").css("color", "red");
$("#p1").slideUp(2000);
$("#p1").slideDown(2000);

链式调用的优势

代码简洁：减少重复代码
提高性能：减少 DOM 查询次数
易于阅读：代码逻辑清晰
减少变量：不需要中间变量

链式调用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 链式调用示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 200px;
    border-radius: 8px;
    margin: 10px auto;
    cursor: pointer;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .code-block {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 链式调用</h1>

  <div class="demo-section">
    <h3>链式调用演示</h3>
    <div class="box" id="demoBox">点击我</div>
    <button onclick="chainDemo1()">演示 1</button>
    <button onclick="chainDemo2()">演示 2</button>
    <button onclick="chainDemo3()">演示 3</button>
    <button onclick="resetBox()">重置</button>
  </div>

  <div class="demo-section">
    <h3>链式调用代码</h3>
    <div class="code-block">
// 演示 1：改变颜色、文本、动画
$("#demoBox")
  .css("background-color", "#e74c3c")
  .text("颜色已改变")
  .fadeOut(1000)
  .fadeIn(1000);

// 演示 2：添加类、改变样式、动画
$("#demoBox")
  .addClass("active")
  .css({
    "background-color": "#2ecc71",
    "transform": "scale(1.2)"
  })
  .slideUp(1000)
  .slideDown(1000);

// 演示 3：多个动画串联
$("#demoBox")
  .fadeOut(500)
  .fadeIn(500)
  .slideUp(500)
  .slideDown(500)
  .animate({
    "width": "300px",
    "height": "300px"
  }, 1000);
    </div>
  </div>
</div>

<script>
function chainDemo1() {
  $("#demoBox")
    .css("background-color", "#e74c3c")
    .text("颜色已改变")
    .fadeOut(1000)
    .fadeIn(1000);
}

function chainDemo2() {
  $("#demoBox")
    .css({
      "background-color": "#2ecc71",
      "transform": "scale(1.2)"
    })
    .slideUp(1000)
    .slideDown(1000);
}

function chainDemo3() {
  $("#demoBox")
    .fadeOut(500)
    .fadeIn(500)
    .slideUp(500)
    .slideDown(500)
    .animate({
      "width": "300px",
      "height": "300px"
    }, 1000);
}

function resetBox() {
  $("#demoBox")
    .css({
      "background-color": "#3498db",
      "transform": "scale(1)",
      "width": "200px",
      "height": "200px"
    })
    .text("点击我")
    .show();
}
</script>

</body>
</html>

链式调用注意事项

某些方法会破坏链：如 get()、index() 等方法不返回 jQuery 对象
适时换行：长链式调用建议换行，提高可读性
注释说明：复杂的链式调用应该添加注释
性能考虑：过长的链式调用可能影响调试

总结

链式调用是 jQuery 的一个重要特性，它让代码更加简洁、高效。合理使用链式调用可以大大提升代码质量和开发效率。

上一章：文档就绪函数

下一章：jQuery 对象与 DOM 对象