解决query和其他库之间的冲突

来源:互联网 发布:淘宝美工入门 编辑:程序博客网 时间:2024/04/29 18:29

1、jQuery库在其他库之后导入

在其他库和jQuery库都加载完毕后,可在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他js库如prototype.js,示例如下:

jQuery.noConfict();//将变量$的控制权移交给其他js框架(prototype.js)

jQuery(function() {//使用jquery
   jQuery("p").click(function(){
        alert(jQuery(this).text());
   }
}
$("pp").style.display='none';//使用prototype

自定义一个jQuery快捷方式:

var $j = jQuery.noConfict();//自定义一个jQuery快捷方式

$j(function() {//使用jquery自定义的快捷方式
   $j("p").click(function(){
        alert($j(this).text());
   }
}
$("pp").style.display='none';//使用prototype

不采用自定义名称,仍想使用$而不管其他库的$()方法,且不会冲突,可使用闭包方式

方式一

jQuery.noConflict();//将变量$的控制权移交给prototype.js
jQuery(function($) {//使用jQuery设定界面加载时执行的函数
   $("p").click(function(){//在函数内部继续使用$()方法
        alert($(this).text());
   }
}
$("pp").style.display='none';//使用prototype

方式二
jQuery.noConflict();//将变量$的控制权移交给prototype.js
(function($){//定义匿名函数并设置形参为$
    $(function() {//匿名函数内部的$均为jQuery
    $("p").click(function(){//继续使用$()方法
   alert($(this).text());
    }
   }
})(jQuery)//执行匿名函数且传递实参jQuery
$("pp").style.display='none';//使用prototype

 

2、jQuery库在其他库之前导入

 之前导入,可直接使用jQuery做一些jQuery工作。同时,可使用$()方法作为其他库的快捷方式。无需调用jQuery.noConfiict()函数。

jQuery(function() {//使用jquery
   jQuery("p").click(function(){
        alert(jQuery(this).text());
   }
}
$("pp").style.display='none';//使用prototype

 

 

0 0
原创粉丝点击