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 经典动画菜单效果代码
Jan 26 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
详解jQuery中的easyui
Sep 02 jQuery
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python语言使用技巧分享
2016/05/31 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
数学检讨书1000字
2014/02/24 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
健康教育评估方案
2014/05/25 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
红楼梦读书笔记
2015/06/25 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
一文搞懂Java中的注解和反射
2022/06/21 Java/Android