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

tinny 2014-09-01

当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>

 

相关推荐

Web全栈笔记 / 0评论 2020-06-15