跳转至

Jquery 链式操作

1.介绍

  jQuery的核心理念是Write less,Do more(写的更少,做的更多)，那么链式方法的设计与这个核心理念不谋而合。那么从深层次考虑这种设计其实就是一种Internal DSL。 通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。 不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

2.案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="start">开始链式操作吧</button>
<p>人生苦短，我用Python</p>
</body>
<script>
    $(function () {
        $("#start").click(function(){
            // $("p").css("color","blue").slideUp(2000).slideDown(2000);
            $("p").css({"color":'blue'}).slideUp(2000).slideDown(2000);
        });
    });
</script>
</html>

带回调函数

如果需要，我们也可以添加多个方法调用。

提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行 

$(function () {
    $("#start").click(function(){
        // $("p").css("color","blue").slideUp(2000).slideDown(2000);
        $("p").css({"color":'blue'})
            .slideUp(2000)
            .slideDown(2000);
    });
});

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。