Tutorial

Sign Up

log In

JQuery
jQuery Chaining

❮ Previous

Next ❯

With jQuery chaining, you can perform multiple actions on the same element in a clean, readable way.

Chaining means combining multiple jQuery methods on the same selector in one line, instead of repeating the selector over and over.


jQuery Method Chaining


Method chaining allows you to call multiple jQuery methods on the same element in a single statement.

To chain an action, you simply append the action to the previous action.


It helps:

  • Keep code compact & readable
  • Ensure methods run one after another
  • Reduce repetition of selectors



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:

Example
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box")
.css({
"background-color": "#2ecc71",
"color": "white",
"border-radius": "10px"
})
.slideUp(1000)
.slideDown(1000)
});
});
</script>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.