<!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. 安卓手机GPU OpenCL总结（转）

    前段时间,把市面上手机GPU OpenCL支持情况做了一个总结.总结如下: 目前,手机 GPU 市面有四个公司产品:Qualcomm, Imagination Technologies,ARM, Vi ...

  2. Apple Watch 会再一次改变世界么？

    这一次苹果发布会,苹果推出了Apple Watch.他会像iPhone系列一样,去改变大家对于手表的理解么?会像iPhone一样受到大家的追捧么? 我觉得第一代的产品只可能是试探性的,真正能去引爆市场 ...

  3. centos 6.5安装docker报错（查看报错详细信息--推荐）

    (1)yum安装docker [root@namenode ~]# yum install docker-io (2)启动docker [root@namenode ~]# /etc/init.d/d ...

  4. oracle导出数据库dmp文件

    导出数据库为dmp文件,按照当前导出时间设置文件名称 @ECHO OFF ECHO 备份 SCOTT 用户的数据…… SET DBUserName=scott SET DBPassword= SET ...

  5. Web应用程序项目OxiteSite已配置为使用IIS.在本地计算机上找不到服务器

    今天还是没事干(我的博客还想都是以这句话开始的),看看小组里边的文章Oxite初探.下载Oxite的41500版本,打开后遇到这样的问题.如下图所示 解决方法: 1.邮件点击OxiteSite项目,选 ...

  6. hook NtReadVirtualMemory干扰杀软扫描

      信息来源:邪恶八进制信息安全团队(www.eviloctal.com)文章作者:asm(http://www.sbasm.cn) 写了个对抗扫描的东西,跟大家分享!技术含量不高,大牛飘过.一直以来 ...

  7. CMD查看进程ID并查杀进程

    开始-运行,输入CMD打开命令行界面,输入命令netstat -ano 结束该进程C:\>taskkill /f /t /im Wiz.exe 根据进程ID杀 >taskkill /F / ...

  8. 使用VS2012遇到的问题

    问题1:VS2012 编译程序时:无法查找或打开PDB文件 解决方法:调试-选项-符号-Microsoft符号服务器打钩,然后确定,就OK了. 问题2:按F5运行.c程序,dos窗口闪退 解决方法:C ...

  9. atitit.XML类库选型及object 对象bean 跟json转换方案

    atitit.XML类库选型及object 对象bean 跟json转换方案 1. XML类库可以分成2大类.标准的.这些类库通常接口和实现都是分开的 1 2. 常见的xml方面的方法 2 2.1.  ...

  10. 浅谈I2C总线

    I2C总线概述 I2C(Inter-Integrated Circuit)总线是一种由PHILIPS公司在80年代开发的两线式串行总线,用于连接微控制器及其外围设备.I2C总线最主要的优点是其简单性和 ...