月度归档:2013年05月

如何让不同的jquery版本并存在一个页面(没有冲突)

jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.2.X、1.3.X、1.4.X、1.5.X、1.6.X、1.7.X、1.8.X、1.9.X等等。

其实让他们并存并非难事,只需要加入一句代码:

var jQuery_xx = $.noConflict(true);

noConflict()定义和用法
noConflict() 方法让渡变量 $ 的 jQuery 控制权。
该方法释放 jQuery 对 $ 变量的控制。
该方法也可用于为 jQuery 变量规定新的自定义名称。
提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

通过向该方法传递参数 true,我们可以将 $ 和 jQuery 的控制权都交还给原来的库。

例子:

我有1个HTML页,需要用到2个Jquery版本,1个1.7.2,1个1.2.6版本;

<SCRIPT src="/js/jquery-1.2.6.min.js" type=text/javascript></SCRIPT>
<script>
//这里的这段JS是用到了1.2.6版本的
function SetSlideLink(slideIndex) {
if (slideIndex >= slides.length || slideIndex < 0) {
slideIndex = 0;
}
jQuery("#slideOverlay").attr("alt", slides[slideIndex][1]);
jQuery("#image-map-learnmore").attr("href", slides[slideIndex][2]);
}
jQuery(document).ready(function() {
jQuery(document).pngFix();
SetSlideLink(0);
timer = setTimeout("NextSlide()", 7000);
});
</script>
<SCRIPT src="/js/jquery-1.7.2.min.js" type=text/javascript></SCRIPT>
(function() {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = '../images/loading.gif';
this.fileCloseImage = '../images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
})();

 

看到上面标红的地方了吧?这要改成这样,就不会有冲突了:

<SCRIPT src="/js/jquery-1.2.6.min.js" type=text/javascript></SCRIPT>
<script type=text/javascript>
var jQuery_1_2_6 = $.noConflict(true);
</script>
<script type=text/javascript>
//这里的这段JS是用到了1.2.6版本的
function SetSlideLink(slideIndex) {
if (slideIndex >= slides.length || slideIndex < 0) {
slideIndex = 0;
}
jQuery_1_2_6("#slideOverlay").attr("alt", slides[slideIndex][1]);
jQuery_1_2_6("#image-map-learnmore").attr("href", slides[slideIndex][2]);
}
jQuery_1_2_6(document).ready(function() {
jQuery_1_2_6(document).pngFix();
SetSlideLink(0);
timer = setTimeout("NextSlide()", 7000);
});
</script>
<SCRIPT src="/js/jquery-1.7.2.min.js" type=text/javascript></SCRIPT>
<script type=text/javascript>
var jQuery_1_7_2 = $.noConflict(true);
</script>
(function() {
var $, Lightbox, LightboxOptions;
$ = jQuery_1_7_2;
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = '../images/loading.gif';
this.fileCloseImage = '../images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
})();

赶紧试试吧。

 

 

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: 如何让不同的jquery版本并存在一个页面(没有冲突)