jQuery与其它控件发生冲突

最新推荐文章于 2020-04-09 14:51:42 发布

hiperion

最新推荐文章于 2020-04-09 14:51:42 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： jquery function 脚本 prototype callback 框架

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

昨天开发项目时需要把一个城市控件添加到页面中，这个页面是以列表的形式显示数据信息，并使用jQuery脚本库的ajax异步读取数据并将数据添加显示到列表中。

按理说添加一个控件花不了多长时间，但我遇到了jQuery与其它框架冲突的问题，因为我对jQuery框架不了解，这个简单问题就升级为复杂问题了。此问题尽花了我好几个小时才查出来，本以为是aspx页面控件路径不对、用户控件(ascx)引用不对、aspx页面中的控件加载方法放置的位置不对、用户控件(ascx)页面控件路径不对引用不对、用户控件(ascx)页面中的控件加载方法放置的位置不对、把城市控件放到用户控件(ascx)页面还是不对……我用排出法排除了很多的不对，最后在“山穷水尽疑无路”的心情下，我把相同代码放到其它页面中是正确的，这时我想到了是有冲突问题，想到这我把引用jQuery脚本库的方法注释。注释后城市控件就可以使用了。真是“柳暗花明又一村”啊。

查出原因后，我询问了对jQuery比较熟悉的同事，他说会有冲突问题，是 $的控制权冲突，并把解决方案告诉了我。原来只要在页面中的脚本里添加 jQuery.noConflict() 方法，代码稍微修改就可以解决。

从网上找了同行的详细解决方案，http://apps.hi.baidu.com/share/detail/23632495
-------------------------------------------------------------------------
jquery库与其他库冲突的问题解决-jquery.noConflict()

在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过以下几种方案进行解决：
一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

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

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

$("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