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 弹出层插件实现代码
Oct 24 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
微信小程序实现人脸识别
May 25 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 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的FTP学习(四)
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
Javascript 解疑
2009/11/11 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
详解js闭包
2014/09/02 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python 序列的方法总结
2016/10/18 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
如何通过python画loss曲线的方法
2019/06/26 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
司机的工作范围及职责
2013/11/13 职场文书
初三政治教学反思
2014/01/30 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2014年档案室工作总结
2014/12/01 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
win sever 2022如何占用操作主机角色
2022/06/25 Servers