HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>noConflict — ready</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 440px; }
    p { padding: 8px 10px; background: #ecfdf5; border-radius: 6px; }
    p.ready { outline: 2px solid #16a34a; }
    #out { margin-top: 12px; padding: 12px; background: #f1f5f9; border-radius: 8px; white-space: pre-wrap; font-size: 13px; }
  </style>
</head>
<body>
  <p>Styled inside ready with local $</p>
  <div id="out"></div>
  <script>
    window.$ = function () { return "other-lib"; };
  </script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    jQuery.noConflict();
    jQuery( document ).ready(function( $ ) {
      $( "p" ).addClass( "ready" );
      $( "#out" ).text(
        "inside ready: $ is jQuery " + $.fn.jquery + "\n" +
        "outside ready, global $() => " + window.$()
      );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.noConflict() — ready($) alias (Try It)