如何在jQuery中使用方法链

jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档，或者更确切地说，文档对象模型（DOM）和JavaScript之间的互动。阐述这些术语可以简化HTML文档的遍历、操作、浏览器事件处理、DOM动画、AJAX交互和跨浏览器的JavaScript开发。

什么是方法链？

jQuery提供了另一个强大的功能，称为方法链，允许我们在同一组元素上执行多个动作，所有这些都在一行代码中。

它是如何工作的？

我们实例化一个新的jQuery对象，它允许我们操作所选的元素。链式方法再次返回jQuery对象，允许我们使用另一个直接调用返回值的方法，也就是CSS()方法。

语法:

$(‘selector’).method1().method2().method3()

例子1：我们正在添加两种方法，一种是宽度上的动画，另一种是字体大小上的动画。

$("p").animate({width: "100%"}).animate({fontSize: "46px"});

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
    </script>
    <style>
        p {
            width: 200px;
            padding: 40px 0;
            font: bold 24px sans-serif;
            text-align: center;
            background: #aaccaa;
            border: 1px solid #63a063;
            box-sizing: border-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3><b>Chaining</b></h3>
  
    <p>GeeksforGeeks</p>
    <button type="button" class="start">
        Start Chaining</button>
    <script>
        (document).ready(function () {
            (".start").click(function () {
                $("p").animate({ width: "100%" })
                    .animate({ fontSize: "46px" });
            });
        });  
    </script>
</body>
  
</html>

输出:

如何在jQuery中使用方法链？

例子2：在下面的代码中，我们使用jQuery中的链式概念来隐藏按钮。

<!DOCTYPE html>
<html>
  
<head>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <p id='gfg'>Button!!! Hide me</p>
  
    <button>Click me</button>
  
    <script>
        (document).ready(function () {
            ("button").click(function () {
                $("#gfg").css("color", "green")
                  .slideUp(1909);
            });
        });
    </script>
</body>
  
</html>