← Back to jQuery Course | Chapter 1: Getting Started | Lesson 6 of 6

jQuery का noConflict Mode

noConflict dollar sign को release करता है ताकि कोई और library इसे इस्तेमाल कर सके।

In this page:

  1. noConflict क्या करता है
  2. Dollar के बजाय jQuery इस्तेमाल करना
  3. एक Custom Alias बनाना
  4. Ready में Alias इस्तेमाल करना
  5. Library Conflicts से बचना
Syntax
javascript 
var $j = jQuery.noConflict();
$j(selector).action();

noConflict क्या करता है

jQuery.noConflict() call करना global dollar symbol को उस library को वापस दे देता है जिसने इसे पहले define किया था, दोनों को एक-दूसरे को overwrite करने से रोकते हुए।

उदाहरण: What noConflict Does

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>

    jQuery("#runBtn").click(function() {
      jQuery.noConflict();
      jQuery("#output").text(typeof $);
    });

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

Dollar के बजाय jQuery इस्तेमाल करना

noConflict() call करने के बाद, $ shortcut release हो जाता है, इसलिए आपके code का हर selector इसके बजाय पूरा jQuery(...) नाम इस्तेमाल करने के लिए फिर से लिखा जाना चाहिए -- library collisions से बचने के बदले में typing की एक छोटी कीमत।

उदाहरण: Use jQuery Instead of Dollar

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">
    <p id="msg">Hi</p>

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

    jQuery("#runBtn").click(function() {
      jQuery.noConflict();
      jQuery("#msg").text("Updated with jQuery()");
    });

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

एक Custom Alias बनाना

jQuery.noConflict() की return value को एक variable में assign करना, जैसे var $j = jQuery.noConflict(), आपको global $ symbol को बिल्कुल भी छुए बिना jQuery के लिए एक छोटा alias रखने देता है।

उदाहरण: Create a Custom Alias

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">
    <p id="msg">Hi</p>

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

    jQuery("#runBtn").click(function() {
      var $j = jQuery.noConflict();
      $j("#msg").text("Updated with $j alias");
    });

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

Ready में Alias इस्तेमाल करना

वह custom alias हर जगह काम करता है जहाँ आप आमतौर पर $ इस्तेमाल करते, document ready block के अंदर भी -- $j(document).ready(...) एक बार $ कहीं और reassign होने के बाद $(document).ready(...) जैसा ही behave करता है।

उदाहरण: Use the Alias in Ready

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">
    <p id="msg">Hi</p>

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

    jQuery("#runBtn").click(function() {
      var $j = jQuery.noConflict();
      $j(document).ready(function() {
        $j("#msg").text("Ready fired using alias");
      });
    });

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

Library Conflicts से बचना

noConflict() उन pages पर सबसे ज़्यादा मायने रखता है जो Prototype.js, MooTools, या दूसरी पुरानी libraries भी load करते हैं जो $ symbol भी claim करती हैं -- इसके बिना, जो भी library आख़िर में load होती है वह चुपचाप जीत जाती है और दूसरी का code तोड़ देती है।

उदाहरण: Avoid Library Conflicts

javascript 
<!DOCTYPE html>
<html>
<head>
  <script>
    window.$ = function() { return "other-library"; };
  </script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Run noConflict()</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    jQuery("#runBtn").click(function () {
      jQuery.noConflict();
      jQuery("#output").text("$() now returns: " + $());
    });
    jQuery("#resetBtn").click(function () {
      window.$ = jQuery;
      jQuery("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

jQuery CDN के Fallbacks · Document Ready इवेंट · jQuery का Syntax · किसी Webpage में jQuery जोड़ना

{# 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. jQuery.noConflict() call करना और फिर भी $("#msg") लिखना, जो fail हो जाता है क्योंकि $ अब दूसरी library का है।
  2. jQuery file load होने से पहले, या $ की भी ज़रूरत वाली किसी दूसरी library के बाद jQuery.noConflict() call करना, इसलिए असल में कुछ भी release नहीं होता।
  3. noConflict call करना लेकिन return value save न करना, जैसे var $j = jQuery.noConflict();, और फिर इस्तेमाल करने के लिए कोई छोटा alias न होना।
चैप्टर सारांश
  • jQuery एक JavaScript library है जो page के साथ काम करना simple बनाती है, और इसे एक script tag या CDN से जोड़ा जाता है।
  • jQuery syntax elements select करता है और उन पर action लेता है, आमतौर पर document ready event के अंदर।
  • CDN fallbacks और noConflict mode jQuery को reliably load होने और दूसरी libraries के साथ coexist करने में मदद करते हैं।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson jQuery CDN Fallbacks Next Lesson → Basic Selectors

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.