首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生。比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的。
要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可。

一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:

 代码如下 复制代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
       alert( jQuery(this).text() );
});
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:

 代码如下 复制代码

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
       jQuery("p").click(function(){
              alert( jQuery(this).text() );
       });
});

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

//代码二

 代码如下 复制代码

<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>

码三

 代码如下 复制代码

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
       $("p").click(function(){ //继续使用 $ 方法
       alert( $(this).text() );
       });
});

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

//代//代码四

 代码如下 复制代码

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
       $(function(){ //匿名函数内部的$均为jQuery
              $("p").click(function(){ //继续使用 $ 方法
                     alert($(this).text());
              });
       });
})(jQuery); //执行匿名函数且传递实参jQuery

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

/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去
       jQuery.noConflict();
});
</script>

除了上面的方法之外,我们还可以采用第二种方法来解决冲突的问题,那就是最笨但最有效的解决方法:用自定义的命名空间来避免冲突。
比如说需要的项目名称为xmlas,那么我们原来的代码:

 代码如下 复制代码

$('contentArea').show()

就可以写成以下这种形式:

 代码如下 复制代码

XMLAS('contentArea').show()

3.在jquery代码中,当遇到冲突的时候我们可以使用$符号,这需要我们在ready事件中添上以下代码:

 代码如下 复制代码

jQuery(document).ready(function($) {   
    //你在这里可以放心的使用$了  
    });

当然,您也可以简写成下面的形式:

 代码如下 复制代码
    jQuery(function($){   
    //这里为使用$的代码  
    });  

由此,根据第一个方法来实现的完整代码如下:

 代码如下 复制代码
    //jquery库与其他库冲突的完整解决办法  
    <script type="text/javascript" src="photolist.js"></script>   
    <script type="text/javascript" src="jquery.js"></script>   
    <script type="text/javascript">   
    $.noConflict();   
    jQuery(function($) {   
    //使用了$的jquery代码  
    });   
    //这里是你的其他js库代码   
    </script>

当然,你也可以对上面的完整代码进行一步的简化,简化代码如下:

 代码如下 复制代码

//简化后的代码  
    $.noConflict()(function(){   
    //这里是你的带$的jquery代码  
    });   
    //这里是其他库的代码

 

Jquery库及其他库之间的$命名冲突解决办法的更多相关文章

  1. jquery获取不到append出来的新元素的解决办法

    jquery获取不到append出来的新元素的解决办法 $('body').on("click","property",function(){}) jq1.7+ ...

  2. jQuery库冲突解决办法

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

  3. macOS下加载动态库dylib报"code signature invalid"错误的解决办法

    一.现象描述 在macOS上搞开发也有一段时间了,也积攒了一定的经验.然而,今天在替换工程中的一个动态库时还是碰到了一个问题.原来工程中用的是一个静态库,调试时发现有问题就把它替换成了动态库.这本来没 ...

  4. .Net Framework项目引用.NetStandard标准库出现版本冲突解决办法

    今天在工作中出现一个引用问题,害我找问题找了很久.起因是在一个Winform项目下需要引用一个.NetStandard标准库,标准库引用了System.ComponentModel.Annotatio ...

  5. pycharm不能安装第三方库,错误代码Non-zero exit code (1) 的解决办法

    pycharm版本 2019.3 大致意思是安装失败,建议的解决方案:尝试从系统终端运行此命令.确保使用正确的'pip'版本,该版本已为位于'C:\ Users \ G \ Desktoplgianf ...

  6. jquery的$post方法不发送空数组的解决办法

    问题:jquery里的ajax在提交post请求时,如果数据里有一个空数组,则这个空数组不会提交上去 技术上的解决办法如下: 源代码: var params = { type : , ids:[] } ...

  7. css命名冲突解决方法

    css的命名冲突目前有几种解决方法: 1.命名约定 人为的制定一下命名规则以避免冲突,例如前缀,嵌套等 2.CSS in JS 在JavaScript中写CSS,使用工具编译为css,最常见的是sty ...

  8. IOS lib(.a)库冲突解决办法

    在引入第三方lib(.a)库时,经常会由于第三方lib库中又引入同你现有工程相同的开源代码而造成.o冲突,最近在集成汉王名片识别时发生ASIHttp的.o冲突.我想说的是像这种开源的使用率很高的源代码 ...

  9. Android 第三方库导致jar包冲突解决办法

    这几天的任务是将mapbox的工程合到程序中去,但是合并过程却出现了问题 合并方法: 在app的build.gradle中添加 dependencies { compile ('com.mapbox. ...

随机推荐

  1. RSA前台js加密,后台C#解密

    一.需求: 为了安全,项目中前台登陆用的密码需要加密传到后台,后台c#解密登陆密码. 二.解决方案 采用非对称加密算法RSA来达到目的,前台登陆页面一加载便发送一次ajax请求获取后台产生的公钥,用于 ...

  2. 音频视频播放(jquery中将jquery方法转化成js方法)

    在jQuery中没有音频视频直接播放的方法,我们在写音频视频时,应该将jquery的方法转化为js方法:play():pause() 补充:   将jq对象转化成js对象写法: var music=$ ...

  3. 在Android Eclipse 开发如何 使用 (*.aar)文件

    http://www.cnblogs.com/shortboy/p/4424944.html 开场白:其实这篇文章有点白费心机. 详细说明是:http://blog.csdn.net/qiujuer/ ...

  4. Codeforces Gym 100286F Problem F. Fibonacci System 数位DP

    Problem F. Fibonacci SystemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...

  5. Binder机制1---Binder原理介绍

    1.Binder通信机制介绍 这篇文章会先对照Binder机制与Linux的通信机制的区别,了解为什么Android会另起炉灶,採用Binder.接着,会依据Binder的机制,去理解什么是Servi ...

  6. npm获取配置,设置代理

    npm获取配置有6种方式,优先级由高到底. 命令行参数. --proxy http://server:port即将proxy的值设为http://server:port. 环境变量. 以npm_con ...

  7. leetcode -- Search for a Range (TODO)

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  8. UNIX标准化及实现之限制

    前言 UNIX系统实现定义了很多幻数和常量,其中有很多已被硬编码(关于硬编码和软编码:http://www.cnblogs.com/chenkai/archive/2009/04/10/1432903 ...

  9. 强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的 ...

  10. Redis 服务器

    Redis 服务器命令主要是用于管理 redis 服务. 实例 以下实例演示了如何获取 redis 服务器的统计信息: redis 127.0.0.1:6379> INFO # Server r ...