jQuery -

Chaining

What is jQuery Chaining?

jQuery chaining allows you to execute multiple jQuery methods on the same element(s) within a single statement. This leads to cleaner and more readable code. This tutorial covers the basics and advanced concepts of jQuery chaining with detailed examples and useful tips.

1. Basic Chaining

You can chain multiple jQuery methods to apply multiple actions on the same element(s).

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining - Basic</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#chainButton").click(function(){
                $("div").css("background-color", "yellow").slideUp("slow").slideDown("slow");
            });
        });
    </script>
</head>
<body>
    <div style="background-color: lightblue; padding: 10px;">This is a div element.</div>
    <button id="chainButton">Chain Methods</button>
</body>
</html>

This example demonstrates how to chain the .css(), .slideUp(), and .slideDown() methods on a div element.

2. Chaining with Event Handling

You can chain jQuery methods with event handlers to perform multiple actions in response to an event.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining with Event Handling</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#eventButton").click(function(){
                $("div").css("background-color", "pink").slideUp("slow").slideDown("slow");
            });
        });
    </script>
</head>
<body>
    <div style="background-color: lightblue; padding: 10px;">This is a div element.</div>
    <button id="eventButton">Chain with Event Handling</button>
</body>
</html>

This example shows how to chain methods in a click event handler to change the CSS, slide up, and slide down a div element.

3. Chaining with Animations

You can chain animation methods to create complex animation sequences.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining with Animations</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#animationButton").click(function(){
                $("div").fadeOut("slow").fadeIn("slow").animate({left: "+=50px"});
            });
        });
    </script>
    <style>
        div {position: relative; background-color: lightblue; width: 100px; padding: 10px;}
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <button id="animationButton">Chain Animations</button>
</body>
</html>

This example demonstrates how to chain the .fadeOut(), .fadeIn(), and .animate() methods to create an animation sequence.

4. Chaining with Ajax

You can chain jQuery methods with Ajax calls to perform multiple actions after an Ajax request completes.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining with Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#ajaxButton").click(function(){
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    success: function(result){
                        $("div").html(result.title).slideDown("slow");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="ajaxButton">Load Data and Chain</button>
    <div style="display:none; background-color: lightblue; padding: 10px;"></div>
</body>
</html>

This example shows how to chain methods after an Ajax call to update the content of a div and then slide it down.

5. Chaining with Custom Functions

You can define custom functions and chain them with jQuery methods to create reusable and modular code.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining with Custom Functions</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function customFunction(element) {
            element.slideUp("slow").slideDown("slow");
        }

        $(document).ready(function(){
            $("#customButton").click(function(){
                customFunction($("div")).css("background-color", "lightgreen");
            });
        });
    </script>
</head>
<body>
    <div style="background-color: lightblue; padding: 10px;">This is a div element.</div>
    <button id="customButton">Chain with Custom Function</button>
</body>
</html>

This example demonstrates how to create a custom function and chain it with jQuery methods to animate a div element.