解决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 input 数字验证代码
Jul 30 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
jquery处理json对象
Nov 03 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
js简单实现自动生成表格功能示例
Jun 02 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
如何使用PHP中的字符串函数
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
js实现右键弹出自定义菜单
2020/09/08 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python logging模块用法示例
2018/08/28 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
个人教师自我评价范文
2013/12/02 职场文书
高一家长会邀请函
2014/01/12 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
小学生综合素质评语
2014/04/23 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
典型事迹材料范文
2014/12/29 职场文书
保送生自荐信
2015/03/06 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js