Jquery的$命名冲突解决
问题描述:
在Jquery库中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。
当引入多个js库后,其它的js库中也定义了$符号的话,就导致在使用$命名符时jquery的$和其它框架的$产生冲突(这里的冲突也和js库文件的引入顺序有关)。
情况举例:
// js引入顺序不同的结果 ($ 永远代表最后一个定义$的js库的符号)
// --1
<script src="prototype.js" type="text/javascript"/>
<script src="jquery.js" type="text/javascript"/>
// -- $代表的是jquery中定义的$符号,也可写成JQuery('body').hide()。
// --2
<script src="jquery.js" type="text/javascript"/>
<script src="prototype.js" type="text/javascript"/>
// -- $代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery('body').hide()。
解决冲突:
jquery提供了一个noConfilict的API来解决。
使用方法:
jQuery.noConflict(); // 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
jQuery.noConflict(true); // 将$和jQuery的控制权都交还给原来的库。
常用汇总:
1、将JQuery对$的控制权让给其他框架
JQuery.noConflict(); // 返回值是JQuery;jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery。
2、自定义JQuery的别名 (当使用JQuery.noConflict()方法之后,可为JQuery重定义别名,来简化全称的写法)
var $j = JQuery.noConflict();
$j('body').hide(); // 此处$j就代表JQuery
3、使用语句块,在语句块中仍然使用jquery.js中定义的$
// 将$的控制权让出,使用jQuery的$ (或 直接使用jquery)
JQuery.noConflict(); JQuery(document).ready(function($){ $('body').hide(); // 此时在整个ready事件的方法中使用的$都是jquery.js中定义的$。
// JQuery('body').hide(); // 等同$的使用
});
或如下:
// 定义匿名函数并设置行参为$ (function($){ ..... $('body').hide(); // 此时在这个语句块中使用的都是jquery.js中定义的$。 })(JQuery)
或如下:
// 自定义别名后,使用语句块
var $j = jQuery.noConflict();
$j(function(){
$j("p").click(function(){
alert("ok");
}) ;
});
注意:语句块的方法使用非常有用,在写自定义jquery插件时,应都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而使用语句块的写法可屏蔽冲突。
博文转自: