解决jQuery和其他库的冲突

最新推荐文章于 2019-11-06 16:24:49 发布

Ashe And Wine

最新推荐文章于 2019-11-06 16:24:49 发布

阅读量472

点赞数

分类专栏： web前端文章标签：解决jQuery和其他库的冲突

本文链接：https://blog.csdn.net/AsheAndWine/article/details/76938036

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。

通常，全局对象都被很好地存储到jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）在一起使用时，不会引起冲突

那么如果有冲突该如何解决？

下边以jQuery和Prototype库为例。（本例中需要文件prototype.js）

1.jQuery库在其他库之后导入

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

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冲突解决1</title>
<!-- 引入 prototype  -->
<script src="prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict();	//将变量$的控制权让渡给prototype.js
jQuery(function(){		//使用jQuery
	jQuery("p").click(function(){
		alert( jQuery(this).text() );
	});
});

$("pp").style.display = 'none';	 //使用prototype.js隐藏元素
</script>

</body>
</html>

上例子中，如果没有<script></script>代码块，也不会引入任何库文件。即原始代码为

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
</body>

页面结果为：

而如果利用

jQuery.noConflict();	//将变量$的控制权让渡给prototype.js

此行代码，则可以在实现点击<p>标签弹出<p></p>标签之间文字内容的功能下一并实现id为"pp"的<p id="pp">标签的隐藏功能。

此时 <p id="pp">标签的内容通过调用Prototype库，使用文件 prototype.js 将被隐藏。利用jQuery变量进行jQuery库的功能延续。

页面输出结果为，只显示<p >Test-jQuery(将被绑定单击事件)</p>内容，当点击这行文字时候弹出框

实现上述Prototype库和jQuery库不冲突的原因就是代码行的功劳

jQuery.noConflict();

如果在上个例子中把代码块里的此行代码删除。则变量$的控制权仍在jquery.js手中，此时id为"pp"的<p id="pp">标签将不会被隐藏。此行代码执行失败

$("pp").style.display = 'none';

并且会因为

jQuery(function(){		
	jQuery("p").click(function(){
		alert( jQuery(this).text() );
	});

代码块中的代码，点击 “Test-prototype(将被隐藏)” 这一行文字同样也实现弹框功能

如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以用如下代码实现

<script type="text/javascript">
var $j = jQuery.noConflict();		//自定义一个比较短快捷方式
$j(function(){						//使用jQuery
	$j("p").click(function(){
		alert( $j(this).text() );
	});
});

$("pp").style.display = 'none';		//使用prototype.js隐藏元素
</script>

可以看出区别就是利用var $j = jQuery.noConflict(); ，自定义了另一个备用名称。

上例子中是将“$j”当作jQuery库的另一个快捷方式，此时Prototype库再使用“$”时两者就不会再起冲突

也可以自定义名称 jq、aaa等快捷方式。为了方便以 “$”开头的话更便于区分字母和快捷方式“$”.

此外，如果不想给jQuery自定义这些备用名称，还想使用“$”而不管其他库的$()方法，同时又不想与其他库冲突，那么可以使用以下两种方法解决：

方法一：

<script type="text/javascript">
jQuery.noConflict();			//将变量$的控制权让渡给prototype.js
jQuery(function($){				//使用jQuery 设定页面加载时执行的函数
	$("p").click(function(){		//在函数内部继续使用 $ 方法
		alert( $(this).text() );
	});
});

$("pp").style.display = 'none';		//使用prototype
</script>

上述方法在jQuery(function($){ //.... });内部中可以使用$

方法二：

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

$("pp").style.display = 'none';		//使用prototype
</script>

上述方法利用匿名函数传参方式重新定义并继续使用$

最后，如果 jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作，同时可以使用 $作为其他库的快捷方式。

这里无需再调用 jQuery.noConflict()函数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 先引入 jQuery  -->
<script src="jquery.js" type="text/javascript"></script>
<!-- 后引入 prototype  -->
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
	jQuery("p").click(function(){      
		alert( jQuery(this).text() );
	});
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

Ashe And Wine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决jQuery和其他库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储到jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）在一起使用时，不会引起冲突那么如果有冲突该如何解决？下边以jQuery和Prototype库为例。（本例中需要文件prototype.js）1.jQuery库在其
复制链接

扫一扫