<!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. 怎样获取oracle dbid

    1.查询v$database获得 因为DBID在控制文件和数据文件里都存在记录,所以假设可以mount数据库就行查询v$database视图获得.  SQL> alter database mo ...

  2. nginx代理tomcat

    http://blog.csdn.net/kongqz/article/details/6838989 http://www.800l.com/linux-nginx-tomcat-jdk.html ...

  3. java的重写、重载、覆盖的差别

    多态性  通过继承,一个类能够用作多种类型:能够用作它自己的类型.不论什么基类型,或者在实现接口时用作不论什么接口类型.这称为多态性  重载  每一个类型成员都有一个唯一的签名.方法签名由方法名称和一 ...

  4. TFS2013以独占的方式签出

  5. [Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）

    引言 出差终于回来了,这篇文章算是这个月的博客的开篇吧. 上篇文章:[Asp.net]Calendar+JqueryUi实现日程管理——添加日程 上篇文章主要贴了一些该项目的界面,这里面,将主要代码也 ...

  6. 摘：SQL Server数据类型的25种

    我们大家都知道数据类弄是数据的一种基本属性,其主要是表示数据在实际操作中所表示信息的类型.任何一种计算机语言都定义了自己的数据类型. 当然,不同的程序语言都具有不同的特点,所定义的SQL Server ...

  7. 将 数据从数据库 直接通过 pyspark 读入到dataframe

    from pyspark.sql import SparkSession spark = SparkSession \ .builder \ .appName("Python Spark S ...

  8. FreeMarker中的list集合前后台代码

    freemarker中的list集合前后台代码: FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它 ...

  9. atitit.获取connection hibernate4

    atitit.获取connection hibernate4 1. SessionFactoryUtils法(推荐) 1 2. ConnectionProvider 法( ) 1 3. 嘎自实现法(不 ...

  10. 各种波形文件vcd,vpd,shm,fsdb生成的方法（zz）

    仿真是IC设计不可或缺的重要步骤,仿真后一般需要记录下波形文件,用于做详细分析和研究.说一下几种波形文件WLF(Wave Log File).VCD(Value Change Dump)文件,fsdb ...