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

最新推荐文章于 2024-08-17 11:34:01 发布

当刀客却有了剑心

最新推荐文章于 2024-08-17 11:34:01 发布

阅读量4.4k

点赞数 2

分类专栏： jQuery 文章标签： JavaScript jQuery noConflict

本文链接：https://blog.csdn.net/daokejianxin/article/details/50476745

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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了