<!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. android中获取某段程序的执行时间

    Date   startDate   =   new   Date(System.currentTimeMillis()); 在收到设备返回数据之后添加如下语句: Date   endDate   = ...

  2. 怎样线程安全地遍历List：Vector、CopyOnWriteArrayList

    遍历List的多种方式 在讲怎样线程安全地遍历List之前,先看看通常我们遍历一个List会採用哪些方式. 方式一: for(int i = 0; i < list.size(); i++) { ...

  3. android 利用cmdline，将參数从preloader传递到kernel

    以定义參数 cus_param 为例.int型变量. 1. Preloader部分 Platform.h(mediatek\platform\[$platform]\preloader\src\dri ...

  4. 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器

    1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...

  5. 最大似然估计（MLE）与最大后验概率（MAP）

    何为:最大似然估计(MLE): 最大似然估计提供了一种给定观察数据来评估模型参数的方法,即:“模型已定,参数未知”.可以通过采样,获取部分数据,然后通过最大似然估计来获取已知模型的参数. 最大似然估计 ...

  6. python --标准库 路径与文件 (os.path包, glob包)

    os.path包 os.path包主要是处理路径字符串,提取出有用信息. #coding:utf-8 import os.path path = 'D:\\Python7\\test\\data.tx ...

  7. .NET资料之-根据两点经纬度计算直线距离

    最近做东西碰到要根据两点经纬度计算之间的直线距离,就网上找了查了下资料.因为这类接触的比较少,就直接找现成的代码了,没怎么研究.代码如下,作为记录. private const double EART ...

  8. 摘： VS2010 C++ 调用 DLL （C++编写）

    一.为什么需要dll 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用. 比较常见的例子是各种应用程序框架,如ATL. ...

  9. 深入理解MapReduce的架构及原理

    1. MapReduce 定义 Hadoop 中的 MapReduce是一个使用简单的软件框架.基于它写出来的应用程序能够执行在由上千个商用机器组成的大型集群上,并以一种可靠容错式并行处理TB级别的数 ...

  10. POJ 3279 Fliptile （二进制+搜索）

    [题目链接]click here~~ [题目大意]: 农夫约翰知道聪明的牛产奶多. 于是为了提高牛的智商他准备了例如以下游戏. 有一个M×N 的格子,每一个格子能够翻转正反面,它们一面是黑色,还有一面 ...