Jquery 简明教程

jQuery - Chaining

在我们讨论 jQuery Chaining 方法之前，先考虑以下情况：当你想对某个 HTML 元素执行以下操作时：

Before we discuss about jQuery Chaining of Methods, Consider a situation when you want to perform the following actions on an HTML element:

1 - Select a paragraph element.
2 - Change the color of the paragraph.
3 - Apply FadeOut efect on the paragraph.
4 - Apply FadeIn effect on the paragraph.

以下 jQuery 程序用于执行以上操作：

Following is the jQuery program to perform the above mentioned actions:

<!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 Method Chaining

jQuery 方法链允许我们使用一个语句对同一个元素(集合)调用多个 jQuery 方法。这能提高程序的性能，因为使用链式方法时，我们不必每次都解析整个页面以查找元素。

jQuery method chaining allows us to call multiple jQuery methods using a single statement on the same element(s). This gives a better performance because while using chaining, we do not need to parse the whole page every time to find the element.

要对不同的方法使用链式方法，我们需要简单地将该方法追加到前一个方法之后。例如，我们上面的程序可以写成如下形式：

To chain different methods, we simply need to append the method to the previous method. For example our above program can be written as below:

<!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>

Animation with Chaining

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

We can take advantage of jQuery Method Chaining while writing jQuery animation programs. Following is a simple animation program written with the help of chaining:

<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>