SyntaxStudy
Sign Up
jQuery jQuery $.noConflict() and the $ Alias
jQuery Advanced 5 min read

jQuery $.noConflict() and the $ Alias

The $ shortcut is globally claimed by jQuery when it loads, but other libraries — Prototype, MooTools, Lodash — also use $. If you need to use two such libraries on the same page, jQuery's $.noConflict() method releases the $ alias so other libraries can reclaim it.

How It Works

After calling $.noConflict(), $ reverts to whatever it was before jQuery loaded. jQuery itself is still accessible via the jQuery global. You can also store the jQuery object in your own variable — convention uses $ inside an IIFE scope to keep the alias locally.

Self-Executing Function Pattern

The standard pattern for jQuery plugins and encapsulated modules passes jQuery into an IIFE as the parameter named $. This gives you the familiar $ shorthand inside the function while staying completely safe outside it, regardless of any global conflicts.

  • $.noConflict() — release global $, keep jQuery
  • var jq = $.noConflict() — store jQuery in a custom variable
  • IIFE pattern: (function($){ ... })(jQuery)
  • Passing true also releases the jQuery global
Example
// Release $ for other libraries
$.noConflict();

// jQuery still works via the jQuery global
jQuery('#my-div').text('Hello from jQuery!');

// Store jQuery in a custom alias
var jq = jQuery.noConflict();
jq('#my-div').addClass('active');

// Best practice: IIFE to keep $ locally
(function ($) {
    // Inside here $ safely refers to jQuery
    $('#header').fadeIn(400);
    $('#nav a').on('click', function (e) {
        e.preventDefault();
        $('#content').load($(this).attr('href'));
    });
})(jQuery);

// Document-ready shorthand with IIFE
jQuery(function ($) {
    // DOM ready, $ is safe here
    $('p').css('color', 'darkblue');
});
Pro Tip

Always wrap jQuery plugin code in (function($){ ... })(jQuery) to guarantee $ refers to jQuery regardless of global conflicts.