JQuery的$和其它JS发生冲突的快速解决方法


Posted in Javascript onJanuary 24, 2014

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。

然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:

我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点

举例:

方法一:

<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>

方法二:

我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点

<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>

还有其它的方法,都给大家列举出来,同理都可以看明白了吧,呵呵。

方法三:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});  
$("pp").style.display = 'none'; //使用prototype
</script>

方法四:
<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>
Javascript 相关文章推荐
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
js实现随机圆与矩形功能
Oct 29 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
js判断60秒以及倒计时示例代码
Jan 24 #Javascript
innerText 使用示例
Jan 23 #Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 #Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 #Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 #Javascript
解决jquery插件冲突的问题
Jan 23 #Javascript
js实现日期级联效果
Jan 23 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
js数据类型检测总结
2018/08/05 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python实现中文输出的两种方法
2015/05/09 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python中spy++的使用超详细教程
2021/01/29 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
开会迟到检讨书
2014/02/03 职场文书
买房委托公证书
2014/04/08 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
大学专科求职信
2014/07/02 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android