Примеры для jQuery.noConflict()


Map the original object that was referenced by $ back to $.

1
2
3
4
5
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

Revert the $ alias and then create and execute a function to provide the $ as a jQuery alias inside the function's scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.

1
2
3
4
5
6
7
8
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
// Other code using $ as an alias to the other library

Create a different alias instead of jQuery to use in the rest of the script.

1
2
3
4
5
6
7
var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

Completely move jQuery to a new namespace in another object.

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

Result:

1
2
3
4
5
6
7
8
// Do something with the new jQuery
dom.query( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
// Do something with another version of jQuery
jQuery( "div > p" ).hide();

Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.noConflict demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
<script>
var $log = $( "#log" );
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
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>

Демонстрация: