jQuery 链式操作

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

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

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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://www.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://www.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>