解决JQuery与其他库冲突的问题

当Jquery库和其他JavaScript库(如prototype)一起使用时，可能因为两者都使用$而产生冲突，如果想同时使用两者的功能，必须先解决这种冲突。

Jquery库在其他库之后导入

 

1、使用jQuery.noConflict()函数

在其他库和Jquery库都被加载完毕之后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
	jQuery.noConflict();//将$的控制权移交给prototype
	jQuery(function(){//使用jQuery
	        jQuery(“p”).click(function(){
		      alert(jQuery(this).text());
                });
        });
$(“p”).style.display=”none”;//使用prototype
</script>

此后就可以在程序中用jQuery()函数来代替$()函数了。

 

2、自定义备用名称

如果不想让Jquery与其他库冲突，又不想使用jQuery，可以自定义一个备用名称。

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
	var $j=jQuery.noConflict();//将$的控制权移交给prototype
	$j (function(){//使用jQuery
		$j (“p”).click(function(){
		alert($j (this).text());
        });
});
$(“p”).style.display=”none”;//使用prototype
</script>

 此后就可以在程序中用$j ()函数来代替$()函数了（当然这个名称可以随便取）。

 

3、如果不想自定义名称，又想使用$而不管其他的$()，同时又不想与其他库相冲突，可以使用一下两种方法：

第一种：在jQuery(function(){});内部使用$()方法。

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
	jQuery.noConflict();//将$的控制权移交给prototype
	jQuery (function($){//使用jQuery设定页面加载时执行的函数
		$(“p”).click(function(){//在函数内部继续使用$()方法
		alert($ (this).text());
        });
});
$(“p”).style.display=”none”;//使用prototype
</script>

第二种：使用匿名函数

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
	jQuery.noConflict();//将$的控制权移交给prototype
	(function($){//定义匿名函数并设置形参为$
		$(function(){//匿名函数内部的$均为jQuery
			$(“p”).click(function(){//继续使用$()方法
			        alert($(this).text());
                       });
                 });
        })(jQuery); //执行匿名函数且传递实参jQuery
$(“p”).style.display=”none”;//使用prototype
</script>

 这种方式比较常见，也是最理想的，因为可以通过改变最少的代码来实现全面的兼容性。

 

Jquery库在其他库导入之前

如果Jquery库在其他库之前就导入了，那么可以直接使用”jQuery”来做一些jQuery的工作。同时可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript”>
	jQuery(function(){//直接使用jQuery而无需调用jQuery.noConflict()函数
		jQuery(“p”).click(function(){
		alert(jQuery(this).text());
         });
});
$(“p”).style.display=”none”;//使用prototype
</script>