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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
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的历史和优缺点
2006/10/09 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
短信提示使用 特效
2007/01/19 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python中返回矩阵的行列方法
2018/04/04 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python自动抢红包教程详解
2019/06/11 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
质检部经理岗位职责
2014/02/19 职场文书
亮化工程实施方案
2014/03/17 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
python实现进度条的多种实现
2021/04/29 Python
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
MySQL 时间类型的选择
2021/06/05 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python