jQuery避免$符和其他JS库冲突的方法对比
更新时间：2014年02月20日 09:29:56 作者：
jQuery中需要用到$符号，如果其他js库也定义了$符号，那么就会造成冲突，会影响到js代码的正常执行，下面有几个不错的解决方法，大家可以参考下
jQuery中需要用到$符号，如果其他js库（例如大名鼎鼎的prototype)也定义了$符号，那么就会造成冲突，会影响到js代码的正常执行。jqeury提供了一些方案来避免这个问题，让我们来看看这几个方案有什么区别
方案1：
引入noConflict(),将$替换为其他符号
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});
缺点：引入了这段代码后，不仅是当前的js文件，该html引用的所有js中，如果有用到jquery中的$，都得用$j来代替之前的$
方案2：
ready函数是jquery的入口函数，可以
将$(document).ready(function(){
替换成
jQuery( document ).ready(function( $){}
缺点：只对ready嵌套内的代码有效，对嵌套外的代码是无效的。如果你所有的逻辑，都在写ready函数中，那没问题。但我们一般都会在ready函数之外写一些子函数，然后ready函数再去调用这些函数。这个方案对这些函数是无效的，因此这套方案有局限性。
方案3（推荐，特别是开发js插件时）：
给js内容包上一个函数
jQuery(function($){
//你的js代码放在这里（例如第二个方案提到的ready函数和子函数）
//如果是js文件，其实就是在文件头部和尾部各加一行代码
}
或者
(function($) {
//你的js代码
})(jQuery);
这个方法，没有上面两个方案的缺点，只会影响到被包在jQuery(function($){}中的代码。
不会影响到其他js代码，这一点很重要。试想一下，假如你写了一个js公共组件，该组件需要用到jquery，为了提高鲁棒性，需考虑$符号冲突问题。如果使用方案1，那么别人在使用时，还得遵守你的约定，把自己js代码中的$改成$,而如果使用方案3，既能避免$冲突对该组件的影响，又无需要求使用公共组件的人修改自己的代码。
方案1：
引入noConflict(),将$替换为其他符号
复制代码 代码如下:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});
缺点：引入了这段代码后，不仅是当前的js文件，该html引用的所有js中，如果有用到jquery中的$，都得用$j来代替之前的$
方案2：
ready函数是jquery的入口函数，可以
将$(document).ready(function(){
替换成
jQuery( document ).ready(function( $){}
缺点：只对ready嵌套内的代码有效，对嵌套外的代码是无效的。如果你所有的逻辑，都在写ready函数中，那没问题。但我们一般都会在ready函数之外写一些子函数，然后ready函数再去调用这些函数。这个方案对这些函数是无效的，因此这套方案有局限性。
方案3（推荐，特别是开发js插件时）：
给js内容包上一个函数
复制代码 代码如下:
jQuery(function($){
//你的js代码放在这里（例如第二个方案提到的ready函数和子函数）
//如果是js文件，其实就是在文件头部和尾部各加一行代码
}
或者
复制代码 代码如下:
(function($) {
//你的js代码
})(jQuery);
这个方法，没有上面两个方案的缺点，只会影响到被包在jQuery(function($){}中的代码。
不会影响到其他js代码，这一点很重要。试想一下，假如你写了一个js公共组件，该组件需要用到jquery，为了提高鲁棒性，需考虑$符号冲突问题。如果使用方案1，那么别人在使用时，还得遵守你的约定，把自己js代码中的$改成$,而如果使用方案3，既能避免$冲突对该组件的影响，又无需要求使用公共组件的人修改自己的代码。
相关文章
好久没有温习JS了。 最近看到VS2010把Jquery作为JS标准库纳入了Web项目里，再不会用Jquery，真怕自己“OUT”了。2010-05-05
这篇文章主要介绍了jQuery实现每隔一段时间自动更换样式的方法,结合实例形式较为详细的分析了jQuery结合时间函数动态修改页面元素属性相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了jQuery实现简单的回到顶部totop功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了jQuery-ui插件sortable实现自由拖动排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这是一款jquery hover抽屉式导航图片展开收缩切换特效代码，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。2015-08-08
本篇文章是对jQuery中的按钮组件进行了详细的分析介绍，需要的朋友参考下2013-06-06
这篇文章主要为大家详细介绍了layui表格效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态2014-11-11
jQuery的ajax中使用FormData实现页面无刷新上传功能
这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友参考下本文2017-01-01
本例除了使用标准的JQuery类库外，还添加了自定义的函数来进行字符串的format操作。2013-03-03
最新评论