解决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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
Javascript模板技术
Apr 27 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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/11/25 PHP
php学习 函数 课件
2008/06/15 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP微信支付开发实例
2016/06/22 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python决策树之CART分类回归树详解
2017/12/20 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
列车长先进事迹材料
2014/01/25 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android