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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue插件实现v-model功能
Sep 10 Javascript
VSCode launch.json配置详细教程
Jun 18 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 翻页 实例代码
2009/08/07 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
班级安全教育实施方案
2014/02/23 职场文书
学生检讨书范文
2015/01/27 职场文书
鸟的天堂导游词
2015/01/31 职场文书
事业单位个人总结
2015/02/12 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js