jQuery版本冲突问题解决与分析

jQuery版本冲突问题解决与分析

最近在写项目的时候,在网上搜索了一个时间选择器的插件,想要添加到原先的项目中,但是在调试的过程中,却出现时间选择器若是能使用,则我的其他比如导航栏的特效就不能使用,若导航栏能够使用,则时间选择器就无法使用了,两者出现了冲突。

出现这样的问题,思路

由于是特效即脚本实现的,所以判断是脚本的问题,所以,直接注释掉原先中脚本文件代码,很块就发现是两个jQuery文件的引用出现了冲突,下面列出来
    <script src="..//bootstrap-3.3.5-dist/bower_components/jquery/dist/jquery.min.js"></script>
该jQuery用来实现导航栏的特效。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
该jQuery用来实现时间选择器特效。

然后,请教度娘,发现网上一大片说,jQuery版本冲突的问题,说用noConflict()方法来解决。。然后就没有然后,没一个说的清的,完全不知道该怎么搞。
还是乖乖去W3school上看一下jQuery的介绍,发现$是jQuery的缩写( jQuery uses the $ sign as a shortcut for jQuery.
看了几个实例,再看下w3school上对于noConflict()的方法解释,都是些啥啊。还是没有看懂。


直接进入测试吧,大家在细细体会,大家多使用该方式来测试代码!

测试一:

试验有两个jQuery文件,这两个文件都能使用$.("p").hide();   和$.("p").show()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1).click(function(){
$("p").hide);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#button2).click(function(){
$("p").show);
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id='button1'>Click me1</button><br>
<button type"button" id="button2"> click me2 </button>
</body>
</html> 

先猜测结果,从代码可以看出,版本问题依旧会存在的,其实该代码存在的问题就是我们项目中存在的问题,浏览器无法区分$ 表示的是那种jQuery。(代码中有两个jQuery文件)

上面测试结果,点击click me1 ,上面文字消失,点击click me2 ,文字并没有像代码写的一样出现。

现在我们将代码进行修改进行第二个测试。

测试二:

我们将第一个JS块中的$使用noConflict()方法。
<script type="text/javascript">
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button1").click(function(){
jq1("p").hide();
});
});
</script>
在这里我们使用jq1作为新的jQuery简称,进行一个区分,让第一个button1使用第一个jQuery。

结果是,点击click me1 ,上面文字消失,点击click me2 ,文字出现。 (正确结果)
但是,这里要考虑一个文件顺序问题,在第一个 <script>脚本1</script>代码是使用的第一个jQuery文件,这个没什么争议;但是第二个 <script>脚本2</script>块,使用的是第一个还是二个jQuery文件。
所以测试三,直接将第二个jQuery文件删除。

测试三:

将第二个jQuery文件删除,再运行
<del><script src="/jquery/jquery-1.11.1.min.js"></script></del>

测试结果,点击点击click me1 ,上面文字消失,点击click me2 ,文字没有出现,
则通过测试二/三,可以说明在第一个 <script>脚本1</script>代码是使用的第一个jQuery文件,第二个 <script>脚本2</script>代码块使用第二个jQuery文件。

到这里,其实问题解决了,但是还要测试一些东西。

测试四:

将两个<script>脚本1 2</script>块合并,猜想,这样的话是不是将只会使用唯一的Jquery文件。
测试结果:点击click me1 ,上面文字消失,点击click me2 ,文字出现 (正确结果)

对比测试五

将第二个jQuery文件删除
测试结果,点击click me1 ,上面文字消失,点击click me2 ,文字没有出现。

则通过测试四/五,说明jQuery文件的选择并不和JS代码块的分合有关系,关系只是顺序关系。

最后两个测试(由三个JS脚本来测试)

先由$来引用jQuery,再由noConflict()来定义另一个引用,
之后的jQuery可以随意使用各个引用,来调用不同的版本的文件内容。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("p").hide();
});
});
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button2").click(function(){
jq1("p").show();
});
});
$(document).ready(function(){
$("#button3").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id='button1'>Click me1</button><br>
<button type"button" id="button2"> click me2 </button><br>
<button type"button" id="button3"> click me3 </button>
</body>
</html> 
在上述代码中,
jq1 为第二个jQuery的简称,再使用时,将所有的$换成jq1就OK了
$     为第一个jQuery的简称,哪里需要用第一个jQuery就使用 $ 

<html>
<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button1").click(function(){
jq1("p").hide();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$("p").show();
});
});
jq1(document).ready(function(){
jq1("#button3").click(function(){
jq1("p").hide();
});
});
</script>
</head>
在上述代码中,
$     为第二个jQuery的简称,哪里需要用第二个jQuery就使用 $ 
jq1 为第一个jQuery的简称,再使用时,将所有的$换成jq1就OK了

总结:

(一般需要给新增的jQuery,创建一个新的变量来代替 $ ,这样原先的代码都不需要修改 )
在存有多种jQuery版本的页面中,如果要正确使用各个版本,就 使用var gjq=$.noConflict();为各个版本创建新定义个jQuery引用变量,其实就是创建新的 $ 的代号(简称shortcut)。
在此代码之后,使用原先的jQuery文件的时候,就使用 $ ,(因为在这之前,原先的 $ 存在的环境为正常唯一jQuery环境,而noConflict方法改变是新的jQuery的简称,所以原先的脚本使用 $ 就可以调用)。
请注意,将新添加的jQuery顺序与定义 $ 简称的顺序保持一致!!!!(否则,系统认为的 $ 简称与jQuery版本的对应关系与编码者不一致,这简直太糟糕了!!!)










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值