问题描述:
在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库的,而使用语句块的写法可屏蔽冲突。
博文转自:
时间: 2024-10-07 08:47:06