jQuery Chaining

Through jQuery, actions/methods can be linked together.

Chaining allows us to run multiple jQuery methods (on the same element) in one statement.

jQuery method chaining

Until now, we have written one jQuery statement at a time (one right after the other) .

However, there is a technique called chaining that allows us to run multiple jQuery commands on the same element, one right after the other.

Tip: This way, the browser doesn’t have to look for the same element multiple times.

To link an action, you simply append the action to the previous action.

The following example links css(), slideUp() and slideDown() together. The "p1" element will first turn red, then slide up, and then slide down:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">php中文网!!</p>
<button>点我</button>

</body>
</html>

Run and try it

We can also add multiple method calls if necessary .

Tip: When linking, lines of code get messed up. However, jQuery syntax is not very strict; you can write it in the format you want, including line breaks and indentation.

Writing as follows can also run well:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function()
        {
            $("button").click(function(){
                $("#p1").css("color","red")
                        .slideUp(2000)
                        .slideDown(2000);
            });
        });
    </script>
</head>
<body>
<p id="p1">php中文网!!</p>
<button>点我</button>
</body>
</html>

Run it and try it

Tips: jQuery will throw away extra spaces and treat them as one line long code to execute the above line of code.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">php中文网（php.cn)</p> <button>点我</button> </body> </html>

submit Reset Code

Automatic operation

jQuery Chaining

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]