爱学记
网页显示浏览器版本过低 如何在一个页面上让多个jQuery版本共存
如何在一个页面上让多个jQuery版本共存
如何在一个页面上让多个jQuery版本共存
jQuery自诞生以来，版本越来越多，而且jquery官网的新版本还在不断的更新和释出中，现已经达到了1.6.4版本，在以前的专案中就已经使用了旧版本的jQuery，比如已经出现的：1.3.X、1.4.X、1.5.X、1.6.2等等。
之前在修改前台页面的时候，就碰到过这样的问题，用的是最新的jQuery版本，之前程式用的是老的jQuery库，因为这次是修改不是重做，所以弄了好久两个版本都没办法共存，最后只能二选一，修改写好的js。
其实，利用jQuery.noConflict()特性，不仅可以让jQuery与其他的JS库并存，比如Prototype。也可以与jQuery本身的其他不同版本并存而不冲突。
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN"> <> <head> <title>在同一个页面中载入多个不同的jQuery版本</title> <!-- 从谷歌伺服器载入jQuery最新版本 --> <script type=text/javascript src=:ajax.googleapis./ajax/libs/jquery/1/jquery.js></script> <script type=text/javascript> var jQuery_New = $.noConflict(true); </script> <!-- 载入jQuery1.6.2版本 --> <script type=text/javascript src=:ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js></script> <script type=text/javascript> var jQuery_1_6_2 = $.noConflict(true); </script> <!-- 载入jQuery1.5.2版本 --> <script type=text/javascript src=:ajax.googleapis./ajax/libs/jquery/1.5.2/jquery.min.js></script> <script type=text/javascript> var jQuery_1_5_2 = $.noConflict(true); </script> <!-- 载入jQuery1.4.2版本 --> <script type=text/javascript src=:ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js></script> <script type=text/javascript> var jQuery_1_4_2 = $.noConflict(true); </script> <!-- 载入jQuery1.3.2版本 --> <script type=text/javascript src=:ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js></script> <script type=text/javascript> var jQuery_1_3_2 = $.noConflict(true); </script> <script type=text/javascript> alert(jQuery_New.fn.jquery); alert(jQuery_1_6_2.fn.jquery); alert(jQuery_1_5_2.fn.jquery); alert(jQuery_1_4_2.fn.jquery); alert(jQuery_1_3_2.fn.jquery); jQuery_New(function($){$('<p>我是最新的'+$.fn.jquery+'版本新增进来的。</p>').appendTo('body');}); jQuery_1_6_2(function($){$('<p>我是'+$.fn.jquery+'版本新增进来的。</p>').appendTo('body');}); jQuery_1_5_2(function($){$('<p>我是'+$.fn.jquery+'版本新增进来的。</p>').appendTo('body');}); jQuery_1_4_2(function($){$('<p>我是'+$.fn.jquery+'版本新增进来的。</p>').appendTo('body');}); jQuery_1_3_2(function($){$('<p>我是'+$.fn.jquery+'版本新增进来的。</p>').appendTo('body');}); </script> </head> <body> 在同一个页面中载入多个不同的jQuery版本，只需将原来版本呼叫程式码中的$替换成对应jQuery_x_x_x <br> 例如：利用1.4.2库的呼叫程式码$(function(){。。。} 只需更改为jQuery_1_4_2(function(){。。。} </body> </>如果你要使用JQuery你可以使用最高的，不需要引用几个版本的，那是没必要，功能也是一样的，比如说，你这个焦点图引用了JQ1.6,另一个效果引用了1.8,你只需要引用1.8就行，功能是一样的，1.6就不需要引用了。
如何在一个页面上让多个jQuery
方法是通过jQuery的noConflict()来让多版本共存。
当我们汇入jQuery时，jQuery仅向window这个全域性空间注入两个变数：
window.$ = window.jQuery = { jQuery object };
同时，jQuery内部保留旧的window.$和window.jQuery物件的引用。当我们呼叫：
var $jq = $.noConflict();
window.$被恢复，但window.jQuery仍是jQuery。
当我们呼叫：
var $jq = $.noConflict(true);
window.$和window.jQuery都被恢复了，一切看起来就像jQuery从未被汇入过一样，只不过可以通过变数$jq来使用jQuery。
所以，让新旧版本共存的jQuery可以这样实现：
在myscript.js中，用$jq就可以访问1.11版本的jQuery了。
至此，问题解决。
但是，引入两个版本的jQuery后，页面被搞得乱七八糟。如果有人看不懂程式码，把var $jq = jQuery.noConflict(true);删掉了怎么办？或者，把汇入jQuery的两行互换了位置，最后就得不到正确的jQuery版本。
最好的办法是不改动页面，直接引用我们编写的新的js档案：
这样一来，我们就在myscript.js内部引用最新版jQuery，而页面无论有没有jQuery，有哪个版本的jQuery，我们都不关心。
开始编写新的更好的解决方案。首先，把myscript.js的主体确定下来：
myscript.js (function () { BEGIN TODO: javascript code here... END })();
用匿名函式是个好习惯，不污染全域性变数，同时杜绝外部程式码访问。
下一步是直接把jQuery 1.11的程式码嵌进去：
myscript.js (function () { BEGIN !function(a,b){"object"==typeof module&&"object"==typeof module.exports?... if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=... },cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi... var $ = jQuery.noConflict(true); TODO: javascript code here... END })();
嵌入的当然是压缩后的程式码，一共3行，然后加一句：
var $ = jQuery.noConflict(true);
注意到$是一个区域性变数，在后面的程式码中，可以随时引用这个$，跟页面上其他版本的jQuery全域性变数$不是一个物件。
最后一步工作就是检查jQuery的协议是否允许我们把jQuery原始码直接嵌入我们自己的JavaScript程式码。
如何在一个页面放多个canvas
所谓iframe自适应高度，就是，基于介面美观和互动的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终呼叫同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程式去同步iframe高度和被包含页的实际高度了。
到baidu和google一查,这方面的解决答案是非常的多,逐一尝试了一下,发现了几个问题,一是在各种IE相容性不好,一是不支援多个Iframe在同一页面自适应,一是更新一个页面后,无法自动根据新页面高度重新整理自适应,一是无法跨站呼叫.
研究了半天终于写出了解决方案:
web1,web2,web3 是上中下,三个需要自适应的页面,在主页面index.中进行逐个的iframe呼叫,要求各自高度在iframe区域中能够自适应......
如何在一个页面上引用多个跑马灯
简单方法，更名
把程式码再复制一遍，把复制的这个的所有demo,demo1,demo2,Marquee,MyMar都改个名字，比如都加上个2，如demo22。
再把第2个跑马灯的demo,demo1改名，与上面改的名字一致。
如何在一个页面用多个swiper特效
js例：获取他们共用的class的时候加上父元素区分开。写style的时候.swiper-container和.swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。个人用法运用需考虑。
如何在一个页面用多个swiper外挂
即在外挂中 给出来的 共用的class前面加上 父元素（你来给一个class或id）来区分。
写style的时候.swiper-container和.swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。
微信收款码
支付宝收款码