Learn jQuery

jQuery Chaining

JQuery chaining is another robust feature that allows us to perform multiple action on the same set of elements.

When we perform chaining browsers do not have to find the same element's more than once.

Syntax

$(selector).firstaction().secondaction().thirdaction();

Examples

Animate hidden div to fade in.

<!DOCTYPE html> 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>jQuery Chaining Example </title>
</head>
<body>
<button>Click Me</button>
<div style="height:100px;width:100px;display:none;">
Use of jQuery Chaining
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   $("div").slideDown(2000).slideUp(2000).css("color", "blue");
  });
});
</script>