jQuery.noConflict()

jQuery.noConflict() Освобождает переменную $, чтобы избежать конфликтов имен.

Многие другие javascript библиотеки, так же как и jQuery используют $ как имя переменной или функции. Однако, в случае jQuery, $ является синонимом (алиасом) идентификатора jQuery. Поэтому, при освобождении имени $ с помощью jQuery.noConflict() мы не теряем функциональности библиотеки jQuery, посколько можем использовать вместо него jQuery.

Если по какой-то причине вы запускаете несколько версий jQuery (что не рекомендуется), вызов $.noConflict(true) приведёт к возврату объекта jQeury первой подключённой версии.

<script type="text/javascript" src="/other_lib.js"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
 $.noConflict();
 // код, который использует другую библиотеку с $.
</script>

Эту технику удобно применить, если использовать сразу несколько библиотек:

<script type="text/javascript" src="/other_lib.js"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
   // используем jQuery с $
 });
 // используем другую библиотеку с $
</script>

Примеры

Пример: используем одновременно jQuery и другую библиотеку с $:

jQuery.noConflict();
// делаем что-то на jQuery
jQuery("div p").hide();
// делаем что-то с помощью другой библиотеки, использующей $()
$("content").style.display = 'none';

Пример: создаём алиас на jQuery

var j = jQuery.noConflict();
// делаем что-то на jQuery
j("div p").hide();
// делаем что-то с помощью другой библиотеки, использующей $()
$("content").style.display = 'none';

Пример: перенос jQuery в другую именную область

var dom = {};
dom.query = jQuery.noConflict(true);

Результат:

// делаем что-то на jQuery
dom.query("div p").hide();
// делаем что-то с помощью другой библиотеки, использующей $()
$("content").style.display = 'none';
// делаем что-то на друнрй версии jQuery
jQuery("div > p").hide();

Пример: подгружаем и используем несколько версий jQuery.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>

<script>
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

/*
(подгружаем новую версию)
*/
jq162 = jQuery.noConflict(true);

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>

</body>
</html>

Демо:

Before $.noConflict(true)

2nd loaded jQuery version ($): 1.6.2

After $.noConflict(true)

1st loaded jQuery version ($): 1.9.1
2nd loaded jQuery version (jq162): 1.6.2