jquery库与其他库冲突的问题解决

最新推荐文章于 2019-04-09 16:03:08 发布

Sparkjin

最新推荐文章于 2019-04-09 16:03:08 发布

阅读量665

点赞数

分类专栏： web前端

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery.noConflict() 方法

在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过jQuery.noConflict() 方法进行解决

定义和用法

noConflict() 方法让渡变量 $ 的 jQuery 控制权。

该方法释放 jQuery 对 $ 变量的控制。

该方法也可用于为 jQuery 变量规定新的自定义名称。

提示：在其他 JavaScript 库为其函数使用 $ 时，该方法很有用。

语法

jQuery.noConflict(removeAll)

参数	描述
removeAll	布尔值。指示是否允许彻底将 jQuery 变量还原。

说明

许多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库，我们可以通过调用 $.noConflict() 向该库返回控制权：

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="http://www.cnblogs.com/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>

转自：http://www.cnblogs.com/JoannaQ/archive/2013/04/06/3001858.html

参考http://www.w3school.com.cn/jquery/jquery_noconflict.asp

Sparkjin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery库与其他库冲突的问题解决

jQuery.noConflict() 方法在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过jQuery.noConflict() 方法进行解决定义和用法noConflict() 方法让渡变量 $ 的 jQuery 控制权。该方法释放 jQuery 对 $ 变量的控制。该方法也可用于
复制链接

扫一扫