解决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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
微信小程序 上传头像的实例详解
Oct 27 Javascript
React路由管理之React Router总结
May 10 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
营销部内勤岗位职责
2014/04/30 职场文书
跳槽求职信范文
2014/05/26 职场文书
2015年售票员工作总结
2015/04/29 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
SQL注入详解及防范方法
2021/12/06 MySQL