您的位置：首页 > Web前端 > JQuery

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

2016-01-07 15:35 609 查看

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()的方法解释，都是些啥啊。还是没有看懂。

直接进入测试吧，大家在细细体会,大家多使用该方式来测试代码！
http://www.w3school.com.cn/tiy/t.asp

测试一:

试验有两个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版本的对应关系与编码者不一致，这简直太糟糕了！！！）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航