发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号。因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原因就必须深入到jQuery的源码中去分析了,因此本文暂不深入讨论)。

  解决方案:

  解决JS库冲突总共可以分为以下几种方法:

    ①让渡‘$’标示符,使用jQuery作为jQuery对象的标示符(别名)。

    ②使用别名替代‘$’和jQuery标识符,如下面的$j(名字可以任取)。

var $j=jQuery.noConflict();
$j("#div").hide();

    ③使用匿名函数

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

  情况一:如果jQuery库在其他库之后导入

  方法:这种情况下,如何要使用‘$’作为其他库的标识符,则要使用jQuery.noConflict()释放jQuery对‘$’标识符的控制,把它(‘$’)让位给第一个实现它的库。

  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript">
$.noConflict(); //让渡$给第一个实现它的库。 jQuery("#div").hide(); //使用jQuery作为jQuery库的标识符   $("#div").hide(); // 使用另一个库的 $ 的代码
</script>

  也可以使用第二种方法,即使用别名。  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>
<script type="text/javascript">
var $j=$.noConflict(); //让渡$给第一个实现它的库。
$j("#div").hide(); //使用$j作为jQuery库的标识符
  $("#div").hide(); // 使用另一个库的 $ 的代码
</script>

  或者用第三种方法,即使用匿名函数  例如:

jQuery.noConflict();

(function($) {   //匿名函数中用‘$’作为形参
$(function() {
// 使用 $ 作为 jQuery 别名的代码
});
})(jQuery);   //传入jQuery作为形参的值 ... // 其他用 $ 作为别名的库的代码

  情况二:如果jQuery在其他库之前导入

  方法:在这种情况下,不必使用jQuery.noConflict()方法让渡‘$’标识符。 例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript"> jQuery("#div").hide(); //使用jQuery作为jQuery库的标识符   $("#div").hide(); // 使用另一个库的 $ 的代码
</script>

  那么这里有一个疑问:为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?

  此外,jQuery.noConflict()方法还可以带有一个boolean类型的参数。这个参数的作用是:完全将 jQuery 移到一个新的命名空间(Completely move jQuery to a new namespace in another object.)

  这个参数主要是用于在同一页面需要导入不同版本的jQuery时使用的,即创建一个全新的空间指向jQuery。(这个不怎么明白。

  例如:

var dom = {};
dom.query = jQuery.noConflict(true);
  结果:
dom.query("div p").hide(); // 新 jQuery 的代码
$("content").style.display = "none"; // 另一个库 $() 的代码
jQuery("div > p").hide(); // 另一个版本 jQuery 的代码

  总结:对于jQuery的JS库冲突,我只知道了如何去解决。而并不知道具体的细节原因,而且具体的技术知识还不清晰,因此在接下来要努力地去寻找解决的方法。对于jQuery中的库冲突,我还残留的问题有:

  ①为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?

  ②关于解决在同一页面中引入不同版本的jQuery库,使用jQuery.noConflict(true)解决的细节?(如:库引入顺序是否会导致不同的解决方式?等)

  ③为什么在同一页面引入多个JS库会引起错误,具体的原因是什么?

同一页面中引入多个JS库产生的冲突解决方案(转)的更多相关文章

  1. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  2. 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部

    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...

  3. 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了

    原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...

  4. JSP页面中引入另一个JSP页面

    一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...

  5. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  6. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  7. Thymeleaf模版--子页面单独引入CSS、JS文件

    https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...

  8. 由js文件中引入另外的js文件想到的

    1. html中,使用<script src="../static/js/xxx.js"></script>引入js文件.   2. 在js文件中,引入js ...

  9. jsp页面中引入文件路径问题的解决方案(使用request获取项目路径)【原创】

    在项目页面中,总会引入一些js和css,相对路径or绝对路径的选择就显得至关重要了!下面是项目中遇到的问题和解决方案,做一下记录! 环境: myEclipse创建工程,使用jsp+css+js,项目目 ...

随机推荐

  1. 软件测试自动化之- 基于反射的UI自动化测试框架 - UI Automation Test Framework

    测试自动化程序的任务 基于反射的ui测试自动化程序,要完成的6项任务: 通过某种方式从测试套件程序中运行待测程序(AUT: Applicaton Under Test),以便于两个程序之间进行通信 操 ...

  2. springboot http2

    转 Spring Boot With Http2 原文链接 http://www.jianshu.com/p/3d7ac535d6a0 拓展链接 http://www.jianshu.com/p/97 ...

  3. HTML5游戏实战之精灵翻转

    要实现精灵的翻转.很easy.先看实际效果点这里. 代码仅仅有区区几行: var sp = this.getWindow().find("ui-status2-general"); ...

  4. C++继承 派生类中的内存布局(单继承、多继承、虚拟继承)

    今天在网上看到了一篇写得非常好的文章,是有关c++类继承内存布局的.看了之后获益良多,现在转在我自己的博客里面,作为以后复习之用. ——谈VC++对象模型(美)简.格雷程化    译 译者前言 一个C ...

  5. 显示vim当前颜色主题

    在vim内,查看colors_name :echo g:colors_name 如果值为空,那么默认为:default主题

  6. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. solr学习之一 搜索基本知识

    学习了一段时间的solr了,用自己的方式总结下目前学到的内容,这是个系列文章,这里面的有些说法可能不准确,也可能有问题 欢迎大家指正. 一.搜索引擎目的 搜索引擎在我们的生活中,已经无处不在,除了我们 ...

  8. QT 4.8 静态库编译方法

    最最初踏上QT之路是受到了XiaomaGee的指点,相比于常规的窗口程序开发,QT有着以下特点: 1. 优良的跨平台特性(支持Win.Linux.Mac 不同的平台下只需重新编译即可使用) 2. 面向 ...

  9. ARM获得PC指针为何PC=PC+8

    http://blog.csdn.net/sddzycnqjn/article/details/7691534 R15(PC)总是指向“正在取指”的指令,而不是指向“正在执行”的指令或正在“译码”的指 ...

  10. java 读取execl文件

    java 中读取execl文件是必要功能,下面说下几种读取方式 1.jxl   (支持2003 不支持 2007  貌似最新版支持) /**    * 规则设置的模板导入    * @param fi ...