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

1.同一页面jQuery多个版本或冲突解决方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jQuery测试页</title>

</head>

<body>

<!-- 引入1.6.4版的jq -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

<script> var jq164 = jQuery.noConflict(true); </script>

<!-- 引入1.4.2版的jq -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script> var jq142 = jQuery.noConflict(true); </script>

<script>

(function($){

    //此时的$是jQuery-1.6.4

    $('#');

})(jq164);

</script>

<script>

jq142(function($){

    //此时的$是jQuery-1.4.2

    $('#');

});

</script>

</body>

</html>

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

jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
jquery.js在prototype.js之前进行引入,如：

<script src="jquery.js" type="text/javascript"></script>

<script src="prototype.js" type="text/javascript"></script>

<p id="pp">test---prototype</p>

<p>test---jQuery</p>

2.1 当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

<script type="text/javascript">

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js，全名可以不调用。

jQuery(function(){                    //使用jQuery

    jQuery("p").click(function(){

        alert( jQuery(this).text() );

    });

});

//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。

$("pp").style.display = 'none';        //使用prototype

</script>

2.2  您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

<script type="text/javascript">

var $j = jQuery.noConflict();        //自定义一个比较短快捷方式

$j(function(){                        //使用jQuery

    $j("p").click(function(){

        alert( $j(this).text() );

    });

});

$("pp").style.display = 'none';        //使用prototype

</script>

2.3  如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

<script type="text/javascript">

jQuery.noConflict();     //将变量$的控制权让渡给prototype.js

jQuery(document).ready(function($){

    $("p").click(function(){        //继续使用 $ 方法

        alert( $(this).text() );

    });

});

jQuery(function($){                    //使用jQuery

    $("p").click(function(){        //继续使用 $ 方法

        alert( $(this).text() );

    });

});

</script>

2.4 使用语句块：

<script type="text/javascript">

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js

(function($){                        //定义匿名函数并设置形参为$

    $(function(){                    //匿名函数内部的$均为jQuery

        $("p").click(function(){    //继续使用 $ 方法

            alert($(this).text());

        });

    });

})(jQuery);                            //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none';        //使用prototype

</script>

这种使用语句块的方法非常有用，在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

注意:
1.引用javascript类库时，把jQuery引用放在最后面，可以避免冲突。
2.特别要注意jQuery()代替$()时，jQuery是区分大小写的，因为javascript本身就是区分大小写的。

解决jQuery多个版本，与其他js库冲突方法的更多相关文章

  1. 解决同一页面jQuery多个版本或和其他js库冲突方法

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. jquery 1.9版本后不在支持browser 方法的解决方案

    今天对jquery 进行升级,导致项目出错,原来在1.9版本之后 jquery 不支持browser 方法了.  官方建议的又不好用,所以我所jquery 原来的代码摘除来,又扩展回去. //解决jq ...

  3. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

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

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

  5. qs.js库 使用方法

    1.qs.js库说明 qs是一个url参数转化(parse和stringify)的js库. https://www.npmjs.com/package/qs 2.使用(以vue文件做示例) (1)基本 ...

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

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

  7. 解决jQuery中美元符号（$）命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  8. jQuery库冲突解决办法

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

  9. jQuery库冲突

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

随机推荐

  1. 谈谈php里的IOC控制反转，DI依赖注入

    理论 发现问题 在深入细节之前,需要确保我们理解"IOC控制反转"和"DI依赖注入"是什么,能够解决什么问题,这些在维基百科中有非常清晰的说明. 控制反转(In ...

  2. for循环或Repeat里面对某个字段进行复杂处理的解决方案

    在后台用一个方法处理

  3. SQL Server 维护计划实现数据库备份（策略实战）

    一.背景 之前写过一篇关于备份的文章:SQL Server 维护计划实现数据库备份,上面文章使用完整备份和差异备份基本上能解决数据库备份的问题,但是为了保障数据更加安全,我们需要再次完善我们的备份计划 ...

  4. C#6.0 十大常用特性

    一.字符串插值 (String Interpolation) C# 6之前我们拼接字符串时需要这样 var Name = "Jack"; var results = "H ...

  5. Util应用程序框架公共操作类(三):数据类型转换公共操作类（扩展篇）

    上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...

  6. 关于SubSonic3.0生成的表名自动加复数（s）的“用户代码未处理SqlException，对象名'xxxs'无效”异常处理

    使用SubSonic3.0模版生成时,同2.2版本一样,都会自动在一些类似数据库要用到的关键后面加要s(复数),这里也是3.0的一个小Bug,在查询时由于插件并没有完全的去掉s,所以会产生“用户代码未 ...

  7. 楼主，可否发一份代码给我！QQ....

    一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...

  8. ubuntu 配置git公钥

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...

  9. 使用phpize安装php扩展

    环境: CentOs 6.3 php 7 nginx 举例: 安装ssh2扩展 1.登陆http://pecl.php.net,搜索ssh2,如下图所示,注意版本的选择要根据php的版本来 2.下载s ...

  10. 【Android】《App研发录》总结

    说明 看这本书的时候,总感觉怪怪的. 因为在地铁上看完的,作者书中基本都是他自己工作中遇到的问题和坑,虽说这样会让人感觉找到了解决方案,可以再进行深入的研究,可是某些地方介绍的有点片面,仅仅是引用部分 ...