In any object oriented programming, we can call the behaviors by using the object. Similarly in JQuery we can call the JQuery functions using JQuery Method Chaining.

JQuery Method Chaining :

Usually if we want to execute a set of statements, we should write each statement separately and those are executed line by line.  Instead of separating every statement as an individual line, in Jquery we can combine all statements as a single statement. This mechanism is called as JQuery method chaining.

$("#p1").css("color", "green").slideUp(2000);

On the above example, initially JQuery gets the element which is having p1 as id and add color to it and then apply the slideUp effect on it. This process is called JQuery chaining.

JQuery Method Chaining Example :

[html]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Method Chaining demo</title>
<style>
p {
    width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button>SlideUp</button>
    <p>
        Just abserve carefully, new we are going to <i>slide up</i> this
        paragraph.
    </p>

    <script>
        $("button").click(function() {
            $("p").css("color", "#027d3a").slideUp("5000");
        });
    </script>
</body>
</html>

[/html]

Happy Learning 🙂

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

Leave A Comment