解决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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
使用vue-router设置每个页面的title方法
Feb 11 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
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使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
layui实现三级联动效果
2019/07/26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python中的变量如何开辟内存
2018/06/26 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
小学生打架检讨书
2014/01/26 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
先进教师事迹材料
2014/12/16 职场文书
赢在中国观后感
2015/06/02 职场文书
民主生活会意见
2015/06/05 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书