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. fix orphaned user

    orphan user是某个数据库的user,只有user name而没有login,即,在存在于sys.database_principals 中, 而不存在于 sys.server_princip ...

  2. LINQ系列：Linq to Object集合操作符

    集合操作符对元素的集合或序列集合进行操作,并返回一个集合.LINQ共有4种集合查询操作符:Distinct.Union.Intersect和Except. 1. Distinct Distinct操作 ...

  3. LINQ系列：LINQ to ADO.NET概述

    LINQ to ADO.NET 包括两种独立的技术: LINQ to DataSet 和 LINQ to SQL. 使用 LINQ to DataSet 可以对DataSet 执行丰富而优化的查询,而 ...

  4. WPF datagrid 加入图片

    <DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...

  5. x86汇编程序基础(AT&T语法)

    一.简单的汇编程序 以下面这段简单的汇编代码为例 .section .data .section .text .globl _start _start: movl $, %eax movl $, %e ...

  6. 静态Include和动态Include测试并总结

    主要代码 hjzgg.css .center-div{ width:auto; margin-left: 40%; margin-right: 40%; display: block; positio ...

  7. 如何装出高逼格的64位win7系统

    自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...

  8. 1Z0-053 争议题目解析520

    1Z0-053 争议题目解析520 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 520.Which of the following are not disabled by de ...

  9. hibernate笔记--单(双)向的多对多映射关系

    在讲单向的多对多的映射关系的案例时,我们假设我们有两张表,一张角色表Role,一张权限表Function,我们知道一个角色或者说一个用户,可能有多个操作权限,而一种操作权限同时被多个用户所拥有,假如我 ...

  10. Anliven - 一碗毒鸡汤

    什么是你的核心动力,支撑着你持续前进? 什么是你的加速度,激发你全部的潜能和勇气? 你的核心动力应该来自于: 家人与朋友的信任.包容与期待 你本应承担的责任 对自己有所要求,有所期待,你本应更好 而你 ...