Thursday , August 24 2017
Home / jquery / JQuery Method Chaining Example Tutorial

JQuery Method Chaining Example Tutorial

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 :


<!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>

Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Recommended

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *