jQuery - 方法链

在讨论jQuery 方法链之前，考虑一下当您想要对 HTML 元素执行以下操作时的情况：

1 - 选择一个段落元素。
2 - 更改段落的颜色。
3 - 对段落应用淡出效果。
4 - 对段落应用淡入效果。

以下是执行上述操作的 jQuery 程序

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("p").css("color", "#fb7c7c");
         $("p").fadeOut(1000);
         $("p").fadeIn(1000);
      });
   });
</script>
<style>
   button{width:100px;cursor:pointer;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <button>Click Me</button>
</body>
</html>

jQuery 方法链

jQuery 方法链允许我们使用单个语句对相同元素调用多个 jQuery 方法。这可以提高性能，因为在使用链式调用时，我们不需要每次都解析整个页面以查找元素。

要链接不同的方法，我们只需将方法附加到前一个方法即可。例如，我们上面的程序可以写成如下所示：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("p").css("color", "#fb7c7c").fadeOut(1000).fadeIn(1000);
      });
   });
</script>
<style>
   button{width:100px;cursor:pointer;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <button>Click Me</button>
</body>
</html>

带链式调用的动画

在编写 jQuery 动画程序时，我们可以利用 jQuery 方法链。以下是使用链式调用的简单动画程序：

<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("div").animate({left: '250px'})
         .animate({top: '100px'})
         .animate({left: '0px'})
         .animate({top: '0px'});
      });
   });
</script>
<style>
   button {width:125px;cursor:pointer}
   #box{position:relative;margin:3px;padding:10px;height:20px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
<p>Click on Start Animation button to see the result:</p>

<div id="box">This is Box</div>
<button>Start Animation</button>
</body>
</html>

打印页面