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>