解决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 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
微信小程序自定义导航栏实例代码
Apr 05 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
React组件生命周期详解
2017/07/03 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python让列表倒序输出的实例
2018/06/25 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python进行TCP端口扫描的实现
2018/12/21 Python
pandas计数 value_counts()的使用
2019/06/24 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技