请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

Endige-新锐工作室

 找回密码
 立即注册

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 4620|回复: 0

jQuery与其它库冲突的解决方法 [复制链接]

Rank: 2

威望
0
金钱
43
贡献
0
新豆
0
最后登录
1970-1-1
注册时间
2011-11-23
精华
0
积分
52
阅读权限
20
帖子
9
发表于 2011-11-25 14:41:53 |显示全部楼层
本帖最后由 louis 于 2011-11-25 14:53 编辑

在jQuery库中,几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里,因此当把jQuery和其它javascript类库一起使用时,不会引起冲突.
(注意:默认情况下,jQuery用$作为自身的缩写而以)
如果jQuery类库和别的类库冲突的话,可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库。看下面小片断代码
  1. <script type="text/javascript" src="../JS/JsCOM.js"></script>
  2. <script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>


假设JsCOM.js库中,有这样一个函数
代码如下:
  1. function $(objName) {
  2. if (document.getElementById) {
  3. return eval('document.getElementById("' + objName + '")')
  4. }
  5. else {
  6. return eval("document.all." + objName)
  7. }


大家都知道jQuery里面也一个这样的函数,为了不引起冲突,我们将jQuery的变量$的控制权移交出给别的javascript库
代码如下:
  1. jQuery.noConflict(); //将变量$的控制权移交给JsCOM.js
  2. var $cr = jQuery("#cr"); //照样使用jQuery类库,只是用jQuery代替了原来的$而以。
  3. var JsCOM_cr = $("cr"); //使用JsCOM.js类库


在这里可以把jQuery()函数作为jQuery对象的制造工厂.
在这里要注意几点
1.引用javascript类库时,一定要把jQuery引用放在最后面,就像上面一样,JsCOM.js的引用在jQuery引用的前面(具体原因我也不知,不过确实需要这样)
2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的(好像说这个有点多余,不过还是希望大家不要犯这种错误)
基本上根据上面的方法就可以解决jQuery和其它库的冲突问题了!
如果你觉得上面的方式不爽,每次都要打jQuery来代替$增加了您敲键盘的工作量,那请接着看。。
除上面之外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个快捷方式,可以进行如下操作;
代码如下:
  1. var $j = jQuery.noConflict(); //自定一个快捷方式
  2. var $cr = $j("#cr"); //使用jQuery类库,得用自定义快捷方式----$j;
  3. var JsCOM_cr = $("cr"); //和上一段代码一样,使用的是JsCOM.js类库


如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法
其一:
代码如下:
  1. jQuery.noConflict(); //将变量$的控制权让给JsCOM.js
  2. jQuery(function($)
  3. {
  4. $("p").click(function() //在函数内继续可以使用jquery类库的$()方法
  5. {
  6. alert($(this).text());
  7. })
  8. })
  9. var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$()方法


其二:
代码如下:
  1. jQuery.noConflict(); //将变量$的控件权移交给别的类库,使用jquery类库的$符号时,请使用jQuery("#id");
  2. (function($) { //定义匿名函数并设置形参为$
  3. $(function() { //匿名函数内部的$均为jQuery
  4. $("div").click(function() {//继续使用$()方法
  5. alert($(this).text());
  6. })
  7. })
  8. })
  9. (jQuery); //使用匿名函数且传递实参jQUery
  10. alert($("cr")); //使用的是jsCOM.js类库中的$()函数


第二种方法应该是兼容旧的代码最好的方式,修改的代码是最少的!
不过如果是新写的jQuery代码,我还是比较喜欢使用刚开始讲的那种(jQuery.noConflict(),然后就使用jQuery("#id"),这种方式)
如果您的页面是先引用jQuery类库再引入别的类库的话,那么我们可以直接使用jQuery来做一些工作,同时,可以使用$()方法作为其它库的快捷方式。这里无需调用jQuery.noConflict()函数,请看下面代码
代码如下:
  1. <script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
  2. <script type="text/javascript" src="../JS/JsCOM.js"></script>
  3. jQuery().ready(function() { //无需调用jQuery.noConflict()函数
  4. var $cr = jQuery("#cr");
  5. $cr.click(function() {
  6. if ($cr.is(":checked")) {
  7. alert("感谢你的支持!你可以继续操作了..");
  8. }
  9. })
  10. })
  11. alert($("cr")); //使用的是jsCOM.js类库中的$()函数

好了,看了上面这么多种方法来解决冲突,这下你可以放心的在您的项目中引用jQuery了吧 :)
您需要登录后才可以回帖 登录 | 立即注册

馨然玫瑰花茶

Archiver|手机版|Endige Inc   

GMT+8, 2017-9-26 22:31 , Processed in 0.044914 second(s), 13 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部