js实例教程-jQuery中怎么实现2个或3个库同时存在?

发布时间:2018-12-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery中怎么实现2个或3个库同时存在?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

jQuery 中的 noConflict()属性

该函数属于全局的jquery对象

jquery.noConflict()函数用于让出jQuery库对变量$(对变量jQuery)的控制权

也可用于为 jQuery 变量规定新的自定义名称

注:在其他的JavaScript库中也使用$时 此方法存在 

    可以止库之间的冲突 非常有用

使用的语法如下:

  jQuery.noConflict( [ removeAll ] )

参数removeAll:是否彻底移交对变量jQuery的控制权 可以传入Boolean值 默认值为false

如果省略了参数removeAll或该参数不为true 则表示只让出对变量$的控制权 如果该参数为true 则表示同时让出对变量$和jQuery的控制权

返回值:

函数的返回值是jQuery类型 返回变量jQuery的引用

jQuery.noConflict()方法的几种使用方法

1)将$引用的对象映射回原始的对象

代码如下:

jQuery.noConflict();jQuery("p p").hide();

// 使用 jQuery$("content").style.display = "none";

// 使用其他库的 $()

2)恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:

jQuery.noConflict();(function($) {   $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);... // 其他用 $ 作为别名的库的代码

此方法应该是最理想的方法 因为可以通过改变最少的代码来实现全面的兼容性

3)可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

jQuery.noConflict()(function(){    // 使用 jQuery 的代码});... // 其他库使用 $ 做别名的代码

4)创建一个新的别名用以在接下来的库中使用 jQuery 对象:

VAR j = jQuery.noConflict();j("p p").hide(); // 基于 jQuery 的代码$("content").style.display = "none"; // 基于其他库的 $() 代码

5)完全将 jQuery 移到一个新的命名空间:

var dom = {};dom.query = jQuery.noConflict(true);

结果:

dom.query("p p").hide(); // 新 jQuery 的代码$("content").style.display = "none"; // 另一个库 $() 的代码jQuery("p > p").hide(); // 另一个版本 jQuery 的代码

6)如果jQuery库在其他库之前就导入了 那么可以直接使用‘jQuery’来做一些jQuery的工作 同时 可以使用$()方法作为其他库的快捷方式 这里无需调用jQuery。noConflict()函数

如下代码:

<p id="pp">test-PRototyPE(将被隐藏)</p>

<p>Test-jQuery(将被绑定点击事件)</p>

<!--先导入jQuery-->

<script src="../../script/jquery.js" type="text/javascript"></script>

<!--后导入其他库-->

<script src="lib/prototype.js" type="text/javascript"></script>

<script language="javascript">

   jQuery(function(){

                 jQuery("p").click(function(){

         alert(jQuery(this).text());

      })

    })

   $("pp").style.display = "none";

</script>

如果要实现两个版本的jQuery库共存,我们可以编写如下代码:

<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 让出jQuery-1.11.1对变量$和变量jQuery的控制权var j = jQuery.noConflict( true );document.wrITeln( j.fn.jquery ); // 1.11.1document.writeln( $.fn.jquery ); // 1.4.2document.writeln( jQuery.fn.jquery ); // 1.4.2/* * 如果前面的jQuery.noConflict()没有传入参数true, * 也就是说只让出变量$的控制,则$表示1.4.2,jQuery表示1.11.1 * 此时,jQuery.fn.jquery为1.11.1 */ </script>

三个版本的jQuery库共存,对应的jQuery示例代码如下:

<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 让出jQuery-1.11.1对变量$和变量jQuery的控制权,使用变量j来控制var j = jQuery.noConflict( true );// 让出jQuery-1.8.3对变量$的控制权jQuery.noConflict();document.writeln( j.fn.jquery ); // 1.11.1document.writeln( jQuery.fn.jquery ); // 1.8.3document.writeln( $.fn.jquery ); // 1.4.2</script>

jQuery 中的 noConflict()属性

该函数属于全局的jQuery对象

jQuery.noConflict()函数用于让出jQuery库对变量$(对变量jQuery)的控制权

也可用于为 jQuery 变量规定新的自定义名称

注:在其他的JavaScript库中也使用$时 此方法存在 

    可以防止库之间的冲突 非常有用

使用的语法如下:

  jQuery.noConflict( [ removeAll ] )

参数removeAll:是否彻底移交对变量jQuery的控制权 可以传入Boolean值 默认值为false

如果省略了参数removeAll或该参数不为true 则表示只让出对变量$的控制权 如果该参数为true 则表示同时让出对变量$和jQuery的控制权

返回值:

函数的返回值是jQuery类型 返回变量jQuery的引用

jQuery.noConflict()方法的几种使用方法

1)将$引用的对象映射回原始的对象

代码如下:

jQuery.noConflict();jQuery("p p").hide();

// 使用 jQuery$("content").style.display = "none";

// 使用其他库的 $()

2)恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:

jQuery.noConflict();(function($) {   $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);... // 其他用 $ 作为别名的库的代码

此方法应该是最理想的方法 因为可以通过改变最少的代码来实现全面的兼容性

3)可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

jQuery.noConflict()(function(){    // 使用 jQuery 的代码});... // 其他库使用 $ 做别名的代码

4)创建一个新的别名用以在接下来的库中使用 jQuery 对象:

var j = jQuery.noConflict();j("p p").hide(); // 基于 jQuery 的代码$("content").style.display = "none"; // 基于其他库的 $() 代码

5)完全将 jQuery 移到一个新的命名空间:

var dom = {};dom.query = jQuery.noConflict(true);

结果:

dom.query("p p").hide(); // 新 jQuery 的代码$("content").style.display = "none"; // 另一个库 $() 的代码jQuery("p > p").hide(); // 另一个版本 jQuery 的代码

6)如果jQuery库在其他库之前就导入了 那么可以直接使用‘jQuery’来做一些jQuery的工作 同时 可以使用$()方法作为其他库的快捷方式 这里无需调用jQuery。noConflict()函数

如下代码:

<p id="pp">Test-prototype(将被隐藏)</p>

<p>Test-jQuery(将被绑定点击事件)</p>

<!--先导入jQuery-->

<script src="../../script/jquery.js" type="text/javascript"></script>

<!--后导入其他库-->

<script src="lib/prototype.js" type="text/javascript"></script>

<script language="javascript">

   jQuery(function(){

                 jQuery("p").click(function(){

         alert(jQuery(this).text());

      })

    })

   $("pp").style.display = "none";

</script>

如果要实现两个版本的jQuery库共存,我们可以编写如下代码:

<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 让出jQuery-1.11.1对变量$和变量jQuery的控制权var j = jQuery.noConflict( true );document.writeln( j.fn.jquery ); // 1.11.1document.writeln( $.fn.jquery ); // 1.4.2document.writeln( jQuery.fn.jquery ); // 1.4.2/* * 如果前面的jQuery.noConflict()没有传入参数true, * 也就是说只让出变量$的控制,则$表示1.4.2,jQuery表示1.11.1 * 此时,jQuery.fn.jquery为1.11.1 */ </script>

三个版本的jQuery库共存,对应的jQuery示例代码如下:

<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 让出jQuery-1.11.1对变量$和变量jQuery的控制权,使用变量j来控制var j = jQuery.noConflict( true );// 让出jQuery-1.8.3对变量$的控制权jQuery.noConflict();document.writeln( j.fn.jquery ); // 1.11.1document.writeln( jQuery.fn.jquery ); // 1.8.3document.writeln( $.fn.jquery ); // 1.4.2</script>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jQuery中怎么实现2个或3个库同时存在?全部内容,希望文章能够帮你解决js实例教程-jQuery中怎么实现2个或3个库同时存在?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。