解决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中createElement事件
Dec 05 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
python 性能优化方法小结
2017/03/31 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python实现简单的购物程序代码实例
2020/03/03 Python
销售实习自我鉴定
2013/12/07 职场文书
三年级学生评语
2014/04/23 职场文书
大学生毕业求职信
2014/06/12 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年学前班工作总结
2014/12/08 职场文书
婚宴领导致辞
2015/07/28 职场文书
关于做家务的心得体会
2016/01/23 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python Pandas常用函数方法总结
2021/06/15 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技