Advanced jQuery Interview Questions
In this page:
Event Delegation
Event delegation एक parent element से एक handler bind करता है और अपने descendants से events पकड़ने के लिए event bubbling पर depend करता है, बाद में add किए गए elements सहित।
उदाहरण: Event Delegation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").on("click", "li", function() {
console.log("Delegated click:", $(this).text());
});
</script>
</body>
</html>Deferred और Promises
jQuery का Deferred object asynchronous operations के साथ काम करने का एक structured तरीका देता है, success, fail को handle करने के लिए done(), fail(), और always() expose करते हुए।
उदाहरण: Deferred and Promises
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.done(function() { console.log("Success"); }).fail(function() { console.log("Failure"); }).always(function() { console.log("Cleanup"); });
dfd.resolve();
</script>
</body>
</html>Performance और Caching
Advanced jQuery code को selections को variables में cache करके और कई updates को batch करके repeated selector calls और unnecessary DOM changes से बचना चाहिए।
उदाहरण: Performance and Caching
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.css("color", "red");
});
</script>
</body>
</html>Security और XSS
Untrusted input — users या external systems से — को हमेशा raw HTML के रूप में insert करने के बजाय plain text की तरह treat किया जाना चाहिए। user input के साथ html() इस्तेमाल करने से बचें।
उदाहरण: Security and XSS
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
const userInput = "<img src=x onerror=alert(1)>";
$("#output").text(userInput);
</script>
</body>
</html>Advanced AJAX Patterns
Advanced AJAX code को explicitly loading states, network और HTTP errors, और returned data का shape handle करना चाहिए, बजाय यह मान लेने के कि हर request।
उदाहरण: Advanced AJAX Patterns
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="status"></div>
<script>
$("#status").text("Loading...");
$.get("data.php").done(function(data) {
$("#status").text(data.message);
}).fail(function() {
$("#status").text("Error loading data");
});
</script>
</body>
</html>- event delegation explain करते समय यह न बताना कि यह event bubbling पर depend करता है, या यह भूल जाना कि किसी child पर
stopPropagation()इसे रोक देता है। - यह कहना कि
.then()और.done()identical हैं, जबकि.then()values transform और chain कर सकता है, जबकि.done()सिर्फ एक callback register करता है। - एक selector cache करना लेकिन DOM बदलने के बाद cache update न करना, ताकि stored jQuery object stale elements को refer करे।
- Native DOM और vanilla JS alternatives कई jQuery selectors और DOM methods की जगह ले सकते हैं।
- jQuery AJAX और Fetch API अलग-अलग तरीकों से similar goals achieve करते हैं।
- modern web work में jQuery कब इस्तेमाल करें यह जानना, और basic तथा advanced interview questions, आपको real situations के लिए तैयार करते हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: