本篇文章主要是对JQuery的$和其它JS发生冲突的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery将浏览器DOM树定义为$,通过$来获取各个子节点。
然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:
我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点。
第一种情况:先加载Prototype.js,再加载jQuery.js
jQuery noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。
第二种情况:先加载jQuery.js,再加载Prototype.js
按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。
举例:
</br>
方法一:
通过全名替代简写的方式来使用 jQuery
< script type = "text/javascript" >
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function() { //使用jQuery
jQuery("p").click(function() {
alert(jQuery(this).text());
});
});
$("pp").style.display = 'none'; //使用prototype
< /script>/
</br>
方法二:
可以创建自己的简写,通过noConflict()函数来定义一个快捷方式用来获取dom节点
< 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>/
缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$
</br>
方法三:
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
< script type = "text/javascript" >
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
//方法3-1
jQuery(document).ready(function($) {
$("p").click(function() { //继续使用 $ 方法
alert($(this).text());
});
});
//方法3-2
jQuery(function($) { //使用jQuery
$("p").click(function() { //继续使用 $ 方法
alert($(this).text());
});
});
$("pp").style.display = 'none'; //使用prototype
< /script>
方法3-1 缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。
</br>
方法四:
使用语句块
< script type = "text/javascript" >
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($) { //定义匿名函数并设置形参为$
$(function() { //匿名函数内部的$均为jQuery
$("p").click(function() { //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
< /script>
这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。
</br>
推荐方法三(3-2),方法四,特别是开发js插件时:
这两个方法,没有上面两个方法的缺点,只会影响到被包在jQuery(function($){}中的代码。 不会影响到其他js代码,这一点很重要。试想一下,假如你写了一个js公共组件,该组件需要用到jquery,为了提高鲁棒性,需考虑$符号冲突问题。如果使用方案二,那么别人在使用时,还得遵守你的约定,把自己js代码中的$改成$j,而如果使用方案三(3-2),方案四,既能避免$冲突对该组件的影响,又无需要求使用公共组件的人修改自己的代码。
</br>
注意:
1.引用javascript类库时,把jQuery引用放在最后面,可以避免冲突。
2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的。
整理来源:http://www.jb51.net/article/46152.htm
http://www.jb51.net/article/90293.htm
http://www.jb51.net/article/47028.htm