Method Chaining in jQuery Hindi Tutorial

by
Table of Contents hide
1 jQuery Method Chaining
2 अन्य सुझाव

jQuery Method Chaining

jQuery में method chaining के जरिए एक element में एक से अधिक methods लगा सकतें हैं |

कई बार होता है एक selector में कई methods लगाने पडतें हैं | बार बार एक ही selector को लिखना और अलग अलग method लगाने से code काफी लम्बा और messy हो जाता है |

उदाहरण:

<script>
    $(document).ready(function(){
	 $("#btn").click(function(){
	  $('#div1').css('background','pink');
	  $('#div1').slideUp(3000);
	  $('#div1').slideDown(3000);
	 });
	});
</script>

उदाहरण में देखिये div1 में 3 methods लगाना था, तो code को 3 बार लिखना पड़ा जिससे code काफी lengthy हो गया |

इसका समाधान है method chaining, जितनी methods लगानी हो एक statement के जरिये लिखी जा सकती है | आई उदाहरण में देखतें हैं |

उदाहरण:

<!DOCTYPE html>
<html>
<head>
 <style>
  #div1{
        border:2px solid black;
		text-align:center; 
		width:400px;
		height:200px;
		background-color:yellow;
	}
 </style>
</head>
<body>
 <div id="div1">
   <h1>method chaining</h1>
   <p>jquery method chainig tutorial with example</p>
 </div>
  <br>
  <button id="btn">click</button>
  <script src="js/jquery.js"></script>
   <script>
     $(document).ready(function(){
	 $("#btn").click(function(){
	  $('#div1').css('background','pink').slideUp(3000).slideDown(3000);
	 });
	});
  </script>
</body>
</html>

$(‘#div1’).css(‘background’,’pink’).slideUp(3000).slideDown(3000); एक ही line में हमने तीनो methods को लिख लिया है | जिससे code काफी छोटा हो गया है |

ऊपर के code को copy करके किसी editor में लिखें और .html extension से save करें और किसी भी browser में run करके इसका output देखें |

अन्य सुझाव