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的实现回车键Enter切换焦点
Sep 14 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
js变量提升深入理解
Sep 16 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
vue 动态组件用法示例小结
Mar 06 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中的 == 运算符进行字符串比较
2006/11/26 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
JS location几个方法小姐
2008/07/09 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Django封装交互接口代码
2020/07/12 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
火山动力Java笔试题
2014/06/26 面试题
个人简历自我评价八例
2013/10/31 职场文书
管理专员自荐信
2014/01/26 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL