HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>noConflict — basic</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 440px; }
    p { background: #e0e7ff; padding: 10px 12px; border-radius: 6px; }
    #out { margin-top: 12px; padding: 12px; background: #f1f5f9; border-radius: 8px; white-space: pre-wrap; font-size: 13px; }
  </style>
</head>
<body>
  <div>
    <p>Hide me with jQuery after noConflict</p>
  </div>
  <div id="out"></div>
  <script>
    // Other library claims $ BEFORE jQuery loads
    window.$ = function fakeDollar() { return "other-lib"; };
  </script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    jQuery.noConflict();
    jQuery( "div p" ).hide();
    document.getElementById( "out" ).textContent =
      "after noConflict, $() => " + window.$() + "\n" +
      "paragraph hidden with jQuery(...), not global $";
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.noConflict() — restore $ (Try It)