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 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
Angular排序实例详解
Jun 28 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
js实现随机数小游戏
Jun 28 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php session安全问题分析
2011/06/24 PHP
php中apc缓存使用示例
2013/12/25 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python如何生成网页验证码
2018/07/28 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python分布式计算dispy的使用详解
2019/12/22 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
农村婚礼证婚词
2014/01/10 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
大学生求职信范文
2014/05/24 职场文书
2015年派出所工作总结
2015/04/24 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript