← Back to jQuery Course | Chapter 16: jQuery vs Modern JS & Interview Prep | Lesson 6 of 6

एडवांस्ड jQuery Interview सवाल

Event delegation एक parent पर एक handler attach करता है और matching child events handle करता है। यह dynamic elements के साथ अच्छे से काम करता है।

In this page:

  1. Event Delegation
  2. Deferred और Promises
  3. Performance और Caching
  4. Security और XSS
  5. Advanced AJAX Patterns

Event Delegation

Event delegation एक parent element से एक handler bind करता है और अपने descendants से events पकड़ने के लिए event bubbling पर depend करता है, बाद में add किए गए elements सहित।

उदाहरण: Event Delegation

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"><li>Item 1</li></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#list").on("click", "li", function() {
        $("#output").append($("<div>").text("Delegated click: " + $(this).text()));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Deferred और Promises

jQuery का Deferred object asynchronous operations के साथ काम करने का एक structured तरीका देता है, success, fail को handle करने के लिए done(), fail(), और always() expose करते हुए।

उदाहरण: Deferred and Promises

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      const dfd = $.Deferred();
      dfd.done(function() { $("#output").append($("<div>").text("Success")); }).fail(function() { $("#output").append($("<div>").text("Failure")); }).always(function() { $("#output").append($("<div>").text("Cleanup")); });
      dfd.resolve();
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Performance और Caching

Advanced jQuery code को selections को variables में cache करके और कई updates को batch करके repeated selector calls और unnecessary DOM changes से बचना चाहिए।

उदाहरण: Performance and Caching

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      const $btn = $("#btn");
      $btn.on("click", function() {
        $btn.css("color", "red");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Security और XSS

Untrusted input — users या external systems से — को हमेशा raw HTML के रूप में insert करने के बजाय plain text की तरह treat किया जाना चाहिए। user input के साथ html() इस्तेमाल करने से बचें।

उदाहरण: Security and XSS

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      const userInput = "<img src=x onerror=alert(1)>";
      $("#output").text(userInput);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Advanced AJAX Patterns

Advanced AJAX code को explicitly loading states, network और HTTP errors, और returned data का shape handle करना चाहिए, बजाय यह मान लेने के कि हर request।

उदाहरण: Advanced AJAX Patterns

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="status"></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $("#status").text("Loading...");
      $.get("data.php").done(function(data) {
        $("#status").text(data.message);
      }).fail(function() {
        $("#status").text("Error loading data");
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

बेसिक jQuery Interview सवाल · Modern Web में jQuery कब इस्तेमाल करें · jQuery AJAX बनाम Fetch API · jQuery DOM के Vanilla JS Alternatives

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. event delegation explain करते समय यह न बताना कि यह event bubbling पर depend करता है, या यह भूल जाना कि किसी child पर stopPropagation() इसे रोक देता है।
  2. यह कहना कि .then() और .done() identical हैं, जबकि .then() values transform और chain कर सकता है, जबकि .done() सिर्फ एक callback register करता है।
  3. एक 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:

← Previous Lesson Basic jQuery Interview Questions

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.