Jquery Chaining:
Till now we know that Jquery statements are executed line by line i.e one line after the another, but there is a technique that allows executing multiple Jquery commands in a single line just one after the another called chaining.
Syntax:
For chaining we just need to write one command just after the another.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery Chaining</p>
<button>Click</button>
</body>
</html>
In this example above, the .slideUp() & .slideDown() functions are chained together and will be executed just one after the another.
As chaining line can grow very long therefore we can format it as follows:
$("#p1").slideUp(2000)
.slideDown(2000);
Note:-> As jQuery is not very strict on the syntax we can easily include line breaks and indentations.
0 Comment(s)