jQuery method chaining is nothing but to make chain of methods i.e. in jquery we can call jquery methods one after the another. To chain method ,we can simply append the action to the previous action. When we chain jquery methods, the code becomes long. But jquery is not strict in syntax. We can format our code as per our choice.
In below code, we have form chain of fadeOut,fadeIn,slideUp and slideDown methods. So, action will be performed on <h1> elements as per provided sequence.
Please follow below steps:-
1)Open notepad or any editor.
2)Add html,head,script and body tag.
3)Add <h1> element and <button> control in body tag.
4)Add jquery CDN link as shown in below code.
5)So, on click of button control chain of methods will be called. Add following jquery code in script section.
<script type="text/javascript">
$(document).ready(function(){
$('#btnClick').click(function(){
$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');
});
});
</script>
In below code, we have called chain of methods using statement:-
$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');
Full Code:-
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnClick').click(function(){
$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');
});
});
</script>
</head>
<body>
<h1>This is sample text.</h1><br/>
<button Id="btnClick">Submit</button>
</body>
</html>
No comments:
Post a Comment