Menu Close

jQuery Chaining Method

Codeamend

Here, we can use multiple jquery methods together on a single element. It’s named as a chaining method and it is the big advantage of the jQuery framework. So the binding methods make the code short. Also, the browsers do not have to find the same elements more than once.

Example:

<!DOCTYPE html>
<html>  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>  
<body>
    <center>
        <button id="colors">Click me</button>
        <p id="chain">Chaining method in jQuery</p>  
    </center>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#colors").click(function() {                               
                $("#chain").css("color", "orange")
                .slideUp(1000)
                .slideDown(1000)
                .slideUp(2000)
                .slideDown(2000);
            });
        });
    </script>
</body>  
</html> 
Posted in HTML, jQuery

You can also read...