<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery测试页-111cn.net</title>
</head>
<body>
    <!-- 引入 jquery 1.8.0 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        var $180 = $;
    </script>
    <!-- 引入 jquery 1.9.0 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        var $190 = $;
    </script>
    <!-- 引入 jquery 2.0.0 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        var $200 = $;
    </script>

<script type="text/javascript">
        console.log($180.fn.jquery);
        console.log($190.fn.jquery);
        console.log($200.fn.jquery);
    </script>
</body>
</html>

2.同一页面jQuery和其他js库冲突解决方法

①.jQuery在其他js库前

 代码如下 复制代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery测试页-111cn.net</title>
</head>
<body>
    <!-- 引入 jquery 1.8.0 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        var $180 = $;
        console.log($.fn.jquery);
    </script>
    <!-- 引入 其他库-->
    <script type="text/javascript">
        $ = {
            fn:{
                jquery:"111cn.net"
            }
        };
    </script>

<script type="text/javascript">       
        console.log($.fn.jquery);
        console.log($180.fn.jquery);
    </script>
</body>
</html>

②.jQuery在其他js库后

 代码如下 复制代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery测试页-111cn.net</title>
</head>
<body>
    <!-- 引入 其他库-->
    <script type="text/javascript">
        $ = {
            fn:{
                jquery:"111cn.net"
            }
        };
    </script>
    <!-- 引入 jquery 1.8.0 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">   
        console.log($.fn.jquery);   
        var $180 = $.noConflict();
        console.log($.fn.jquery);
        console.log($180.fn.jquery);
    </script>
</body>
</html>

再补充一下方法

方案1：
引入noConflict(),将$替换为其他符号

 代码如下 复制代码
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});

缺点：引入了这段代码后，不仅是当前的js文件，该html引用的所有js中，如果有用到jquery中的$，都得用$j来代替之前的$

方案2：

 代码如下 复制代码
ready函数是jquery的入口函数，可以
将$(document).ready(function(){
替换成
jQuery( document ).ready(function( $){}

缺点：只对ready嵌套内的代码有效，对嵌套外的代码是无效的。如果你所有的逻辑，都在写ready函数中，那没问题。但我们一般都会在ready函数之外写一些子函数，然后ready函数再去调用这些函数。这个方案对这些函数是无效的，因此这套方案有局限性。

方案3（推荐，特别是开发js插件时）：

给js内容包上一个函数

 代码如下 复制代码

jQuery(function($){
//你的js代码放在这里（例如第二个方案提到的ready函数和子函数）
//如果是js文件，其实就是在文件头部和尾部各加一行代码
}

或者

(function($) {
//你的js代码
})(jQuery);

这个方法，没有上面两个方案的缺点，只会影响到被包在jQuery(function($){}中的代码。
不会影响到其他js代码，这一点很重要。试想一下，假如你写了一个js公共组件，该组件需要用到jquery，为了提高鲁棒性，需考虑$符号冲突问题。如
果使用方案1，那么别人在使用时，还得遵守你的约定，把自己js代码中的$改成$,而如果使用方案3，既能避免$冲突对该组件的影响，又无需要求使用公共
组件的人修改自己的代码。

 

解决同一页面jQuery多个版本或和其他js库冲突方法的更多相关文章

  1. 解决jQuery多个版本，与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  2. jquery判断浏览器版本插件，jquery-browser.js

    jquery判断浏览器版本插件,jquery-browser.js,jquery 判断是否为ie浏览器插件 >>>>>>>>>>>&g ...

  3. jQuery与其他JS库冲突解决

    实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...

  4. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  5. jQuery避免$符和其他JS库冲突的方法对比

    1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type="text/javascript" sr ...

  6. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

  7. jQuery库冲突

    jQuery库冲突解决办法   一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂 ...

  8. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

  9. jQuery与其他JS库共存

    * 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...

随机推荐

  1. SQL Server Management Studio 简单使用说明

    1.对数据库中的数据生成脚本 a.选中要生成脚本的数据库右键->任务->生成脚本(如下图)->下一步->下一步->选中你想要生成的内容->下一步->完成

  2. [Swift A] - Using Swift with Cocoa and Objective-C--Mix and Match

    Swift与Objective-C的兼容能力允许你在同一个工程中同时使用两种语言.你可以用这种叫做“mix and match”的特性来开发基于混合语言的应用.使用Swfit的最新特性--“mix a ...

  3. 【PHP】在目标字符串指定位置插入字符串

    PHP如何在指定位置插入相关字符串,例子:123456789变为1_23_456789插入"_"到指定的位置! (可以用作换行或者其他处理) 插入示例,具体思路在代码中有注释: & ...

  4. 剩下5种算法代码分析与使用示例（remove 、rotate 、sort、lower_bound、accumulate）

    一.移除性算法 (remove)  C++ Code  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  5. 实现WinForm窗体的美化(借助第三方控件)

    在winform项目中,其实皮肤就是一个第三方的控件,名字是IrisSkin4.dll只要添加到你的工具箱里就可以和其它控件一样使用了 一.添加控件IrisSkin4.dll.方法: 先把IrisSk ...

  6. vue $http请求服务

    vue中的$http服务  需要引入一个叫vue-resource.js的文件,因为vue.js中没有$http服务.如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可. ...

  7. c++，当const char*为0时，不能将其直接赋给string

    下面程序会崩溃: const char* t_objName = (obj!=NULL)?obj->getName(): 0; string objName=t_objName; cout< ...

  8. JavaScript 中 this 的用法

    在 JavaScript 中,this 是动态绑定,或称为运行期绑定的.一般而言,在Javascript中,this 指向函数执行时的当前对象. 由于其运行期绑定的特性,JavaScript 中的 t ...

  9. java中成员变量、代码块、构造函数运行顺序

    1.java虚拟机执行程序,首先须要装载类,安装现装载父类,初始化父类的静态代码块和静态成员变量 再load子类. 初始化子类静态代码块和成员变量 2.load完成父类与子类后,从main函数入口运行 ...

  10. 我的高效编程的秘诀--开发环境的重要性(IOS)

    我觉得一个好的开发环境,能够让一个开发者的工作效率提高两倍以上,也能够让一个小白看上去不那么蠢: 开发环境不是仅仅安装一个xcode这种ide就OK了,在我看来开发环境的部署范围比較广泛,以下我来说说 ...