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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
简单谈谈json跨域
Mar 13 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
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
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery实现弹出层完美居中效果
2014/03/03 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python字符串及文本模式方法详解
2020/09/10 Python
用Python制作音乐海报
2021/01/26 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
房地产还款计划书
2014/01/10 职场文书
运动会解说词100字
2014/01/31 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
医院党员公开承诺书
2014/08/30 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
离婚协议书样本
2015/01/26 职场文书
九华山导游词
2015/02/03 职场文书
政协工作总结2015
2015/05/20 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
SSM VUE Axios详解
2021/10/05 Vue.js
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android