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

jQuery noConflict Mode

noConflict releases the dollar sign so another library can use it.

In this page:

  1. What noConflict Does
  2. Use jQuery Instead of Dollar
  3. Create a Custom Alias
  4. Use the Alias in Ready
  5. Avoid Library Conflicts
Syntax
javascript 
var $j = jQuery.noConflict();
$j(selector).action();

What noConflict Does

Calling jQuery.noConflict() hands the global dollar symbol back to whichever library defined it first, preventing the two from overwriting each other.

Example: 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>

Use jQuery Instead of Dollar

After calling noConflict(), the $ shortcut is released, so every selector in your code must be rewritten to use the full jQuery(...) name instead -- a small typing cost in exchange for avoiding library collisions.

Example: 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>

Create a Custom Alias

Assigning the return value of jQuery.noConflict() to a variable, like var $j = jQuery.noConflict(), lets you keep a short alias for jQuery without ever touching the global $ symbol at all.

Example: 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>

Use the Alias in Ready

That custom alias works everywhere you'd normally use $, including inside a document ready block -- $j(document).ready(...) behaves identically to $(document).ready(...) once $ has been reassigned elsewhere.

Example: 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>

Avoid Library Conflicts

noConflict() matters most on pages that also load Prototype.js, MooTools, or other older libraries that also claim the $ symbol -- without it, whichever library loads last silently wins and breaks the other's code.

Example: 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 Event · jQuery Syntax · Adding jQuery to a Webpage

{# 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. #}
Common Mistakes
  1. Calling jQuery.noConflict() and then still writing $("#msg"), which fails because $ now belongs to the other library.
  2. Calling jQuery.noConflict() before the jQuery file has loaded, or after another library that also needs $, so nothing is actually released.
  3. Calling noConflict but not saving the return value, as in var $j = jQuery.noConflict();, and then having no short alias to use.
Chapter Summary
  • jQuery is a JavaScript library that simplifies working with the page, and it is added with a script tag or CDN.
  • jQuery syntax selects elements and acts on them, usually inside the document ready event.
  • CDN fallbacks and noConflict mode help jQuery load reliably and coexist with other libraries.
🔒

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.