解决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 相关文章推荐
JS OffsetParent属性深入解析
Jan 13 Javascript
js实现简单的验证码
Dec 25 Javascript
KnockoutJs快速入门教程
May 16 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
聊聊Python中的pypy
2018/01/12 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
什么是类的返射机制
2016/02/06 面试题
益模软件Java笔试题
2012/03/27 面试题
初中新生军训方案
2014/05/13 职场文书
禁止酒驾标语
2014/06/25 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
社区党支部承诺书
2015/04/29 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL