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左侧多级菜单动态的解决方案
Feb 01 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
vue watch监控对象的简单方法示例
Jan 07 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
PHP 多进程 解决难题
2009/06/22 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python实现小球弹跳效果
2019/05/10 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python 字段拆分详解
2019/12/17 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
JDO的含义
2012/11/17 面试题
js实现弹框效果
2021/03/24 Javascript
大学生个人求职信范文
2013/09/21 职场文书
会议邀请书范文
2014/02/02 职场文书
策划总监岗位职责
2014/02/16 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016年寒假见闻
2015/10/10 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript