解决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 相关文章推荐
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
php基于redis处理session的方法
Mar 14 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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新手上路(十四)
2006/10/09 PHP
php 地区分类排序算法
2013/07/01 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python实现低通滤波器代码
2020/02/26 Python
python else语句在循环中的运用详解
2020/07/06 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
小学生环保演讲稿
2014/04/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
人事专员岗位职责
2015/02/03 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python