Chaining से Optimize करना
In this page:
$(selector).method1().method2().method3();Chaining क्या है?
Chaining का मतलब है same line पर एक के बाद एक jQuery method call करना, जो काम करता है क्योंकि ज़्यादातर jQuery methods उसी jQuery object को return करते हैं।
उदाहरण: What is Chaining?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "blue").fadeOut(1000);
</script>
</body>
</html>Common Methods Chain करना
jQuery के कई built-in methods — जैसे .addClass(), .css(), और .fadeIn() — खत्म होने के बाद jQuery object खुद return करते हैं, खासतौर पर ताकि आप c।
उदाहरण: Chain Common Methods
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").addClass("highlight").css("padding", "10px").fadeIn();
</script>
</body>
</html>Traversal Methods Chain करना
DOM traversal methods जैसे .parent(), .find(), और .siblings() को भी chain किया जा सकता है, जो खासतौर पर तब उपयोगी है जब आपको related elements select करने हों।
उदाहरण: Chaining Traversal Methods
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p>Child</p></div>
<script>
$("#box").find("p").css("color", "red");
</script>
</body>
</html>Chaining और Performance
Chaining यह कम कर सकता है कि आप same element को कितनी बार re-select करते हैं, क्योंकि chain का हर method पिछले वाले के result पर operate करता है।
उदाहरण: Chaining and Performance
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "red").css("font-size", "20px").fadeIn();
</script>
</body>
</html>एक छोटा Chaining Project
Chaining को same element पर genuinely related operations की sequences तक ही रखना best है — बहुत लंबी chains के लिए, हर method को अपनी line पर तोड़ना।
उदाहरण: Small Chaining Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text")
.addClass("active")
.css("color", "green")
.fadeIn();
</script>
</body>
</html>- यह मान लेना कि हर method chain हो सकता है, जबकि बिना arguments वाले getters जैसे
.text()या.val()एक value return करते हैं, jQuery object नहीं। - एक बहुत बड़ी chain लिखना जिसे debug करना मुश्किल हो, जबकि इसे lines या variables में तोड़ना readable बनाता है।
.find()या.parent()के बाद chain करना यह realize किए बिना कि selection बदल गया है, ताकि बाद के methods उम्मीद से अलग elements पर act करें।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: