解决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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
Array.filter中如何正确使用Async
Nov 04 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 DataGrid 实现代码
2009/08/12 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
php接口隔离原则实例分析
2019/11/11 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS正则表达式验证中文字符
2017/05/08 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
用Python实现最速下降法求极值的方法
2019/07/10 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
争论的故事教学反思
2014/02/06 职场文书
纠纷协议书
2014/04/16 职场文书
班级文化建设标语
2014/06/23 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
售后服务质量承诺书
2015/04/29 职场文书
教师节班会主持词
2015/07/06 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL