jQuery - Chaining

JQuery Method Chaining:

Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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">jQuery is fun!!</p>

<button>Click me</button>

</body>
</html>





Previous
Next Post »

3 comments

Write comments
Lucy singh
AUTHOR
4 October 2017 at 00:16 delete

Nice post! I thank you for sharing this nice blog with us. Likewise, I would like to say something that Happy Heap Marketing is also one of the
PHP Development Training

Reply
avatar
subhrojit
AUTHOR
9 October 2017 at 03:38 delete

thanks for your such good information about jQuery - Chaining. i hope you will provide more information about this.

Thanks
Subhrojit

website development

Reply
avatar
Martina
AUTHOR
14 October 2017 at 00:49 delete

I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job .
iPhone App Development Company, Mobile App Development Company

Reply
avatar