解决jquery插件冲突的问题


Posted in Javascript onJanuary 23, 2014

今天做了一个例子,用jquery和jquery插件 lightbox做了图片浮动放大效果,没有任何问题。

然后再加了一个 导航栏的js,结构导航的js和图片浮动放大的js发生了冲突,

要么就只有导航栏的js有效,要么就只有图片浮动js有效。

结果上网搜了搜,解决办法有如下

jQuery.noConflict()

概述
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

'''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。示例

描述:
将$引用的对象映射回原始的对象。

jQuery 代码:
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

描述:
恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:
jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码描述:
创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';

jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码  我把导航的js代码写在这中间就行了
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
语义化 H1 标签
Jan 14 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
vue实现简单瀑布流布局
May 28 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
js实现日期级联效果
Jan 23 #Javascript
js日期、星座的级联显示代码
Jan 23 #Javascript
js根据日期判断星座的示例代码
Jan 23 #Javascript
jQuery中Dom的基本操作小结
Jan 23 #Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 #Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 #Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
Mysql的常用命令
2006/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python多线程分块读取文件
2019/08/29 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python中Qslider控件实操详解
2021/02/20 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
自我鉴定写作要点
2014/01/17 职场文书
家长写给孩子的评语
2014/04/18 职场文书
质量承诺书格式
2014/05/20 职场文书
服务承诺书怎么写
2014/05/24 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript