jQuery $命名冲突解决方案汇总


Posted in Javascript onNovember 13, 2014

最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。

例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>冲突解决1</title> 

<!-- 引入 prototype  --> 

<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 

<!-- 引入 jQuery  --> 

<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script> 

</head> 

<body> 

<p id="pp">test---prototype</p> 

<p >test---jQuery</p> 

<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> 

</body> 

</html>

例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>冲突解决2</title> 

<!-- 引入 prototype  --> 

<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 

<!-- 引入 jQuery  --> 

<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script> 

</head> 

<body> 

<p id="pp">test---prototype</p> 

<p >test---jQuery</p> 

<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> 

</body> 

</html>

例三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>冲突解决3</title> 

<!-- 引入 prototype  --> 

<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 

<!-- 引入 jQuery  --> 

<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script> 

</head> 

<body> 

<p id="pp">test---prototype</p> 

<p >test---jQuery</p> 

<script type="text/javascript"> 

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  

jQuery(function($){                    //使用jQuery  

    $("p").click(function(){        //继续使用 $ 方法  

        alert( $(this).text() );  

    });  

});  

$("pp").style.display = 'none';        //使用prototype  

</script> 

</body> 

</html>

例四:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>冲突解决4</title> 

<!-- 引入 prototype  --> 

<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 

<!-- 引入 jQuery  --> 

<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script> 

</head> 

<body> 

<p id="pp">test---prototype</p> 

<p >test---jQuery</p> 

<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> 

</body> 

</html>

例五:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>冲突解决5</title> 

<!--先导入jQuery --> 

<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script> 

<!--后导入其他库 --> 

<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 

</head> 

<body> 

<p id="pp">test---prototype</p> 

<p >test---jQuery</p> 

<script type="text/javascript"> 

jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。  

    jQuery("p").click(function(){        

        alert( jQuery(this).text() );  

    });  

});  

$("pp").style.display = 'none'; //使用prototype  

</script> 

</body> 

</html>

看,原来解决问题的方法可不止一个两个呢,有需要的小伙伴们自己来取吧

Javascript 相关文章推荐
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
javascript冒泡排序小结
Apr 10 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
js获取字符串最后一位方法汇总
Nov 13 #Javascript
实现js保留小数点后N位的代码
Nov 13 #Javascript
详谈jQuery中的this和$(this)
Nov 13 #Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 #Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 #Javascript
Javascript window对象详解
Nov 12 #Javascript
a标签的href与onclick事件的区别详解
Nov 12 #Javascript
You might like
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python读取几个G的csv文件方法
2019/01/07 Python
Django CBV类的用法详解
2019/07/26 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
高中军训广播稿
2014/01/14 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python