- 避免与其他库的冲突
JQuery库和它所有的插件都是包含在jQuery命名空间下的，作为一般规则，全局对象被存储在jQuery的命名空间内，所以你不会得到jQuery和任何其他库之间的冲突（例如：prototype.js、MooTools、YUI）。
需要注意的是，默认情况下可以使用$符号作为jQuery的缩写。如果你使用其他JavaScript库，而且使用了$符号，那么运行的时候会出现一些冲突。为了避免这些冲突，需要设置JQuery为无冲突模式。
- 设置无冲突模式
当你设置JQuery为无冲突模式，你必须分配一个新的变量来取代$符号。
<!-- 无冲突模式 --><script src="prototype.js"></script><script src="jquery.js"></script><script>var $j = jQuery.noConflict();// $j是jQuery方法的别名;创建新的别名是可选的。$j(document).ready(function() { $j( "div" ).hide();});// $的意义是document.getElementById()的快捷方式. mainDiv是一个DOM元素,而不是一个jQuery对象。window.onload = function() { var mainDiv = $( "main" );}</script> |
在上面的代码中，$将在原库中恢复它的意义。你仍然是能够在你的应用程序的其余部分使用jQuery作为全功能名称以及新的别名$ J。新别名可以被命名为任何你想要的名称。例如，JQ$ J、awesomeQuery等。
最后，如果你不想定义另一个替代完整的jQuery函数名，那么你还是可以尝试另一种方法，只需添加$作为参数传递给jQuery( document ).ready()函数，这是使用最频繁的方法，不会引起与其他库的冲突。
<!-- 无冲突模式的另一种设置方式 --><script src="prototype.js"></script><script src="jquery.js"></script><script>jQuery.noConflict();jQuery( document ).ready(function( $ ) { // 你可以在这里使用$作为JQuery的别名。 $( "div" ).hide();});// $在全局范围内是有prototype.js意义的.window.onload = function(){ var mainDiv = $( "main" );}</script> |
考虑到用更少的代码以实现完全的兼容，这可能是最理想的解决方案。
- 引用JQuery在其他库之前
上面的代码片段，在prototype.js加载后再加载jQuery。如果引用jQuery在其他库之前，你可以使用jQuery当你做一些工作的时候，但$符号将为其他库中定义的涵义。这里不需要通过调用jQuery.noConflict()放弃$符号。
<!-- 在其他库之前加载JQuery --><script src="jquery.js"></script><script src="prototype.js"></script><script>// 使用完整的JQuery名称来进行操作。jQuery( document ).ready(function() { jQuery( "div" ).hide();});// 使用$作为prototype.js的定义window.onload = function() { var mainDiv = $( "main" );};</script> |
- 引用JQuery函数的多种方式
下面的方法，你可以引用JQuery函数在其他库创建了一个存在冲突的变量$的时候。
- 创建一个新别名
这jQuery.noConflict()函数返回一个JQuery函数引用，这样你就可以捕获任何一个你想要的变量。
<script src="prototype.js"></script><script src="jquery.js"></script><script>var $jq = jQuery.noConflict();</script> |
- 使用立即调用的函数表达式
您可以继续使用标准的$符号来包装你的代码，并立即调用函数表达式，这也是一个jQuery插件创作的标准模式，在这里作者也不知道是否将会采取另一个库超出了$的标准模式。
<!-- 在立即调用的函数中使用$ --><script src="prototype.js"></script><script src="jquery.js"></script><script>jQuery.noConflict();(function( $ ) { // 你可以在这里使用$。})( jQuery );</script> |
请注意，如果你使用这个技巧，你将不能够立即调用函数来使用其内部的prototype.js的方法。
- 使用参数传递给jQuery( document ).ready()函数
<script src="jquery.js"></script><script src="prototype.js"></script><script>jQuery(document).ready(function( $ ) { // 你可以在这里使用$。});</script> |
或者使用更简洁的语法：
<script src="jquery.js"></script><script src="prototype.js"></script><script>jQuery(function($){ // 你可以在这里使用$。});</script> |