页面存在多版本jQuery时,能否指定特定版本执行代码?
如何在多版本jQuery环境中指定使用1.7.2版本运行代码
没问题,这个场景jQuery早就想到了!你可以用它自带的noConflict()方法来搞定,哪怕没法调整脚本加载顺序也完全可行,给你两种方案选:
方案一:能在jQuery 1.7.2加载后插入代码的情况
如果你的页面允许在jquery-1.7.2.js的脚本标签后面加一小段代码,这是最简单的方法:
<script src="/js/jquery-1.5.js"></script> <script src="/js/jquery-1.7.2.js"></script> <script> // 把jQuery 1.7.2的实例保存到自定义变量里 var $jq172 = jQuery.noConflict(true); </script> <script src="/js/jquery-1.5.2.js"></script> <script src="/js/jquery-1.6.js"></script>
之后你所有需要基于1.7.2运行的代码,都用$jq172代替默认的$或jQuery就行:
// 示例:用1.7.2版本选择元素并绑定事件 $jq172('#target-element').click(function() { $jq172(this).addClass('active'); });
noConflict(true)的作用是把全局的jQuery和$恢复到加载1.7.2之前的版本(也就是1.5),后续加载的其他jQuery版本会再次覆盖全局变量,但我们已经把1.7.2的实例存在$jq172里了,完全不受影响。
方案二:无法修改页面脚本插入位置的情况
如果是完全没法改动原有页面的脚本顺序和插入中间代码,我们可以通过遍历所有加载过的jQuery实例来找到1.7.2版本:
var $jq172 = null; // 先保存当前全局的jQuery引用,避免循环后丢失 var originalGlobalJQuery = jQuery; // 循环调用noConflict,遍历所有已加载的jQuery版本 do { // 拿到上一个版本的jQuery实例 var tempJQuery = jQuery.noConflict(true); // 检查版本号是否匹配 if (tempJQuery.fn.jquery === '1.7.2') { $jq172 = tempJQuery; } // 直到回到最初的全局jQuery实例,说明遍历完所有版本了 } while (jQuery !== originalGlobalJQuery); // 把全局的jQuery和$恢复成原来的版本(也就是最后加载的1.6) jQuery = originalGlobalJQuery; $ = jQuery; // 现在就可以用$jq172来运行你的代码了 $jq172(document).ready(function() { $jq172('.demo').fadeIn(); });
这个方法的原理是:每次调用noConflict(true)都会将全局的jQuery指针回溯到上一个加载的版本,我们通过循环遍历所有版本,找到版本号为1.7.2的实例并保存,最后再把全局指针恢复成原来的状态,完全不会影响页面里原有代码的运行。
注意事项
- 确保你自己的代码全程使用保存的
$jq172变量,不要混用全局的$或jQuery,否则会意外用到其他版本。 - 版本号要完全匹配,比如
'1.7.2'不能写成'1.7',否则会找不到目标版本。
内容的提问来源于stack exchange,提问作者Matt Smith
相关产品推荐
相关产品推荐

