解决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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
JS 控件事件小结
Oct 31 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 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下使用以下代码连接并测试
2008/04/09 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python实现二叉树的遍历
2017/12/11 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
校园公益广告语
2014/03/13 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
战略合作意向书范本
2014/04/01 职场文书
物业品质提升方案
2014/06/08 职场文书
安全口号大全
2014/06/21 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
信用卡催款律师函
2015/05/27 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书