jQuery的链式调用（Chaining），也就是在同一个jQuery对象上连续调用多个方法

一、连续操作同一元素

场景：对同一元素进行多次操作（如修改样式、添加类、动画等），无需重复选择元素。

示例代码： 

$("#box").css("color", "red")          // 修改文字颜色.addClass("highlight")        // 添加类.slideUp(1000)                // 向上滑动隐藏.slideDown(1000);             // 向下滑动显示

优势：减少 DOM 查询次数，代码更简洁。

二、动画序列

场景：按顺序执行多个动画效果（如淡入、滑动、缩放等）。

示例代码： 

$("#animate-element").fadeIn(500)                  // 淡入.animate({ left: "+=50px" }, 1000)  // 向右移动.fadeOut(500);                // 淡出

注意：默认情况下，动画会按顺序执行，但异步操作（如 fadeIn()）不会等待前一个动画完成。若需严格顺序，可使用回调函数或 .promise()。

三、事件绑定与样式修改结合

场景：为元素绑定事件，并在事件触发时修改样式或执行其他操作。

示例代码： 

$("#myButton").click(function() {$(this)                     // 当前按钮.css("background-color", "blue")  // 修改背景色.siblings()               // 选择兄弟元素.hide();                  // 隐藏兄弟元素});

四、嵌套操作与 .end() 的使用

场景：在嵌套选择后返回到上一操作的上下文。

示例代码： 

$("#parent").find("li")                   // 选择子元素 <li>.css("color", "red")        // 修改子元素颜色.end()                        // 返回到 #parent.hide();                      // 隐藏父元素

五、插件开发中的链式调用

场景：在自定义插件中返回 this 以支持链式调用。

示例代码： 

(function($) {$.fn.myPlugin = function(options) {return this.each(function() {$(this).css("border", "1px solid black");  // 插件逻辑});};
})(jQuery);
// 使用插件并继续链式调用
$("#element").myPlugin()                   // 调用自定义插件.addClass("custom");          // 添加类

六、多步骤表单验证

场景：对表单字段进行多步骤验证和反馈。 

$("#username").on("input", function() {$(this).removeClass("error success")  // 移除旧状态.siblings(".error-message")    // 找到提示信息.text("");                     // 清空提示}).submit(function(e) {e.preventDefault();const value = $(this).val();if (value.trim() === "") {$(this).addClass("error").siblings(".error-message").text("用户名不能为空");} else {$(this).addClass("success").siblings(".error-message").text("输入有效");}});

七、动态内容操作

场景：动态添加/删除元素并应用样式或事件。

示例代码： 

$("#addItem").click(function() {$("<li>New Item</li>")       // 创建新元素.appendTo("#list")         // 添加到列表.css("color", "green")     // 设置样式.on("click", function() {  // 绑定事件$(this).remove();        // 点击删除});});

注意事项

方法返回值：确保链式调用中的每个方法返回 jQuery 对象（如 .css()、.animate()）。若方法返回非 jQuery 对象（如 .text()），链式调用会中断。

异步操作：动画或异步方法（如 fadeIn()）不会阻塞后续代码，需通过回调或 .promise() 控制顺序。

代码格式化：链式调用支持多行写法，提高可读性：

$("#element")

 .method1()

 .method2()

 .method3();

八、运行后向上滑动在向下滑动 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://********/test/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("button").click(function(){$("#p1").css("color","red").slideUp(2000).slideDown(2000);});
});
</script>
</head>
<body>
<p id="p1">察看我有什么变化</p>
<button>点击运行</button>
</body>
</html>

链式调用通过减少重复代码、优化性能并增强可读性，成为 jQuery 编程的核心实践之一。合理使用 .end()、插件开发中的 return this 以及嵌套操作，能显著提升代码效率。